/* Streamlined Campaigns — operations system
   Visual language taken from the team's existing boards: black rail, yellow
   action colour, generous white cards, monospace for anything the system
   says about itself rather than about the work. */

:root {
  --rail: #0c0c0c;
  --rail-2: #171717;
  --rail-text: #e8e8e8;
  --rail-dim: #9a9a9a;
  --rail-line: #262626;

  --bg: #ffffff;
  --bg-tint: linear-gradient(180deg, #fdfaf0 0%, #ffffff 260px);
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #ececec;
  --border-strong: #dcdcdc;

  --text: #131313;
  --text-2: #5f5f5f;
  --text-3: #767676;

  --yellow: #ffc629;
  --yellow-on: #111111;
  --yellow-deep: #e0a800;
  --yellow-soft: #fdf3d0;
  --note: #f6e6ac;
  --note-text: #3d3208;     /* the writing on a note */
  --note-dim: #8a7420;      /* its close button */
  --toast-shadow: 0 10px 30px rgba(28, 25, 10, .16), 0 2px 6px rgba(28, 25, 10, .10);

  --note-line: #e8d68e;

  --green: #2ea86a;
  --amber: #d99400;
  --red: #e04d3d;
  --blue: #3b82f6;
  --purple: #a855f7;

  /* Status colours, as a set. Every pill that means "good", "bad", "needs
     attention" or "nothing yet" takes its ground, line and text from here, so
     the two themes each answer them once. */
  --band-bg: var(--yellow); --band-line: var(--yellow-deep); --band-text: var(--yellow-on);
  --row-hover: #fcfcfc;   /* the row under the cursor */
  --good-wash: #f4fbf7;   /* done, clocked in: a tint, not a pill */
  --press: rgba(0, 0, 0, .08);
  --good-bg: #e8f6ee;  --good-line: #b7e0c8;  --good-text: #1d5735;
  --bad-bg:  #fdeceb;  --bad-line:  #f4c3bf;  --bad-text:  #7d2b22;
  --warn-bg: #fdf0cc;  --warn-line: #f0d688;  --warn-text: #7a5c00;
  --info-bg: #fbfdff;  --info-line: #cfe0fb;  --info-text: #1d4ed8;
  --mute-bg: #eef1f4;  --mute-line: #e2e6ea;  --mute-text: #5a616e;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rail-w: 236px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }

.wrap { padding: 14px 26px 40px; max-width: 1500px; }

.hello { margin-bottom: 16px; }
.hello h1 { font-size: 24px; letter-spacing: -.035em; }
.hello-date { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.role-chip {
  display: inline-block; margin-top: 10px; padding: 5px 12px;
  border-radius: var(--radius-pill); background: var(--info-bg); color: #1a56c4;
  font-size: 13px; font-weight: 700;
}

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 12px;
}
.card-pad { padding: 14px 18px; }
.card-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px 0;
}
.card-head .spacer { flex: 1; }
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
}

/* --- Stat tiles ----------------------------------------------------------- */
.stats { display: grid; gap: 10px; margin-bottom: 14px;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 16px;
}
.stat-num { font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.stat-num.amber { color: var(--amber); }
.stat-num.green { color: var(--green); }
.stat-num.red   { color: var(--red); }
.stat-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2); margin-top: 6px;
}
/* Quieter than the label: it explains the number rather than naming it. */
.stat-sub {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  margin-top: 4px;
}

/* --- Progress ring -------------------------------------------------------- */
.progress-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ring { width: 118px; height: 118px; flex: none; }
.ring-track { fill: none; stroke: var(--mute-bg); stroke-width: 11; }
.ring-arc { fill: none; stroke-width: 11; stroke-linecap: round;
            transform: rotate(-90deg); transform-origin: 50% 50%; }
.legend-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.02em; }
.legend-row { display: flex; align-items: center; gap: 9px; font-size: 15px; padding: 3px 0; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legend-num { font-weight: 700; }

/* --- Notes ---------------------------------------------------------------- */
.note {
  background: var(--note); border-radius: var(--radius); padding: 18px 22px;
  margin-bottom: 14px; position: relative;
}
.note-label {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--warn-text); margin-bottom: 10px;
}
.note textarea {
  width: 100%; background: transparent; border: none; resize: vertical;
  font: inherit; font-size: 16px; color: var(--note-text); min-height: 84px;
  padding: 0;
}
/* The placeholder has to follow the note too, or it is invisible on one theme
   and shouting on the other. */
.note textarea::placeholder { color: var(--note-dim); opacity: .9; }
.note textarea:focus { outline: none; }
.note-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.note-close {
  position: absolute; top: 12px; right: 14px; color: var(--note-dim);
  font-size: 17px; line-height: 1; background: none; border: none; cursor: pointer;
}
.note-close:hover, .note-close:focus-visible { color: var(--note-text); }
.note-add {
  display: block; width: 100%; text-align: left; padding: 16px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); font: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer; margin-bottom: 20px; color: var(--text);
}
.note-add:hover { background: var(--surface-2); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 17px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit;
  font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.yellow { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-on); }
.btn.yellow:hover { background: var(--yellow-deep); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--red); border-color: #f0c4bf; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- Filter pills --------------------------------------------------------- */
.pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-2); font-size: 14.5px; font-weight: 600; color: var(--text-2);
}
.pill:hover { background: var(--mute-bg); }
.pill.on { background: var(--yellow-soft); border-color: var(--yellow); color: var(--warn-text); font-weight: 700; }
.pill-n { font-size: 12.5px; color: var(--text-3); font-weight: 700; }
.pill.on .pill-n { color: var(--warn-text); }

/* --- Filter bar ----------------------------------------------------------- */
.filterbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filterbar .lbl { font-size: 14px; color: var(--text-2); font-weight: 600; }
/* A label and its control travel together, so a wrap never separates them. */
.filter-pair {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 14px; color: var(--text-2); font-weight: 600;
}
.filter-pair select { min-width: 76px; }
select, input[type=text], input[type=search], input[type=date],
input[type=number], input[type=email], input[type=url], textarea {
  font: inherit; font-size: 14.5px; padding: 9px 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); width: 100%;
}
.filterbar select, .filterbar input { width: auto; min-width: 140px; }
/* Narrower than the rest: a date field only ever holds a date, and at 150px it
   was pushing the page-size control onto a second line by itself. */
.filterbar input[type=date] { min-width: 0; width: 140px; }
.filterbar input[type=search] { min-width: 190px; flex: 1 1 190px; max-width: 260px; }
/* The brand list holds names like "International Pharmaceuticals, Inc." and
   stretched to fit the longest one, taking 278px of a 1288px bar. */
.filterbar select { max-width: 190px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--yellow-soft); outline-offset: -1px; border-color: var(--yellow-deep);
}
textarea { resize: vertical; min-height: 80px; font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-3); }

/* --- Table ---------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2); padding: 11px 16px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--row-hover); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

.task-title { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.task-desc { font-size: 14px; color: var(--text-2); margin-top: 2px; }
/* Where the brief used to be printed. Quiet, and a size below the title: it is
   a way in, not a second line of the row competing with the task's name. */
.task-more {
  margin-top: 3px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 650; color: var(--text-3);
}
.task-more:hover { color: var(--yellow-deep); }
.task-more:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 2px; }

/* The brief, read-only. */
.ti-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ti-body {
  /* pre-wrap, so a brief pasted in with numbered steps keeps them. Reflowed
     into one paragraph it stops being a list of things to do. */
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 14px; line-height: 1.55; color: var(--text);
  max-height: 52vh; overflow-y: auto;
}
.ti-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ti-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3);
}
/* --- The task table's columns ----------------------------------------------
   Fixed layout with declared widths. Left to itself the browser gave the Task
   column the least room of the nine and broke every title into one word per
   line; below the minimum the card scrolls sideways, which is a far better
   failure than an unreadable column. */
/* Shares of the width rather than fixed pixels, so the columns grow with a
   wide screen instead of leaving the table 50px too big for its card and
   scrolling for no reason. The minimum is where scrolling actually starts. */
.tbl-tasks { table-layout: fixed; min-width: 1150px; }
.tbl-tasks .col-brand  { width: 13%; }
.tbl-tasks .col-task   { width: 24%; }
.tbl-tasks .col-links  { width: 10%; }
.tbl-tasks .col-by     { width: 9%; }
.tbl-tasks .col-to     { width: 12%; }
.tbl-tasks .col-due    { width: 8%; }
.tbl-tasks .col-pri    { width: 6%; }
/* The status dropdown needs 144px to show "In progress" without clipping. */
.tbl-tasks .col-status { width: 11%; }
.tbl-tasks .col-act    { width: 7%; }
.tbl-tasks td { padding: 10px 12px; vertical-align: top; }
.tbl-tasks th { padding-left: 12px; padding-right: 12px; }
/* Long titles and brand names break inside a word rather than blowing the
   column out; a name is still readable broken, unreadable clipped. */
.tbl-tasks .task-title, .tbl-tasks .task-open, .tbl-tasks .task-desc {
  overflow-wrap: anywhere;
}
.tbl-tasks .brand-name { line-height: 1.3; }
.tbl-tasks .who { white-space: normal; }

.task-link { font-size: 13px; color: var(--yellow-deep); font-weight: 650;
             display: flex; align-items: center; gap: 5px; }
.task-link:hover { text-decoration: underline; }
/* The label needs its own box: text-overflow does nothing to the children of a
   flex container, which is why these were cut off mid-word with no ellipsis. */
.task-link-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.links-cell .task-link + .task-link { margin-top: 4px; }

/* The editor: address, then what it is, then a way to take it off. */
.links-editor { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.link-row { display: flex; gap: 7px; align-items: center; }
.link-row input[type=url] { flex: 2; min-width: 0; }
.link-row input[type=text] { flex: 1; min-width: 0; }
.link-row button { flex: none; }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }
.due { font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.due.late { color: var(--red); font-weight: 700; }

.brand-pill {
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
/* The brand on a task, with the bubble taken off. A pill costs 30px of padding
   and a border either side of a name, in a column where the names are things
   like "Gentle Supreme Philippines, Inc. | Wings" - so the bubble was pushing
   the name into four wrapped lines and making the row tall to hold a shape.
   Plain text wraps in the same column at half the height. */
.brand-name {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;
}
.prio {
  display: inline-block; padding: 3px 9px; border-radius: 5px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.prio.low    { background: var(--mute-bg); color: var(--mute-text); }
.prio.med    { background: var(--warn-bg); color: var(--warn-text); }
.prio.high   { background: var(--bad-bg); color: var(--bad-text); }
.prio.urgent { background: #e04d3d; color: #fff; }

.status-select {
  padding: 7px 11px; border-radius: var(--radius-sm); font-size: 14px;
  font-weight: 600; border: 1px solid var(--border-strong); min-width: 132px;
}
.status-select.done { background: var(--good-bg); border-color: var(--good-line); color: var(--good-text); }
.status-select.in_progress { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }

/* --- Misc ----------------------------------------------------------------- */
.empty-mono {
  font-family: var(--mono); font-size: 15px; color: var(--text-3);
  text-align: center; padding: 46px 20px;
}
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }
.small { font-size: 13.5px; }
.tiny { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.flash {
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px;
  font-size: 14.5px; font-weight: 600; background: var(--good-bg); color: var(--good-text);
}
.flash.err { background: var(--bad-bg); color: var(--bad-text); }

/* The meeting's own name, edited in place. Styled as text rather than as a
   form field so the header still reads as a heading; the border appears when
   you go near it, which is the hint that it can be changed. */
.mancom-title {
  font-family: var(--mono); font-size: 13px; color: var(--text-3);
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  padding: 3px 7px; margin: 2px 0 0 -7px; width: 320px; max-width: 100%;
}
.mancom-title:hover { border-color: var(--border); }
.mancom-title:focus {
  border-color: var(--border-strong); background: var(--surface);
  color: var(--text); outline: none;
}
.mancom-title::placeholder { color: var(--text-3); }

/* --- The company charter on ManCom ----------------------------------------
   Set apart from the meeting log below it: this is the standing text those
   updates are measured against, not another entry. Quiet by default - it is
   read once and then lived with - with the three priorities carrying the only
   colour, because they are the part people are meant to act on. */
.charter {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 22px 24px;
  margin: 0 0 22px;
}
.charter-row { display: flex; gap: 28px; align-items: flex-start; }
.charter-row .charter-block { flex: 1; }
.charter-block + .charter-block { margin-top: 20px; }
.charter-label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 7px;
}
.charter-vision {
  margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600;
  letter-spacing: -.01em; max-width: 34ch; text-wrap: balance;
}
.charter-mission {
  margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--text-2);
  max-width: 82ch;
}
.charter-mission:last-child { margin-bottom: 0; }
.charter-mission b { color: var(--text); font-weight: 650; }
.charter-theme {
  flex: none; text-align: right; padding-left: 24px;
  border-left: 1px solid var(--border);
}
.charter-theme-text {
  margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700;
  color: var(--yellow-deep); letter-spacing: -.01em;
}

.charter-goals {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.goal {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-top: 3px solid var(--border-strong);
  border-radius: 10px; padding: 14px 16px 16px;
}
.goal-1 { border-top-color: var(--green); }
.goal-2 { border-top-color: var(--blue); }
.goal-3 { border-top-color: var(--amber); }
.goal-no {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--text-3); margin-bottom: 2px;
}
.goal h3 {
  margin: 0 0 9px; font-size: 15px; letter-spacing: -.01em;
}
.goal-1 h3 { color: var(--green); }
.goal-2 h3 { color: var(--blue); }
.goal-3 h3 { color: var(--amber); }
.goal p {
  margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.goal p:last-child { margin-bottom: 0; }
/* The label sits on its own line so the sentence after it starts at the left
   margin like every other sentence in the card. */
.goal p span {
  display: block; font-family: var(--mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 2px;
}

@media (max-width: 900px) {
  .charter-goals { grid-template-columns: 1fr; }
  .charter-row { flex-direction: column; gap: 18px; }
  .charter-theme {
    text-align: left; padding-left: 0; padding-top: 16px;
    border-left: none; border-top: 1px solid var(--border); width: 100%;
  }
  .charter-theme-text br { display: none; }
}

/* --- The Client Library ---------------------------------------------------- */
/* Six columns sharing the full width. The task count was dropped: this is the
   client list, not a workload report, and it was the narrowest column carrying
   the least. Its share went to the two that were being squeezed - the client's
   own name and the people on it. */
.tbl-clients { table-layout: fixed; min-width: 940px; }
.tbl-clients .col-cname   { width: 22%; }
.tbl-clients .col-cstatus { width: 10%; }
.tbl-clients .col-cscope  { width: 16%; }
.tbl-clients .col-cdates  { width: 12%; }
.tbl-clients .col-cteam   { width: 19%; }
/* Four buttons now, not three - Edit, Team, Logins and the remove cross - and
   the column was never widened to match, so the cross dropped onto a line of
   its own. Sized to what they actually measure rather than to what looks
   about right. */
.tbl-clients .col-cact    { width: 21%; }
.tbl-clients td { vertical-align: top; padding: 11px 12px; }
.tbl-clients th { padding-left: 12px; padding-right: 12px; }
.tbl-clients .brand-pill {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.tbl-clients .who { white-space: normal; }
/* Flex, not inline-block. The three buttons come to 193px in a 195px cell and
   still wrapped, because the newlines between them in the template render as
   spaces - about eight pixels of nothing. A flex row has no such gaps, and the
   spacing becomes a number rather than an accident of the markup. */
/* The buttons are laid out by a wrapper inside the cell, never by the cell.
   A td set to display:flex is no longer a table cell: it drops out of the
   row's height and draws its own bottom border, which showed up as the line
   between rows stopping halfway across the table. */
.row-actions {
  display: flex; justify-content: flex-end; align-items: flex-start;
  flex-wrap: wrap; gap: 4px;
}
.row-actions .btn { margin: 0; }

.scope-chip {
  display: inline-block; margin: 0 4px 4px 0; padding: 3px 9px;
  border-radius: var(--radius-pill); background: var(--surface-2);
  border: 1px solid var(--border); font-size: 11.5px; font-weight: 650;
  color: var(--text-2);
}
/* The number sits inside its scope chip, told apart by weight and a hairline
   rather than by a second chip beside it. */
.scope-credits {
  margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--border-strong);
  font-family: var(--mono); font-weight: 700; color: var(--text);
}
.scope-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-box {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600;
}
.scope-box input { width: auto; margin: 0; }
.scope-box:hover { border-color: var(--yellow-deep); }
.scope-other { margin-top: 10px; }
/* Month and year sit as one control even though they post two values. */
.month-picker { display: flex; gap: 6px; margin: 0; }
.month-picker select { min-width: 0; width: auto; }
.month-picker select[name=m] { width: 132px; }
.month-picker select[name=y] { width: 92px; }
/* Reused on the calendar for retainer clients that have no line yet. */
.map-orphans {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; border: 1px dashed var(--border-strong);
  border-radius: 10px;
}
.map-client {
  font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--radius-pill); background: var(--yellow-soft);
  border: 1px solid var(--note-line);
}
.map-client.ended { background: var(--surface-2); border-color: var(--border); color: var(--text-3); }

.seat-list { display: flex; flex-direction: column; gap: 8px; }
.seat {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
}
.seat .spacer { flex: 1; }

/* --- Stored logins ---------------------------------------------------------
   Nothing here shows a password until it is asked for, and the ask is a POST
   that gets written down. The styling follows: this block should look like
   something you are being trusted with, not another form. */
.cred {
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  border-radius: 9px; padding: 11px 13px; margin-bottom: 10px;
}
.cred-head { display: flex; align-items: center; gap: 10px; }
.cred-head .spacer { flex: 1; }
.cred-user { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.cred-secret { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cred-secret code {
  font-family: var(--mono); font-size: 13px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px;
  min-height: 26px; display: none;
}
.cred-secret code.shown { display: inline-block; }
.cred-edit summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-2); margin-top: 9px;
  font-weight: 600;
}

/* The brand tracker: one row per brand, three link slots across. */
.tbl-cal { table-layout: fixed; min-width: 1140px; }
.tbl-cal .col-strat { width: 15%; }
.tbl-cal .col-brand { width: 17%; }
.tbl-cal .col-l1, .tbl-cal .col-l2, .tbl-cal .col-l3 { width: 18%; }
.tbl-cal .col-lrow  { width: 14%; }

.tbl-cal td { vertical-align: top; padding: 11px 12px; }
.tbl-cal th { padding-left: 12px; padding-right: 12px; }
.tbl-cal .brand-pill { white-space: normal; overflow-wrap: anywhere; }
.tbl-cal .who { white-space: normal; }
/* An empty slot is a quiet invitation, not a blank. It should read as
   "nothing here yet" rather than competing with the links beside it. */
.slot-add { color: var(--text-3); border-style: dashed; }
.slot-add:hover { color: var(--text); }
.slot-edit { margin-left: 6px; color: var(--text-3); font-size: 11px; padding: 2px 7px; }

/* --- ASC tracker ------------------------------------------------------------
   A clearance sheet: what was submitted, and where each thing stands. The
   status is the only column that moves, so it is the only one that is a
   control rather than text. */
/* Even shares rather than a wide Label and four squeezed columns beside it.
   The Label is the longest text but the other four are all controls that have
   to be readable and clickable; starving them to give one column room made
   every one of them awkward. */
/* The floor was 980px, which is wider than the card on a laptop with the rail
   out - so the sheet stopped following the window and handed over a sideways
   scrollbar instead. It is 720 now, and the type is a size smaller throughout,
   which is what buys the columns the room that the width used to. Below 720
   the scroll is still there: five live controls in a row have a point past
   which they stop being usable, and a scrollbar is the honest answer. */
.tbl-asc { table-layout: fixed; min-width: 720px; }
.tbl-asc .col-alabel   { width: 24%; }
.tbl-asc .col-atype    { width: 12%; }
.tbl-asc .col-acode    { width: 13%; }
/* Status is the widest control because its labels are the longest words on the
   sheet - SUBMITTED COMPLIANCE FOR S1 was being clipped mid-word inside the
   box, and a select cannot ellipsis its own text. */
.tbl-asc .col-astatus  { width: 28%; }
.tbl-asc .col-acomment { width: 19%; }
.tbl-asc .col-aact     { width: 4%; }
.tbl-asc td { vertical-align: top; padding: 7px 8px; }
/* Headings wrap here, against the nowrap every other table wants. These six
   are fixed-percentage columns that narrow with the window, and a heading that
   refuses to wrap does not stay inside one - REFERENCE CODE simply ran on into
   STATUS and the two read as one label. */
.tbl-asc th {
  padding: 8px; font-size: 9.5px; white-space: normal;
  letter-spacing: .06em; line-height: 1.25; vertical-align: bottom;
}
.tbl-asc b { overflow-wrap: anywhere; font-size: 11.5px; }
.tbl-asc .mono { font-family: var(--mono); font-size: 10.5px; }

/* Colour carries the state so a long sheet can be read by scanning one column
   rather than reading every word in it. */
/* Every cell is a live field. No click to begin, no dialog: the sheet this
   replaces let you type into any cell, and anything slower than that is a
   reason to go back to it. The borders stay hidden until a cell is hovered or
   focused, so a full sheet reads as a table and not as a wall of inputs. */
.asc-row .cell {
  width: 100%; border: 1px solid transparent; background: transparent;
  padding: 4px 6px; border-radius: var(--radius-sm); font-size: 11px;
}
.asc-row .cell:hover { border-color: var(--border); background: var(--surface); }
.asc-row .cell:focus {
  border-color: var(--yellow-deep); background: var(--surface);
  outline: 2px solid var(--yellow-soft); outline-offset: -1px;
}
.asc-row .cell.mono { font-family: var(--mono); font-size: 10.5px; }
/* Grows with its content rather than clipping it. min-height, not rows, so a
   one-line comment is one line tall and a three-line one is three. */
.asc-row textarea.grow {
  resize: none; overflow: hidden; min-height: 0; line-height: 1.4;
  font-family: inherit;
}
.asc-row td { padding: 2px 4px; vertical-align: top; }
/* The controls sit on the first line, beside the first line of the text. */
.asc-row select.cell, .asc-row input.cell { margin-top: 1px; }
.asc-kill { width: 34px; text-align: center; }
.asc-scroll { overflow-x: auto; }
.asc-card { margin-bottom: 16px; overflow: hidden; }
/* The section band. The sheet this replaces uses a full-width coloured strip
   with the name in the middle, and it is the thing that tells you where you
   are on a tracker hundreds of rows long. */
.asc-band {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--band-bg); color: var(--band-text);
  padding: 7px 16px; border-bottom: 1px solid var(--band-line);
  cursor: pointer; user-select: none;
}
.asc-band:hover { filter: brightness(1.04); }
.asc-band-name {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; text-align: center;
}
/* Editable, but only announcing itself on hover and focus: a permanent box
   would turn a section heading into a form field. */
input.asc-band-name {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: inherit; font-family: inherit; padding: 2px 10px;
  /* Not width:auto - an input sizes itself to about twenty characters and
     then quietly clips, which turned FRESHEN - PROJECT MISSION into
     FRESHEN - PROJECT MISS. It takes the band, less the room the row count
     needs at either end so the name stays centred between them. */
  width: 100%; max-width: calc(100% - 160px); min-width: 0;
}
/* A closed band is one big button, so the name in it must not claim to be a
   field - the text cursor was the thing promising an edit that the click was
   not going to give. */
input.asc-band-name { cursor: text; }
.asc-card.folded input.asc-band-name { cursor: pointer; }
.asc-card.folded input.asc-band-name:hover { border-color: transparent; }
input.asc-band-name:hover { border-color: var(--yellow-deep); }
input.asc-band-name:focus {
  background: var(--surface); border-color: var(--yellow-deep); outline: none;
}
/* Out at the edge so it cannot push the name off centre. */
.asc-band-count {
  position: absolute; right: 16px; font-family: var(--mono);
  font-size: 10.5px; opacity: .65;
}
/* --- A brand's record on Calendar and Reports -------------------------------
   The same yellow band the tracker uses for a section, but here it opens and
   closes: a brand gathers a row a month, and every brand open at once is a
   page nobody can get to the bottom of. */
.cal-brand { margin-bottom: 12px; }
.cal-brand > summary {
  cursor: pointer; list-style: none; user-select: none;
  border-radius: 0;
}
.cal-brand > summary::-webkit-details-marker { display: none; }
.cal-brand:not([open]) > summary { border-bottom: none; }
.cal-brand > summary:hover { filter: brightness(1.03); }
.cal-brand > summary:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
/* Out at the edge, so the brand name keeps the middle of the band. */
.cal-brand-mark {
  position: absolute; left: 16px; font-size: 16px; line-height: 1;
  transition: transform .12s;
}
.cal-brand[open] .cal-brand-mark { transform: rotate(90deg); }

/* Out at the left edge, opposite the row count, so the name keeps the middle
   of the band whatever is on either side of it. */
.asc-caret {
  position: absolute; left: 10px; border: 0; background: none; cursor: pointer;
  color: inherit; font-size: 18px; line-height: 1; padding: 2px 6px;
  border-radius: 6px; transform: rotate(90deg); transition: transform .12s;
}
.asc-card.folded .asc-caret { transform: rotate(0deg); }
.asc-caret:hover { background: var(--press); }
.asc-caret:focus-visible { outline: 2px solid var(--yellow-on); outline-offset: -2px; }
.asc-card.folded .asc-band { border-bottom: 0; }

.asc-foot { padding: 8px 14px 12px; }
.asc-newsection { display: flex; gap: 8px; align-items: center; margin: 4px 0 18px; }
.asc-newsection input { max-width: 420px; }
/* Loud on purpose. The quiet version of this was read by nobody, and the cost
   of missing it is a row that looks deleted and is not. */
/* Says what the save is doing rather than warning about not doing it. */
.asc-dirty {
  font-size: 12.5px; font-weight: 650;
  border-radius: var(--radius-pill); padding: 5px 12px;
  border: 1px solid transparent;
}
.asc-dirty.waiting { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
.asc-dirty.saved   { color: var(--good-text); background: var(--good-bg); border-color: var(--good-line); }
.asc-dirty.failed  { color: var(--bad-text); background: var(--bad-bg); border-color: var(--bad-line); }
/* Floats out of the way rather than sitting in a bar along the bottom: there
   is no longer a button down there to reach for, only a word about what just
   happened. */
.asc-savebar {
  position: fixed; right: 22px; bottom: 20px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
}
/* display:flex outranks the hidden attribute, so the bar has to say so
   itself - without this the retry button sits there permanently, which is the
   button the whole change exists to remove. */
.asc-savebar[hidden], .asc-savebar [hidden] { display: none; }

/* SUBMITTED COMPLIANCE FOR S1 is twenty-seven characters and a select cannot
   ellipsis its own text - it simply stops drawing, mid-word. The column above
   is sized for it and the type is set tight enough to finish inside it. The
   title attribute on the control is the backstop for any label longer still. */
.asc-status, .asc-badge {
  font-size: 9.5px; font-weight: 700; border-radius: var(--radius-sm);
  padding: 3px 4px; width: 100%; letter-spacing: -.01em;
}
.asc-badge { display: inline-block; width: auto; }
.asc-status.cleared,  .asc-badge.cleared  { background: var(--good-bg); border-color: var(--good-line); color: var(--good-text); }
.asc-status.applied,  .asc-badge.applied  { background: var(--yellow-soft); border-color: var(--note-line); color: var(--warn-text); }
.asc-status.revision, .asc-badge.revision { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-text); }
.asc-status.null,     .asc-badge.null     { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-2); }
.asc-status.none,     .asc-badge.none     { color: var(--text-3); }
.asc-status.disapproved, .asc-badge.disapproved { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-text); }

/* Brand tabs. They wrap rather than scroll: seventeen brands on one line would
   hide the ones at the end, and the one you want is as likely to be last. */
.asc-brands { flex-wrap: wrap; margin-bottom: 18px; }

/* --- The brand index -------------------------------------------------------
   What replaced the tab strip. The strip was thirteen brands wrapping onto a
   second line, nine of them empty HALEON sub-brands that exist because the
   roster bills them separately - so the grid folds a family into one card and
   lets the sub-brands sit inside it, where their being empty costs no space.
   A card is sized by its content, never stretched: an eight-brand family and a
   one-brand family sit in the same row without either being padded out. */
.asc-back {
  display: inline-block; margin-bottom: 14px; font-size: 12.5px;
  font-weight: 600; color: var(--text-2); text-decoration: none;
}
.asc-back:hover { color: var(--text); }

.brandbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.brandbar .filter-box { max-width: 260px; }

.brandgrid {
  display: grid; gap: 12px; align-items: start;
  /* auto-fit, not auto-fill. auto-fill keeps the empty tracks it made room
     for, so four brands on a wide screen sat in the first four of six columns
     and left the last two as blank space down the right. auto-fit collapses
     the tracks nothing landed in, and the cards take the width back. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.brandcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.brandcard.quiet { background: var(--surface-2); }
.brandcard-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 15px 0; text-decoration: none; color: inherit;
}
a.brandcard-head:hover .brandcard-name { color: var(--yellow-deep); }
.brandcard-name {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.015em;
  color: var(--text); line-height: 1.25;
}
/* Clearance credits. The number is the figure; the word is what stops the
   column below it being read as a count of materials. */
.brandcard-cr {
  margin-left: auto; font-size: 15px; font-weight: 800; letter-spacing: -.03em;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.brandcard-crlab {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); margin-left: 3px;
}
.brandcard.quiet .brandcard-cr { color: var(--text-3); font-weight: 700; }
.brandcard-meta {
  padding: 2px 15px 11px; font-size: 11.5px; color: var(--text-3);
}
/* A card with nothing under it - no sub-brands, no meta - would otherwise end
   flush against its own name. */
.brandcard-head:last-child { padding-bottom: 14px; }
/* The sub-brands. Rows rather than pills: they are a list you scan down for
   one name, and pills make that a wrapped paragraph. */
.brandcard-list { border-top: 1px solid var(--border); }
.brandsub {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 15px; text-decoration: none;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2);
}
.brandsub:last-child { border-bottom: 0; }
.brandsub:hover { background: var(--yellow-soft); color: var(--text); }
.brandsub-name { overflow-wrap: anywhere; }
.brandsub-n {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--text);
}
.brandsub-n.none { color: var(--text-3); font-weight: 500; }
.asc-brands .tab-n {
  font-family: var(--mono); font-size: 11px; opacity: .6; margin-left: 5px;
}
.tab-add { border: 1px dashed var(--border-strong); color: var(--text-2);
           background: none; cursor: pointer; }
.tab-add:hover { color: var(--text); border-color: var(--yellow-deep); }

.asc-tally { display: flex; flex-wrap: wrap; align-items: center;
             gap: 8px; margin: 0 0 16px; }
/* The tally is also the filter, so the pills are buttons. Unpressed they read
   the same as the plain counts they replaced - the affordance is the cursor
   and the hover, not a row of shouting controls. */
.asc-pill {
  font-size: 12.5px; font-weight: 650; padding: 5px 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
  font-family: inherit; cursor: pointer; transition: box-shadow .12s, opacity .12s;
}
.asc-pill:hover { box-shadow: 0 0 0 2px var(--yellow-soft); }
.asc-pill.on { box-shadow: 0 0 0 2px var(--yellow-deep); }
/* Once something is picked, everything unpicked steps back. The class comes
   from the same handler that presses the pill - :has() has silently done
   nothing here before and is not worth the risk for a bit of dimming. */
.asc-tally.filtering .asc-pill:not(.on) { opacity: .45; }
.asc-pill.all { background: var(--surface); }
.asc-tally .filter-box { max-width: 220px; }
.asc-pill.cleared  { background: var(--good-bg); border-color: var(--good-line); color: var(--good-text); }
.asc-pill.applied  { background: var(--yellow-soft); border-color: var(--note-line); color: var(--warn-text); }
.asc-pill.revision { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-text); }
.asc-pill.disapproved { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-text); }

/* --- Calendar view ---------------------------------------------------------
   A month of work laid out on the days it is due. Sized by content rather than
   to a fixed square: a Tuesday with six things on it should be tall, not a
   scrollbar. */
.cal { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
       background: var(--surface); }
/* minmax(0, 1fr), not 1fr. A plain 1fr will not shrink below the width of its
   content, so one long task title pushed its whole column wider than the six
   beside it and the tile spilled into the next day. The zero floor is what
   makes seven equal columns actually equal. */
.cal-head, .cal-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-head { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-dow {
  padding: 9px 10px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.cal-dow.weekend { color: var(--border-strong); }
.cal-week { border-bottom: 1px solid var(--border); }
.cal-week:last-child { border-bottom: none; }
.cal-day {
  min-height: 82px; padding: 6px 6px 8px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; overflow: hidden;
}
.cal-day:last-child { border-right: none; }
/* The neighbouring month's days are shown, not blanked - work due on the 1st
   is looked for from the last row of the month before. */
.cal-day.outside { background: var(--surface-2); }
.cal-day.outside .cal-date { color: var(--border-strong); }
.cal-day.weekend { background: var(--surface-2); }
.cal-day.today { background: var(--yellow-soft); }
.cal-date {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.cal-day.today .cal-date { color: var(--yellow-deep); font-weight: 700; }
.cal-mon { font-weight: 700; }

.cal-task {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  text-align: left; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--text-3);
  border-radius: 6px; padding: 4px 6px 5px; font-size: 11.5px; line-height: 1.3;
}
button.cal-task:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cal-task.todo { border-left-color: var(--text-3); }
.cal-task.in_progress { border-left-color: var(--amber); }
.cal-task.done { border-left-color: var(--green); }
.cal-task.done .cal-task-title { text-decoration: line-through; color: var(--text-3); }
.cal-task-title {
  display: block; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-task-meta {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
  min-width: 0; overflow: hidden;
}
.cal-task-time {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  margin-right: 2px; white-space: nowrap;
}
.cal-chip {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 7.5px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.undated { display: flex; flex-wrap: wrap; gap: 8px; }
.undated .cal-task { width: auto; min-width: 180px; max-width: 260px; }

@media (max-width: 900px) {
  /* A seven-column grid on a phone gives every day about forty pixels, which
     fits nothing. Stacked, one day per row, with the empty days dropped. */
  .cal-head { display: none; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-day { min-height: 0; border-right: none; border-bottom: 1px solid var(--border); }
  .cal-day:empty, .cal-day.outside { display: none; }
}

/* --- Searchable dropdown ---------------------------------------------------
   Built on top of a real <select>, which stays in the form and keeps its name
   and value. If the script never runs the plain dropdown is still there and
   still submits - the search is an improvement on it, not a replacement. */
.ss { position: relative; }
.ss select { display: none; }
.ss-value {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.ss-value::after {
  content: ""; margin-left: auto; flex: none;
  border: 5px solid transparent; border-top-color: var(--text-3);
  transform: translateY(2px);
}
.ss-value.is-empty { color: var(--text-3); }
.ss-panel {
  position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding: 8px; max-height: 280px; display: flex; flex-direction: column;
}
.ss-panel[hidden] { display: none; }
.ss-search { width: 100%; margin-bottom: 6px; }
.ss-list { overflow-y: auto; }
.ss-opt {
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-opt:hover, .ss-opt.active { background: var(--yellow-soft); }
/* A chosen name keeps its place in the list rather than moving to the top, so
   the list does not reshuffle under the cursor while somebody picks a team. */
.ss-opt.chosen { font-weight: 650; }
.ss-opt.chosen::before {
  content: "\2713"; color: var(--yellow-deep); font-weight: 700;
  margin-right: 7px;
}
/* The tick takes room, so the unticked rows are padded to match and the names
   stay in one column. */
.ss-opt:not(.chosen)::before {
  content: ""; display: inline-block; width: 12px; margin-right: 7px;
}
.ss-none { padding: 10px; color: var(--text-3); font-size: 13.5px; }
.ss-hint {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 7px;
  font-size: 12px; color: var(--text-3);
}
/* Several faces in one table cell, stacked rather than run together. */
.who-stack { display: flex; flex-direction: column; gap: 5px; }
/* A name that narrows the board. Underlined only on hover: a table of
   permanently underlined names reads as a wall of links. */
/* Name on its line, what they do underneath. Run together with a middot the
   pair wraps mid-title - "Bryan Throy Auxilio · Junior" then "Creative
   Strategist" on the next line, which reads as two broken thoughts. */
.who-lines { display: block; min-width: 0; line-height: 1.35; }
.who-lines .tiny { display: block; }

.who-link { color: inherit; text-decoration: none; border-radius: 6px; }
.who-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.person-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--yellow-soft); border: 1px solid var(--note-line);
  border-radius: 10px; padding: 8px 12px; margin: 0 0 12px;
  font-size: 13.5px;
}
.person-filter-off {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); text-decoration: underline;
}
.person-filter-off:hover { color: var(--text); }

/* --- Company announcements -------------------------------------------------
   Deliberately the loudest block on the Overview. Everything around it is
   white on white; this one is tinted and carries the brand yellow down its
   edge, so it registers before a word of it has been read. One notice at a
   time, because a stack of them reads as a wall and gets skipped. */
.notices {
  background: var(--yellow-soft);
  border: 1px solid var(--note-line);
  border-left: 5px solid var(--yellow);
  border-radius: 12px;
  padding: 15px 20px 18px;
  margin: 0 0 24px;
}
.notices-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.notices-head .spacer { flex: 1; }
.notices-eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--yellow-deep);
}
.notices-count {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums; margin-right: 4px;
}
/* Words, not bare chevrons. A row of dots reads as decoration and people never
   find out there is more than one notice behind it. */
.notices-step {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 600;
}
.notices-step span { font-size: 16px; line-height: 1; }
.notices-step:hover {
  background: var(--yellow); color: var(--yellow-on); border-color: var(--yellow-deep);
}
.notices-nav {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--note-line);
}
.notices-nav .spacer { flex: 1; }
/* Links inside a notice - underlined, because colour alone is not enough on a
   ground this close to the accent. */
.notice-body a { color: var(--warn-text); text-decoration: underline; }
.notice-body a:hover { color: var(--text); }
.notice-subject { font-size: 20px; line-height: 1.25; margin: 0 0 7px; text-wrap: balance; }
/* pre-wrap so the line breaks somebody typed are the line breaks people read. */
.notice-body {
  font-size: 15px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; max-width: 72ch;
}
.notice-foot { display: flex; align-items: center; gap: 10px; margin-top: 13px; flex-wrap: wrap; }
.notice-foot .spacer { flex: 1; }
.notice-by { font-weight: 650; font-size: 13.5px; }
.notice-when { font-family: var(--mono); font-size: 12.5px; color: var(--text-3); }
.notice-empty { color: var(--text-2); font-size: 14.5px; }
.notices-dots { display: flex; gap: 6px; }
.notices-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--note-line); cursor: pointer;
}
.notices-dot.on { background: var(--yellow-deep); }
@media (max-width: 640px) {
  .notice-subject { font-size: 17.5px; }
  .notices-eyebrow { font-size: 10.5px; letter-spacing: .08em; }
  .notices-nav .spacer { display: none; }
  .notices-nav { gap: 6px; }
  .notices-step { flex: 1; justify-content: center; }
}

.announce { border-top: 1px solid var(--border); padding: 16px 0 0; margin-top: 14px; }
.announce:first-of-type { border-top: none; margin-top: 6px; }
.announce-body { font-size: 15.5px; }
.announce-meta { font-family: var(--mono); font-size: 13px; color: var(--text-3); margin-top: 5px; }

.emp-row { display: flex; align-items: center; gap: 12px; padding: 13px 0;
           border-bottom: 1px solid var(--border); }
.emp-row:last-child { border-bottom: none; }
.emp-name { font-weight: 700; font-size: 15px; }
.emp-counts { margin-left: auto; display: flex; gap: 22px; font-size: 14px; }
.emp-counts b { font-weight: 700; }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; color: var(--text-2); }
/* An aside inside a label - "optional", "blank if ongoing", "prints on
   estimates" - is not part of the label. It inherited the label's bold, so it
   read as a second heading rather than a note, worst where the note is long:
   "Cc optional, separate with commas" came out as one bold line. */
.field label .tiny, .field label .muted, .field label .hint {
  font-weight: 400; color: var(--text-3);
}
.field .hint { font-size: 12.5px; color: var(--text-3); }
.form-actions { display: flex; gap: 10px; margin-top: 18px; }

.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 60;
  display: grid; place-items: start center; padding: 60px 20px; overflow-y: auto;
}
.modal { background: var(--surface); border-radius: var(--radius);
         width: 100%; max-width: 680px; }
.modal.wide { max-width: 860px; }

/* --- Editing a dropdown's choices -------------------------------------------
   Two lists side by side, each choice its own row of name / Save / remove. */
.opt-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 26px; }
.opt-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.opt-row input[type=text] { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.opt-add { margin-top: 12px; padding-top: 12px;
           border-top: 1px dashed var(--border); }
@media (max-width: 720px) {
  .opt-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .rail { display: none; }
  .wrap, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* --- Operations nav group ------------------------------------------------- */
.rail-group { margin-bottom: 4px; }
.rail-group > summary { list-style: none; }
.rail-group > summary::-webkit-details-marker { display: none; }
.rail-summary {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rail-dim);
  cursor: pointer; user-select: none;
}
.rail-summary:hover { background: var(--rail-2); color: var(--rail-text); }
.rail-caret { display: inline-block; transition: transform .12s ease; font-size: 10px; }
.rail-group[open] > summary .rail-caret { transform: rotate(90deg); }
.rail-item.sub { padding-left: 22px; font-size: 14.5px; }
.rail-subhead {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #6a6a6a; padding: 12px 12px 5px 22px;
}

/* --- Charts --------------------------------------------------------------- */
.chart-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.chart-title { font-size: 13.5px; font-weight: 700; margin-bottom: 1px; }
.chart-sub { font-size: 11.5px; color: var(--text-3); margin-bottom: 10px; }
.donut { width: 104px; height: 104px; display: block; flex: none; }
.chart-row { display: flex; align-items: center; gap: 14px; }
.donut-hole-num { font-size: 13px; font-weight: 800; letter-spacing: -.03em; fill: var(--text); }
.donut-hole-lbl { font-size: 4.4px; font-weight: 700; fill: #949494;
                  letter-spacing: .1em; text-transform: uppercase; }
.chart-legend { flex: 1; min-width: 0; }
.chart-legend .legend-row { font-size: 12.5px; padding: 1px 0; }
.chart-legend .legend-row .n { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.loadbar-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.loadbar-name { width: 130px; font-size: 14px; font-weight: 600; flex: none;
                display: flex; align-items: center; gap: 8px; }
.loadbar-track { flex: 1; height: 16px; background: var(--mute-bg); border-radius: 5px; overflow: hidden; }
.loadbar-fill { display: block; height: 100%; border-radius: 6px; min-width: 3px; }
.loadbar-val { width: 118px; text-align: right; font-size: 13px; color: var(--text-2);
               font-variant-numeric: tabular-nums; flex: none; }
.loadbar-avg { position: relative; height: 0; }

/* --- Observations --------------------------------------------------------- */
.obs { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.obs:last-child { border-bottom: none; }
.obs-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.obs.critical .obs-dot { background: var(--red); }
.obs.warning  .obs-dot { background: var(--amber); }
.obs.info     .obs-dot { background: #9ca3af; }
.obs.good     .obs-dot { background: var(--green); }
.obs-title { font-weight: 700; font-size: 14px; }
.obs-detail { font-size: 13px; color: var(--text-2); margin-top: 1px; }
.spin { display: none; }
.htmx-request .spin { display: inline; }
.htmx-request .nospin { display: none; }

/* --- Seven-day forecast chart --------------------------------------------- */
.daychart { display: flex; gap: 10px; align-items: flex-end; height: 190px; padding: 4px 0; }
.daycol { flex: 1; display: flex; flex-direction: column; align-items: center;
          height: 100%; min-width: 0; }
.daycol-n { font-size: 13px; font-weight: 800; height: 18px; color: var(--text); }
.daycol-n.zero { color: transparent; }
.daycol-stack {
  flex: 1; width: 100%; max-width: 54px; display: flex; flex-direction: column-reverse;
  justify-content: flex-start; background: var(--mute-bg); border-radius: 7px; overflow: hidden;
}
.daycol-seg { display: block; width: 100%; min-height: 4px; }
.daycol.weekend .daycol-stack { background: var(--mute-bg); }
.daycol-lbl { font-size: 12px; font-weight: 700; color: var(--text-2); margin-top: 8px; }
.daycol-date { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.daycol.today .daycol-lbl { color: var(--yellow-deep); }
.daycol.today .daycol-date { color: var(--yellow-deep); font-weight: 700; }
.daycol.today .daycol-stack { outline: 2px solid var(--yellow); outline-offset: 2px; }

.fc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* The week in four sentences. Set as prose, wider leading than the figures
   around it: it is the one part of this card meant to be read rather than
   scanned, and it earns that by being short. */
.fc-brief {
  margin: 14px 0 4px; padding: 14px 16px;
  background: var(--yellow-soft); border: 1px solid var(--note-line);
  border-radius: var(--radius-sm);
}
.fc-brief p { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0; }
.fc-brief p + p { margin-top: 8px; }

/* Where the week is going, by brand. Three columns on one baseline: the name,
   what it is asking for, and what its record says usually happens. */
.fc-brands { display: flex; flex-direction: column; }
.fc-brand {
  display: grid; gap: 12px; align-items: baseline;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.fc-brand:last-child { border-bottom: 0; }
.fc-brand-name { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.fc-brand-figs { font-size: 13px; font-variant-numeric: tabular-nums; }
.fc-brand-record { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 700px) {
  .fc-brand { grid-template-columns: 1fr; gap: 2px; }
}
.fc-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.fc-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.fc-figs { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; }
.fc-fig b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.fc-fig span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
               color: var(--text-3); font-weight: 700; }

/* --- Week-ahead forecast --------------------------------------------------- */
.fc-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-stale {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--yellow-soft); color: var(--warn-text); font-size: 13px;
}
/* One grid per person: name, bar, figures - and the notes underneath sitting
   in the bar's own column. It was three flex rows and a note with a 224px left
   margin hand-matched to the name column, which stopped lining up the moment
   either changed, and put the row divider between somebody and their own
   notes. The columns are declared once now, so everything down the list lands
   on the same two edges. */
.who-block {
  display: grid; gap: 4px 14px; align-items: center; padding: 8px 0;
  grid-template-columns: 210px minmax(60px, 1fr) 190px;
  border-bottom: 1px solid var(--border);
}
.who-block:last-of-type { border-bottom: none; }
.who-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-name { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.who-track { height: 16px; background: var(--mute-bg); border-radius: 5px;
             overflow: hidden; min-width: 0; }
.who-fill { display: block; height: 100%; border-radius: 6px; min-width: 4px; }
.who-figs { text-align: right; font-size: 13.5px; }
.who-figs b { font-size: 16px; }
.who-figs .tiny { display: block; }
/* Column two, under the bar they belong to. */
.who-notes { grid-column: 2; }
.who-note { font-size: 12.5px; color: var(--amber); font-weight: 600; }
.who-note + .who-note { margin-top: 2px; }

@media (max-width: 860px) {
  .who-block { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .who-track { grid-column: 1 / -1; }
  .who-notes { grid-column: 1 / -1; }
  .who-figs { text-align: right; }
}
.fc-free { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
           font-size: 13.5px; color: var(--text-2); }

/* --- Pager ---------------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
         border-top: 1px solid var(--border); flex-wrap: wrap; }
.pager .spacer { flex: 1; }
.pager-count, .pager-pos { font-size: 12.5px; color: var(--text-2); }
.pager-pos { font-family: var(--mono); }

/* --- Access tab ------------------------------------------------------------ */
.access-warn {
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px;
  background: var(--warn-bg); color: var(--warn-text); line-height: 1.55;
}
.access-matrix th.num, .access-matrix td.num { text-align: center; }
.acc-yes { font-size: 15px; }
.acc-no { color: #d4d4d4; font-size: 15px; }

/* --- Tabs ----------------------------------------------------------------- */
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.tab {
  padding: 9px 16px; font-size: 14.5px; font-weight: 700; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  letter-spacing: .01em; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--yellow); }

/* ===========================================================================
   Layout: content column beside the left navigation rail
   =========================================================================== */

/* --- Left column ----------------------------------------------------------- */
.side {
  width: 214px; flex: 0 0 214px; background: var(--bg);
  border-right: 1px solid var(--border); padding: 16px 14px 18px;
  display: flex; flex-direction: column;
}
.side-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.side-logo-mark {
  width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--yellow);
  color: #111; display: grid; place-items: center; font-weight: 800; font-size: 11px;
}
.side-logo-text { font-size: 13.5px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.side-photo { display: flex; justify-content: center; margin-bottom: 14px; }
.side-photo .avatar-lg { width: 96px; height: 96px; font-size: 34px; }

.side-card {
  background: var(--rail); color: #fff; border-radius: var(--radius);
  padding: 16px 14px; flex: 1; display: flex; flex-direction: column;
}
.side-card-top { text-align: center; }
.side-name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.side-position {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; color: #b9b9b9;
  margin-top: 3px;
}
.side-dept {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 12px; color: #cfcfcf;
}
.side-change { display: block; margin-top: 12px; font-size: 12.5px; color: var(--yellow); }
.side-change:hover { text-decoration: underline; }
.side-card-foot { margin-top: auto; padding-top: 18px; }
.side-foot-link {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 14.5px; color: #e8e8e8;
}
.side-foot-link:hover { background: var(--rail-2); }
.side-foot-link.on { background: var(--yellow); color: var(--yellow-on); font-weight: 700; }

/* --- Masthead -------------------------------------------------------------- */
.main { flex: 1; min-width: 0; background: var(--bg-tint); display: flex; flex-direction: column; }

.wrap { padding: 20px 26px 40px; max-width: 1500px; }

@media (max-width: 980px) {
  .side { display: none; }
  .wrap { padding: 16px 14px 40px; }
}

/* --- Avatars (restored: these were removed with the old rail block) -------- */
.avatar {
  border-radius: 50%; display: inline-grid; place-items: center; color: #fff;
  font-weight: 700; overflow: hidden; flex: none; line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 78px; height: 78px; font-size: 30px; }

/* --- Squaring a profile photo ---------------------------------------------
   A square window onto the picture, with a circle drawn over it so the shape
   on screen is the shape everywhere else. The image is moved with a transform
   rather than by scrolling, so there is nothing to overshoot. */
.cropper {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 12px; background: #111; cursor: grab; touch-action: none;
  user-select: none;
}
.cropper:active { cursor: grabbing; }
.cropper img {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  max-width: none; pointer-events: none; -webkit-user-drag: none;
}
/* The circle is drawn, not clipped: everything outside it still shows, dimmed,
   so you can see what you are cutting off rather than guessing. */
.cropper-ring {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45) inset;
  border-radius: 50%;
}
.cropper-zoom { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cropper-zoom input[type=range] { flex: 1; width: auto; padding: 0; }
.tiny-link {
  background: none; border: none; padding: 2px 0; margin-top: 4px;
  font-size: 12px; color: var(--text-2); text-decoration: underline;
  cursor: pointer;
}
.tiny-link:hover { color: var(--text); }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-xs { width: 20px; height: 20px; font-size: 9px; }

@media (max-width: 1180px) {
}

/* ===========================================================================
   Shell: content column beside the left navigation rail
   =========================================================================== */
/* The tint is a gradient, so it paints no colour of its own where the
   gradient box does not reach - a short page would show the browser's
   default white through it, which on a dark page is a white band. The
   solid colour sits underneath it for that case. */
body { background: var(--bg-tint); background-color: var(--bg); }

/* --- Who you are, top right ------------------------------------------------ */
.usermenu { position: relative; flex: none; }
.usermenu-btn {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text); cursor: pointer;
}
.usermenu-btn:hover { background: var(--surface-2); }
.usermenu-name { white-space: nowrap; }
.caret { font-size: 10px; color: var(--text-3); }
.usermenu-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 230px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,.16);
  padding: 8px; z-index: 60;
}
.usermenu.open .usermenu-panel,
/* The workspace picker reuses this panel but hangs off .ws, not
   .usermenu - without this it opened as far as the class and no
   further, which reads as the control being dead. */
.ws.open .usermenu-panel { display: block; }
.usermenu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.usermenu-fullname { font-weight: 700; font-size: 14.5px; }
.usermenu-role { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.usermenu-link {
  display: block; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.usermenu-link:hover { background: var(--surface-2); text-decoration: none; }

.wrap { padding: 20px 26px 44px; max-width: 1500px; }

/* --- Greeting -------------------------------------------------------------- */
.greet { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.greet .avatar { width: 62px; height: 62px; font-size: 24px; }
.greet h1 { font-size: 27px; letter-spacing: -.035em; }
.greet-meta { font-family: var(--mono); font-size: 13px; color: var(--text-2); margin-top: 4px; }
.greet-chip {
  display: inline-block; margin-top: 8px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--info-bg); color: #1a56c4; font-size: 12.5px; font-weight: 700;
}
.sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
/* Narrow enough to sit beside the section's own buttons, wide enough that a
   full name is still readable once typed.

   Written as input.filter-box, not .filter-box: the shared rule for text
   fields is input[type=search], which is the more specific selector and was
   quietly winning. The box was rendering a thousand pixels wide on every
   screen that has one - Teams and Brands included - and pushing the buttons
   beside it off to the far edge. */
input.filter-box { width: 210px; }
@media (max-width: 640px) { input.filter-box { width: 100%; } }
.sec-head .spacer { flex: 1; }
.gotolink { font-size: 14px; font-weight: 700; color: var(--yellow-deep); white-space: nowrap; }
.gotolink:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .wrap { padding: 16px 14px 40px; }
}

/* --- My profile ------------------------------------------------------------ */
.profile-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.profile-photo { display: flex; flex-direction: column; align-items: center;
                 width: 150px; flex: none; text-align: center; }
.profile-photo .tiny { margin-top: 6px; line-height: 1.4; }
.locked-fields {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.locked-title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.locked-grid { display: grid; gap: 10px 22px;
               grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.locked-grid > div { display: flex; flex-direction: column; }
.locked-grid span { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.locked-grid b { font-size: 13.5px; font-weight: 600; color: var(--text-2); }

/* --- ManCom table ---------------------------------------------------------- */
.mc-scroll { overflow-x: auto; }
.mc-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px; }
.mc-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2); padding: 10px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mc-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mc-table tbody tr:last-child td { border-bottom: none; }
.mc-table th:first-child, .mc-table td:first-child { padding-left: 18px; }
.mc-table th:last-child, .mc-table td:last-child { padding-right: 14px; }

.mc-subject { width: 230px; }
.mc-kill { width: 40px; text-align: right; vertical-align: middle !important; }

.mc-table textarea, .mc-table select {
  width: 100%; font-size: 13.5px; padding: 7px 9px; border-radius: 7px;
  border: 1px solid transparent; background: var(--surface-2);
  resize: none; overflow: hidden; min-height: 34px; line-height: 1.45;
}
.mc-table textarea:hover, .mc-table select:hover { border-color: var(--border-strong); }
.mc-table textarea:focus, .mc-table select:focus {
  background: var(--surface); border-color: var(--yellow-deep);
  outline: 2px solid var(--yellow-soft); outline-offset: -1px;
}
.mc-row.is-done { background: var(--good-wash); }
.mc-row.is-done textarea, .mc-row.is-done select { color: var(--text-3); }
.mc-row.is-done .mc-subject select { text-decoration: line-through; }

.mc-x {
  border: none; background: none; color: var(--text-3); font-size: 19px;
  line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.mc-x:hover { background: var(--bad-bg); color: var(--red); }
.mc-foot { padding: 12px 18px; border-top: 1px solid var(--border); }

.mc-savebar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  justify-content: flex-end; padding: 12px 18px; margin-top: 4px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius);
}

/* --- ManCom: hint row and numbered items ----------------------------------- */
.mc-hint td {
  padding: 0 8px 10px; font-size: 11.5px; font-style: italic; color: var(--text-3);
  border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.4;
}
.mc-hint td:first-child { padding-left: 18px; }
.mc-table thead tr:first-child th { border-bottom: none; padding-bottom: 6px; }

.cl-num { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.cl-n {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-3);
  flex: none; padding-top: 1px; letter-spacing: -.02em;
}
.cl-num > span:last-child { flex: 1; min-width: 0; word-break: break-word; }
.cl-gap { height: 7px; }
.mc-table .mc-subject textarea { font-weight: 700; }


/* --- Rich text cells ------------------------------------------------------- */
.rt-cell { position: relative; }
.rt {
  min-height: 36px; padding: 7px 9px; border-radius: 7px;
  border: 1px solid transparent; background: var(--surface-2);
  font-size: 13.5px; line-height: 1.5; outline: none;
  word-break: break-word;
}
.rt:hover { border-color: var(--border-strong); }
.rt:focus { background: var(--surface); border-color: var(--yellow-deep);
            box-shadow: 0 0 0 2px var(--yellow-soft); }
.rt:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.rt > div, .rt > p { margin: 0; }
.rt ul { margin: 2px 0; padding-left: 20px; }
.rt ol {
  margin: 2px 0; padding-left: 34px; list-style: none; counter-reset: rtnum;
}
.rt ol > li { counter-increment: rtnum; position: relative; }
.rt ol > li::before {
  content: "[" counter(rtnum, decimal-leading-zero) "]";
  position: absolute; left: -34px; font-family: var(--mono);
  font-size: 12px; font-weight: 700; color: var(--text-3); top: 1px;
}
.rt li { padding: 1px 0; }
.rt ul.rt-checks { list-style: none; padding-left: 2px; }
.rt ul.rt-checks li { display: flex; align-items: flex-start; gap: 8px; }
.rt ul.rt-checks input[type=checkbox] {
  width: 15px; height: 15px; margin-top: 3px; flex: none;
  accent-color: var(--green); cursor: pointer;
}
.rt ul.rt-checks li.rt-done { color: var(--text-3); text-decoration: line-through; }

.rt-bar {
  display: flex; align-items: center; gap: 2px; margin-bottom: 5px;
  width: fit-content;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.13);
}
.rt-bar[hidden] { display: none; }
.rt-b {
  min-width: 28px; height: 26px; border: none; background: none; cursor: pointer;
  border-radius: 5px; font-size: 13.5px; color: var(--text-2);
  font-family: var(--sans); line-height: 1; padding: 0 7px;
}
.rt-b:hover { background: var(--yellow-soft); color: var(--warn-text); }
.rt-sep { width: 1px; height: 17px; background: var(--border); margin: 0 3px; }

/* --- Access toggles -------------------------------------------------------- */
/* --- The access filter bar --------------------------------------------------
   Three long matrices share one control strip. It stays with you down the page
   because the person you are looking for is usually below the fold, and
   scrolling back up to change department defeats the point of having it. */
.acc-filter {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 16px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
}
.acc-filter .filter-box { margin-left: auto; }
.pillbar { display: flex; flex-wrap: wrap; gap: 7px; }
.pillbtn {
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.pillbtn:hover { border-color: var(--yellow-deep); }
.pillbtn.on {
  background: var(--yellow-soft); border-color: var(--yellow-deep);
  color: var(--yellow-on);
}
/* A hidden row has to lose its table display, which some UA stylesheets set
   back on tr regardless of the hidden attribute. */
tr[hidden] { display: none !important; }

/* A second block inside a modal, below the form it belongs to. The rule is
   the seam: what is above waits for Save, what is below has already saved. */
.modal-section { border-top: 1px solid var(--border); padding-top: 16px; }

/* --- The Cost Estimate Library table ----------------------------------------
   Sized to its contents, not to guessed widths. Fixed columns gave every
   column the same slack whatever was in it, and the leftovers pooled in one
   place - a short status left a chasm before the Send button while the
   proposal title had room it never used. Automatic layout gives each column
   what it needs and shares the rest, which is what "aligned" looks like.
   The minimums only stop a column collapsing on a narrow window. */
/* width:auto, not 100%. Stretching the table to fill the card is what
   created the gaps: the content needs about seven hundred pixels and the card
   is twelve hundred, so five hundred pixels of nothing got shared out between
   the columns however they were sized. Letting the table be its own width
   removes the space rather than redistributing it. */
/* The table spans the card and the spare width is shared out in proportion
   to what each column holds, which is what automatic layout does on its own -
   so the rule here is mostly the absence of rules. Everything I added before
   (fixed pixel widths, width:1%, a single column soaking the slack, shrinking
   the card to the table) forced the extra space into one place and made a
   gap. Only nowrap survives, and only where a value must not break. */
.tbl-celib { table-layout: auto; width: 100%; }
.celib-no    { white-space: nowrap; }
.ce-save { display: block; margin-top: 3px; }
.celib-date  { white-space: nowrap; }
.celib-total { white-space: nowrap; }
.celib-send  { white-space: nowrap; }

/* Rows were touching. A table somebody reads across needs the horizontal
   rhythm to be looser than a table somebody scans down. */
.tbl-celib td, .tbl-celib th {
  padding-top: 16px; padding-bottom: 16px;
  padding-left: 16px; padding-right: 16px;
}
/* Figures and controls end on a shared right edge, so the eye has a line to
   run down instead of ragged starts. */
.tbl-celib th.celib-date, .tbl-celib td.celib-date,
.tbl-celib th.celib-total, .tbl-celib td.celib-total,
.tbl-celib th.celib-send, .tbl-celib td.celib-send,
.tbl-celib th.celib-kill, .tbl-celib td.celib-kill { text-align: right; }
.tbl-celib td:first-child, .tbl-celib th:first-child { padding-left: 18px; }
.tbl-celib td:last-child, .tbl-celib th:last-child { padding-right: 18px; }
.tbl-celib td { vertical-align: middle; }

/* Where the document has got to, read top to bottom: what happened, when,
   and what can be done about it next. */
.ce-state { line-height: 1.45; }
.ce-state b { display: block; font-size: 13px; }
.ce-state span {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--text-3); margin-top: 2px;
}
.ce-state .linkish, .ce-state .task-link {
  display: inline-block; margin-top: 4px; font-size: 11.5px;
}

/* The proposal name is the way into the estimate, now that Edit has gone. */
.ce-proposal {
  font-size: 13.5px; font-weight: 650; color: var(--text);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
}
.ce-proposal:hover { text-decoration-color: var(--yellow-deep); }

/* The number is the way into the document, so it reads as a link rather than
   as a serial number sitting in a cell. */
.ce-no {
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  color: var(--text); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--yellow-deep);
}
.ce-no:hover { color: var(--yellow-on); background: var(--yellow-soft); }

/* Plain text, not a pill. A rounded border round every brand made the table
   read as a page of badges. */
.ce-client {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text);
}
.ce-client:hover { text-decoration: underline; text-underline-offset: 2px; }
.ce-client:disabled { cursor: default; }
.ce-client:disabled:hover { text-decoration: none; }
/* Measured, not guessed: Edit 51 + PDF 52 + Send 59 + the delete button 30,
   three 4px gaps and the cell's own padding. */


/* A button that reads as a link: for a small action sitting inside a cell
   that already has a label, where a bordered button would shout. */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; color: var(--text-3); text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { color: var(--text); }

.tbl-ce { table-layout: fixed; width: 100%; }
/* Percentages, not one auto column among fixed pixels. In a fixed layout an
   auto column resolves late, and the script that sizes the scope box to its
   contents measured it at 26px wide - three lines of text wrapped to two
   hundred and the box came out four thousand pixels tall. Percentages are
   known as soon as the table has a width. */
.col-ce-desc { width: 52%; }
.col-ce-qty  { width: 7%; }
.col-ce-rate { width: 13%; }
.col-ce-tax  { width: 8%; }
.col-ce-amt  { width: 14%; }
.col-ce-kill { width: 6%; }
.tbl-ce td, .tbl-ce th { vertical-align: top; }
.ce-head { font-weight: 700; margin-bottom: 5px; }
.ce-detail { min-height: 34px; overflow-y: auto; }
.ce-amount { padding-top: 13px; font-weight: 700; white-space: nowrap; }
.tbl-ce .cell.num { text-align: right; }

/* Terms on the left, the money on the right, the way the estimate itself
   reads. */
.ce-foot {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.ce-totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 6px 0; font-size: 13.5px;
}
.ce-totals > div > b { font-family: var(--mono); }
.ce-totals .ce-grand {
  border-top: 1px solid var(--border-strong); margin-top: 6px; padding-top: 12px;
  font-size: 16px;
}
.ce-totals .ce-grand > b { font-size: 19px; }
@media (max-width: 860px) {
  .ce-foot { grid-template-columns: minmax(0, 1fr); }
}

/* The signature on a profile: shown against a plain ground, because a PNG
   with a clear background is invisible on anything but white. */
.sig-box { margin-top: 20px; text-align: center; }
/* The preview keeps a white ground in dark mode on purpose: a signature is
   dark ink on a transparent PNG and would vanish on a dark one - and white is
   what it sits on when the estimate is printed. */
.sig-preview {
  display: block; margin: 8px auto 0; max-width: 190px; max-height: 74px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px;   /* white in both themes - see the note above .sig-preview */
}
.sig-empty {
  margin-top: 8px; padding: 18px 10px; border: 1px dashed var(--border-strong);
  border-radius: 8px; font-family: var(--mono); font-size: 11.5px;
  color: var(--text-3);
}

/* A client's paperwork, one click behind their name. Read-only: the roster
   answers "who are our clients", this answers "what is their registered name
   and TIN", and putting the second in the table would widen it for something
   nobody scans a list for. */
.detail-list { margin: 0; display: grid; gap: 14px; }
.detail-list > div {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px;
  align-items: start;
}
.detail-list dt {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); padding-top: 2px;
}
.detail-list dd { margin: 0; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 640px) {
  .detail-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* The name in the roster is a button now, and has to keep looking like the
   pill it replaced. */
.brand-pill.linky {
  font-family: inherit; cursor: pointer; text-align: left;
}
.brand-pill.linky:hover { border-color: var(--yellow-deep); }

.acc-fixed { color: var(--green); font-size: 15px; }
.acc-toggle {
  border: 1px solid var(--border-strong); background: var(--surface);
  width: 30px; height: 26px; border-radius: 6px; cursor: pointer;
  font-size: 14px; color: var(--text-3); line-height: 1; padding: 0;
}
.acc-toggle:hover { border-color: var(--yellow-deep); background: var(--yellow-soft); }
.acc-toggle.on { background: var(--good-bg); border-color: var(--good-line); color: var(--good-text); font-weight: 800; }

/* --- Home: greeting and time clock ----------------------------------------- */
.home-top {
  display: grid; gap: 14px; align-items: stretch; margin-bottom: 20px;
  /* The clock card has four things on its action row - the button, the
     running state, and the way into the full timesheet - and at 380px they
     wrapped onto three lines. */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 470px);
}
@media (max-width: 900px) { .home-top { grid-template-columns: 1fr; } }
.home-top .greet {
  margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}

.clockcard {
  background: var(--rail); color: #fff; border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column;
}
.clockcard-label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #9a9a9a; margin-bottom: 12px;
}
.clockcard-times { display: flex; gap: 10px; }
.clockslot {
  flex: 1; background: #1c1c1c; border-radius: 9px; padding: 9px 11px;
  border: 1px solid #262626;
}
.clockslot span {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8a8a8a;
}
.clockslot b { display: block; font-size: 16px; font-weight: 700; margin-top: 3px;
               letter-spacing: -.02em; color: #6e6e6e; }
.clockslot.set b { color: var(--yellow); }
.clockcard-actions {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding-top: 14px; flex-wrap: wrap;
}
.clock-live, .clock-done { font-size: 12.5px; color: #9a9a9a;
                           white-space: nowrap; }
.clock-live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-right: 6px; vertical-align: 1px;
}

/* --- Home: team tiles ------------------------------------------------------ */
.team-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tile-card { margin-bottom: 0; display: flex; flex-direction: column; }
.tile-head {
  display: flex; align-items: center; gap: 11px; padding: 15px 17px 12px;
  border-bottom: 1px solid var(--border);
}
.tile-head .spacer { flex: 1; }
.tile-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 16px;
}
.tile-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.tile-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.tile-body { padding: 6px 17px 14px; flex: 1; }
.tile-empty { padding: 18px 0; color: var(--text-3); font-size: 13.5px; text-align: center; }

.person-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.person-row:last-child { border-bottom: none; }
.person-name { font-size: 14px; font-weight: 650; flex: 1; min-width: 0; }
.person-meta { font-size: 12.5px; color: var(--text-2); font-family: var(--mono);
               white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.person-row.is-today .person-name { font-weight: 800; }
.person-row.is-past { opacity: .5; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  display: inline-block;
}

/* --- Department attendance ------------------------------------------------- */
.attend-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.attend {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.attend.in { background: var(--good-wash); border-color: var(--good-line); }
.attend-body { flex: 1; min-width: 0; }
.attend-name { display: block; font-size: 14px; font-weight: 650; }
.attend-time { display: block; font-size: 11.5px; color: var(--text-2); font-family: var(--mono); margin-top: 1px; }
.attend.out .attend-name, .attend.out .attend-time { color: var(--text-3); }

/* --- Department library ---------------------------------------------------- */
.tab-soon {
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border-strong);
  border-radius: 20px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}
.lib-layout { display: grid; gap: 16px; grid-template-columns: 232px minmax(0, 1fr); }
@media (max-width: 860px) { .lib-layout { grid-template-columns: 1fr; } }
.lib-nav { display: flex; flex-direction: column; gap: 3px; }
.lib-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  color: var(--text-2); border: 1px solid transparent;
}
.lib-nav-item:hover { background: var(--surface-2); color: var(--text); }
.lib-nav-item.active {
  background: var(--surface); border-color: var(--border);
  color: var(--text); font-weight: 700; box-shadow: var(--shadow);
}
.lib-nav-label { flex: 1; min-width: 0; }
.lib-nav-count { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }

.lib-empty { text-align: center; padding: 26px 20px 22px; }
.lib-empty-icon { font-size: 30px; opacity: .55; }
.lib-empty-title { font-size: 15px; font-weight: 700; margin-top: 10px; }
.lib-empty-text {
  font-size: 13.5px; color: var(--text-2); max-width: 460px; margin: 8px auto 0;
  line-height: 1.55;
}
.lib-examples { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; }
.lib-examples-title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 9px;
}
.lib-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lib-chip {
  font-size: 13px; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}

/* --- Task title as the way into the editor --------------------------------- */
.task-open {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
  color: var(--text); border-bottom: 1px solid transparent;
}
.task-open:hover { border-bottom-color: var(--yellow-deep); color: var(--yellow-deep); }
.modal-foot {
  display: flex; justify-content: flex-end; padding: 12px 22px 18px;
  border-top: 1px solid var(--border);
}

.status-static {
  display: inline-block; padding: 7px 11px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}

/* --- Life at Streamlined Campaigns ----------------------------------------- */
.life-grid {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.life-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  border-top: 3px solid var(--border-strong);
}
.life-block.accent { border-top-color: var(--yellow); }
.life-block.good { border-top-color: var(--green); }
.life-label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
}
.life-figure {
  font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1;
  margin-top: 8px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.life-figure.small { font-size: 17px; font-weight: 700; align-items: center; gap: 8px; }
.life-unit { font-size: 15px; font-weight: 700; color: var(--text-3); margin-right: 6px; }
.life-note { font-size: 12.5px; color: var(--text-2); margin-top: 7px; line-height: 1.45; }

/* --- Clickable life block and the training list ---------------------------- */
.life-clickable {
  cursor: pointer; text-align: left; font: inherit; width: 100%;
  border-top-color: var(--blue);
}
.life-clickable:hover { background: var(--surface-2); border-color: var(--border-strong);
                        border-top-color: var(--blue); }
.life-clickable:hover .life-more { opacity: 1; }
.life-label { display: flex; align-items: center; gap: 8px; }
.life-more {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--yellow-deep);
  letter-spacing: 0; text-transform: none; opacity: 0; transition: opacity .12s;
}

.train-list { display: flex; flex-direction: column; }
.train-row {
  display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border);
}
.train-row:last-child { border-bottom: none; }
.train-date {
  width: 52px; flex: none; text-align: center; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 4px;
  display: flex; flex-direction: column; line-height: 1.15;
}
.train-day { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.train-mon { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
             letter-spacing: .06em; color: var(--text-2); }
.train-yr { font-size: 10px; color: var(--text-3); font-family: var(--mono); }
.train-body { flex: 1; min-width: 0; }
.train-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.train-meta { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.train-foot {
  margin-top: 16px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--yellow-soft); color: var(--warn-text); font-size: 12.5px; line-height: 1.5;
}


/* --- Sign in --------------------------------------------------------------- */
.login-body { background: var(--mute-bg); display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login {
  display: grid; grid-template-columns: 1fr 1.25fr; width: 100%; max-width: 1000px;
  min-height: 480px; border-radius: 4px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
}
.login-art {
  background: linear-gradient(160deg, #ffe9a8 0%, #ffc629 45%, #e0a800 100%);
  background-size: cover;
  /* Left of centre and above the middle: where the head and glasses sit. */
  background-position: 30% 34%;
  position: relative;
}
/* If a login image is present it takes over the panel entirely. */
.login-art { background-size: cover; background-position: center; }
.login-panel {
  background: #0b0b0b; color: #fff; padding: 96px 56px 48px;
  display: flex; flex-direction: column; justify-content: center; position: relative;
}
.login-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.login-title {
  font-size: 34px; font-weight: 800; color: var(--yellow); letter-spacing: -.03em;
  margin-bottom: 8px;
}
.login-form input.login-input {
  width: 100%; height: 54px; box-sizing: border-box;
  border: none; border-radius: 999px; padding: 0 26px;
  font-size: 16px; font-style: italic; color: #222; background: #fff;
}
.login-form input.login-input::placeholder { color: #9a9a9a; font-style: italic; }
.login-form input.login-input:focus {
  outline: 3px solid rgba(255,198,41,.55); outline-offset: 2px;
}
.login-btn {
  width: 100%; height: 54px; box-sizing: border-box;
  border: none; border-radius: 999px; margin-top: 4px; cursor: pointer;
  background: #f3ca64; color: #111; font-size: 16px; font-weight: 700; font-style: italic;
}
.login-btn:hover { background: var(--yellow); }
.login-error {
  background: #3a1512; color: #ffb4a8; border-radius: 999px; padding: 13px 24px;
  font-size: 13.5px; line-height: 1.4; text-align: center;
}
.login-note {
  background: #12261c; color: #8fe0b4; border-radius: 999px; padding: 13px 24px;
  font-size: 13.5px; text-align: center;
}
.login-help { font-size: 12.5px; color: #8a8a8a; margin-top: 2px; text-align: center; }
.login-logo {
  position: absolute; right: 40px; top: 32px; display: flex; align-items: center;
  gap: 10px; font-size: 14px; line-height: 1.15; letter-spacing: -.02em; color: #fff;
}
.login-logo-mark {
  width: 30px; height: 30px; border-radius: 7px; background: var(--yellow); color: #111;
  display: grid; place-items: center; font-weight: 800; font-size: 11px; flex: none;
}
.login-logo-sub { color: #9a9a9a; font-size: 12px; letter-spacing: .16em; }

@media (max-width: 780px) {
  .login { grid-template-columns: 1fr; }
  .login-art { min-height: 170px; }
  .login-panel { padding: 84px 26px 40px; }
}


/* --- Brand assets, when supplied ------------------------------------------- */
.login-logo-img { height: 46px; width: auto; display: block; }

/* --- Cross-department sign-off --------------------------------------------- */
.signoff-card { border-color: var(--warn-line); background: var(--yellow-soft); }
.req-card { border-color: var(--info-line); background: var(--info-bg); }
.req-card.declined { border-color: var(--bad-line); background: var(--bad-bg); }
.signoff-badge, .req-badge {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--yellow); color: #111;
}
.req-badge { background: #3b82f6; color: #fff; }
.req-badge.declined { background: var(--red); }
.signoff {
  display: flex; align-items: flex-start; gap: 16px; padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.signoff:last-child { border-bottom: none; }
.signoff-main { flex: 1; min-width: 0; }
.signoff-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.signoff-meta { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.signoff-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.req-reason {
  margin-top: 6px; font-size: 13.5px; color: var(--text-2); font-style: italic;
  border-left: 3px solid var(--bad-line); padding-left: 10px;
}
.signoff-hint {
  background: var(--yellow-soft); color: var(--warn-text); border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 12.5px; line-height: 1.45;
}

.setup-lead { font-size: 13.5px; color: #9a9a9a; line-height: 1.5; margin: -4px 0 6px; }
.login-form select.login-input { appearance: none; cursor: pointer; }

/* --- Sign-off alert --------------------------------------------------------
   Carried on every page for the head of the receiving department. Yellow, not
   red: this is work arriving, not something broken. */
.signoff-alert {
  display: flex; align-items: center; gap: 13px; margin-bottom: 14px;
  padding: 12px 16px; border-radius: var(--radius-sm); text-decoration: none;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text);
  font-size: 13.5px; line-height: 1.5;
}
.signoff-alert:hover { background: var(--warn-line); }
.signoff-alert-count {
  flex: none; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--yellow); color: var(--yellow-on);
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.signoff-alert-go { margin-left: auto; flex: none; font-weight: 700; white-space: nowrap; }

/* The hour sits under the day rather than beside it: most tasks have no time,
   and a second line only appears on the ones that do. */
.due-time {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--text-3); letter-spacing: .01em;
}
.due.late .due-time { color: var(--red); }

/* --- Leave entitlement ------------------------------------------------------
   Its own colour so it does not read as a second Trainings card. */
.life-clickable.good,
.life-clickable.good:hover { border-top-color: var(--green); }
.leave-list { display: grid; gap: 2px; }
.leave-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.leave-row:last-child { border-bottom: 0; }
.leave-name { font-size: 14px; font-weight: 600; }
.leave-days { font-size: 14px; font-weight: 700; color: var(--text-2); }
.leave-total { border-top: 2px solid var(--border-strong); margin-top: 4px; }
.leave-total .leave-name, .leave-total .leave-days { font-weight: 800; color: var(--text); }

/* ===========================================================================
   Left navigation rail
   Replaces the top bar: six sections plus every department board never fitted
   across the top, so it wrapped and pushed the boards out of sight.
   =========================================================================== */
:root { --rail-w: 252px; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 70;
  background: var(--rail); color: var(--rail-text);
  display: flex; flex-direction: column; overflow: hidden;
}
.rail-nav { overflow-y: auto; overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: #333 transparent; }
.rail-nav::-webkit-scrollbar { width: 8px; }
.rail-nav::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

.shell { margin-left: var(--rail-w); min-height: 100vh; background: var(--bg-tint); }
/* No cap. There used to be one at 1360px - a reading width, on the reasoning
   that a line of prose running the span of a large monitor is harder to read,
   not easier. It was the wrong call for this app: almost every screen here is
   a table, a board or a grid of cards, and all three were stopping short and
   leaving a third of a wide monitor empty. The padding is what keeps the
   content off the edge now.

   max-width is written out rather than simply deleted. Three older .wrap rules
   further up still say 1500px, and this selector only outranks them on the
   properties it actually declares - drop the line and the cap comes back at
   1500 instead of 1360, which is the same bug moved sideways. */
.shell .wrap { padding: 22px 30px 48px; max-width: none; }

/* --- The mark, on its own ground ------------------------------------------- */
.rail-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 18px 12px;
  text-decoration: none; color: inherit; flex: none;
}
.rail-logo img { max-height: 58px; max-width: 100%; width: auto; height: auto; display: block; }
.rail-logo-mark {
  width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--yellow);
  color: var(--yellow-on); display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.rail-logo-text { font-size: 14px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.rail-logo-text span { font-weight: 600; color: var(--rail-dim); font-size: 12px; }

/* --- Rows ------------------------------------------------------------------ */
.rail-nav { padding: 4px 10px 10px; flex: 1; }

.rail-link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 11px; border-radius: 9px; border: 0; background: none;
  color: var(--rail-dim); font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left; text-decoration: none; cursor: pointer; margin-bottom: 2px;
}
.rail-link:hover { background: var(--rail-2); color: var(--rail-text); }
.rail-link.active { color: var(--yellow); }
.rail-icon { width: 19px; height: 19px; flex: none; }
.rail-text { flex: 1; min-width: 0; }

/* The parent of an open section is marked by its own row, not by the panel
   below it: the rows stay legible when several sections are open at once. */
.rail-group.open > .rail-parent { color: var(--rail-text); }
.rail-group.open > .rail-parent .rail-caret { transform: rotate(180deg); }
.rail-caret { width: 15px; height: 15px; flex: none; opacity: .65; transition: transform .15s; }

.rail-soon {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rail-dim);
  border: 1px solid #3a3a3a; border-radius: 999px; padding: 2px 6px;
}

/* --- What a section contains ----------------------------------------------- */
.rail-sub { display: none; padding: 2px 0 8px 30px; }
.rail-group.open .rail-sub { display: block; }

.rail-subitem {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 7px; color: var(--rail-dim); text-decoration: none;
  font-size: 13px; line-height: 1.3;
}
.rail-subitem:hover { background: var(--rail-2); color: var(--rail-text); }
.rail-subitem.active { background: var(--rail-2); color: var(--yellow); font-weight: 700; }
.rail-subitem-label { flex: 1; min-width: 0; }
.rail-subitem.unbuilt { opacity: .55; }
.rail-subitem.locked { opacity: .4; cursor: not-allowed; }
.rail-lock { font-size: 10px; }
.rail-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--rail-dim);
  background: #232323; border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.rail-subitem.active .rail-count { background: var(--yellow); color: var(--yellow-on); }
.rail-rule { height: 1px; background: #262626; margin: 7px 10px; }

/* --- Who you are, at the foot ---------------------------------------------- */
.rail-foot { flex: none; padding: 10px; border-top: 1px solid #1e1e1e; }
.rail-user { position: relative; }
.rail-user-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 8px 9px; border-radius: 9px;
  color: var(--rail-text); font: inherit; cursor: pointer; text-align: left;
}
.rail-user-btn:hover { background: var(--rail-2); }
.rail-user-who { flex: 1; min-width: 0; display: block; }
.rail-user-name {
  display: block; font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-user-role {
  display: block; font-size: 11.5px; color: var(--rail-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Opens upward - there is nothing below it. */
.rail-user-panel { right: 0; left: 0; top: auto; bottom: calc(100% + 8px); }

/* --- Narrow screens: the rail slides over -------------------------------- */
.rail-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 90;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  background: var(--rail); color: var(--rail-text); border: 0;
  align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.rail-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; }

@media (max-width: 1000px) {
  .rail { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.rail-open .rail { transform: none; }
  .shell { margin-left: 0; }
  .shell .wrap { padding: 64px 18px 44px; }
  .rail-toggle { display: flex; }
}

/* The department colour swatch. It had no rule at all until now: the markup
   set a background on an element with no size, so every dot was 0x0 and the
   colours the departments carry were never actually visible anywhere. */
.dept-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  display: inline-block; vertical-align: middle;
}

/* Section picker inside the sub-tab access card - smaller than the page tabs
   above it so the two rows of tabs are not mistaken for each other. */
.subtabs {
  margin-bottom: 14px;
  /* Three long section names do not fit on a narrow window. Scrolling this row
     keeps the whole page from scrolling sideways with it. */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs .tab { font-size: 13px; padding-bottom: 9px; white-space: nowrap; }

/* --- Track record ----------------------------------------------------------
   The measured half of the system. Deliberately plainer than the observation
   cards above it: these are counts, not opinions. */
.learn-empty {
  font-size: 13.5px; line-height: 1.6; color: var(--text-2);
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px 18px;
}
.learn-tiles {
  display: grid; gap: 12px; margin-bottom: 4px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.learn-tile {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
}
.learn-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
}
.learn-figure {
  font-size: 27px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15;
  margin-top: 6px; display: flex; align-items: baseline; gap: 3px;
}
.learn-unit { font-size: 14px; font-weight: 700; color: var(--text-3); }
.learn-note { font-size: 11.5px; color: var(--text-2); margin-top: 5px; line-height: 1.4; }
.learn-note-row {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn-text); font-size: 13px; line-height: 1.5;
}
.learn-sub {
  margin-top: 20px; margin-bottom: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}

/* --- Email notification switch ---------------------------------------------
   Sits with the fields a person controls, above the ones they cannot. */
.notify-box {
  margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.notify-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.notify-row input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.notify-row b { display: block; font-size: 14px; margin-bottom: 3px; }
.notify-row .tiny { display: block; line-height: 1.5; }
.notify-warn {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn-text); font-size: 12.5px; line-height: 1.5;
}

/* --- Email settings --------------------------------------------------------- */
.mail-state {
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 13.5px;
  line-height: 1.6; background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: 18px;
}
.mail-state.good { background: var(--good-bg); border-color: var(--good-line); color: var(--good-text); }
.mail-form .form-grid { margin-bottom: 6px; }
.mail-advanced { margin: 6px 0 4px; }
.mail-advanced summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 6px 0;
}
/* The sending log, folded. The whole card is the <details>, so the header is
   the thing you click - a separate toggle beside a heading that also looks
   clickable is two targets for one job. */
.log-card > summary {
  cursor: pointer; list-style: none; padding-bottom: 14px;
}
.log-card > summary::-webkit-details-marker { display: none; }
.log-card > summary::after {
  content: ""; flex: none;
  border: 5px solid transparent; border-top-color: var(--text-3);
  margin-top: 3px;
}
.log-card[open] > summary::after {
  border-top-color: transparent; border-bottom-color: var(--text-3);
  margin-top: -7px;
}
.log-card[open] > summary { padding-bottom: 0; }
.log-card > summary:hover .section-label { color: var(--text); }

.mail-log {
  font-family: var(--mono); font-size: 12px; line-height: 1.8;
  color: var(--text-2); max-height: 260px; overflow-y: auto;
}
.mail-log div { white-space: nowrap; overflow-x: auto; }
.mail-state.warn-note { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
/* Standalone: what a destructive confirmation says before you press the
   button, sized to be read rather than skimmed past. */
.warn-note {
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text);
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px; line-height: 1.55;
}
.clock-off { font-size: 12.5px; color: var(--rail-dim); align-self: center; }

/* --- Task history ----------------------------------------------------------
   Sits at the foot of the edit box: consulted when somebody asks who moved a
   deadline, not read on the way past. */
.task-history { padding: 14px 22px 4px; border-top: 1px solid var(--border); }
.task-history-title {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
}
.task-history-row {
  display: flex; gap: 10px; align-items: baseline; padding: 5px 0;
  font-size: 12.5px; line-height: 1.5; border-bottom: 1px solid var(--border);
}
.task-history-row:last-child { border-bottom: 0; }
.th-when { flex: none; width: 104px; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.th-what { flex: 1; color: var(--text-2); }
.th-who { flex: none; font-weight: 700; }

/* --- Choose your password ---------------------------------------------------
   Its own styles rather than the sign-in page's: those are built for a
   two-column split with the mark pinned in a corner, and reusing the container
   class on an image left the artwork at full size across the whole card. */
.firstpw {
  width: 100%; max-width: 440px; background: #0b0b0b; color: #fff;
  border-radius: 14px; padding: 38px 36px 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.firstpw-logo { height: 38px; width: auto; display: block; margin-bottom: 26px; }
.firstpw-mark {
  width: 38px; height: 38px; border-radius: 9px; background: var(--yellow);
  color: #111; display: grid; place-items: center; font-weight: 800;
  font-size: 13px; margin-bottom: 26px;
}
.firstpw-title {
  font-size: 26px; font-weight: 800; color: var(--yellow);
  letter-spacing: -.03em; margin-bottom: 10px;
}
.firstpw-sub { font-size: 14px; line-height: 1.6; color: #c9c9c9; margin-bottom: 22px; }
.firstpw-error {
  background: #3a1d1d; border: 1px solid #6b2d2d; color: #ffb4a8;
  padding: 11px 14px; border-radius: 9px; font-size: 13.5px; margin-bottom: 16px;
}
.firstpw-form { display: flex; flex-direction: column; gap: 12px; }
.firstpw-form input {
  height: 50px; padding: 0 16px; border-radius: 999px; border: 0;
  background: #fff; color: #111; font-size: 15px; width: 100%;
}
.firstpw-form input:focus { outline: 2px solid var(--yellow); outline-offset: 2px; }
.firstpw-form button {
  height: 50px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--yellow); color: var(--yellow-on);
  font-size: 15px; font-weight: 800; margin-top: 4px;
}
.firstpw-form button:hover { filter: brightness(1.05); }
.firstpw-hint { font-size: 12.5px; color: #8f8f8f; line-height: 1.6; margin-top: 16px; }
.firstpw-hint a { color: var(--yellow); }


/* --- Who is doing it: tags on a ManCom action step -------------------------
   Sits under the cell rather than in a column of its own. A column would cost
   the same width on every row whether or not anybody is tagged, and most rows
   never are. */
.mc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mc-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 3px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
/* Carried forward by a duplicate and not yet on anybody's board. */
.mc-tag-idle { border-style: dashed; color: var(--text-3); }
.mc-tag-state {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2); color: var(--text-2);
}
.mc-tag-state.in_progress { background: var(--yellow-soft); color: var(--warn-text); }
.mc-tag-state.done { background: var(--good-bg); color: var(--good-text); }
.mc-tag-go {
  border: 0; background: none; cursor: pointer; padding: 1px 4px;
  font: inherit; font-size: 10px; font-weight: 700; color: var(--yellow-deep);
}
.mc-tag-go:hover { text-decoration: underline; }
.mc-tag-x {
  border: 0; background: none; cursor: pointer; padding: 0 3px;
  font-size: 13px; line-height: 1; color: var(--text-3);
}
.mc-tag-x:hover { color: var(--red); }
.mc-tag-add {
  font-size: 11px; padding: 2px 6px; border-radius: var(--radius-pill);
  border: 1px dashed var(--border-strong); background: none;
  color: var(--text-3); cursor: pointer; max-width: 120px;
}
.mc-tag-add:hover { border-color: var(--yellow-deep); color: var(--text); }


/* --- Email templates ------------------------------------------------------- */
.tpl-fields { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tpl-field { font-size: 11.5px; color: var(--text-3); }
.tpl-field code {
  font-family: var(--mono); font-size: 11px; color: var(--yellow-deep);
  background: var(--yellow-soft); padding: 1px 5px; border-radius: 4px;
  margin-right: 3px;
}
.tpl-card { margin-bottom: 14px; }
.tpl-card textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.tpl-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
  background: var(--yellow-soft); color: var(--warn-text);
}


/* --- Projects ---------------------------------------------------------------
   Grouped by stage rather than drawn as columns. Same glance a Kanban board
   gives - the count is the heading - and the card keeps the width a column
   would have spent on its own chrome. */
.pj-stage { margin-bottom: 22px; }
.pj-stage-head {
  display: flex; align-items: baseline; gap: 9px;
  padding-bottom: 7px; margin-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.pj-stage-name {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.pj-stage.quiet .pj-stage-name { color: var(--text-3); }
.pj-stage-count {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* An empty lane is a finding, not a gap - no work in Lead Capture means
   nothing is entering the funnel. */
.pj-stage-note { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.pj-empty { font-family: var(--mono); font-size: 12px; color: var(--text-3); padding: 8px 2px; }

.pj-cards {
  display: grid; gap: 10px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}
.pj-card {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 13px; color: inherit;
}
.pj-card:hover { border-color: var(--yellow-deep); }
.pj-brand {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--text-3); text-transform: uppercase;
}
.pj-name {
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3;
  overflow-wrap: anywhere;
}
.pj-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 3px;
}
.pj-owner { font-size: 11.5px; color: var(--text-2); }
.pj-due {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.pj-due.late { color: var(--red); font-weight: 700; }
.pj-work { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* The roadmap. The rule runs behind the markers and stops at the ends, so the
   line reads as a track rather than a border. */
.pj-rm {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr);
  overflow-x: auto; padding: 2px;
}
.pj-step {
  position: relative; padding: 0 4px 6px;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.pj-step::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: var(--border-strong);
}
.pj-step:first-child::before { left: 50%; }
.pj-step:last-child::before { right: 50%; }
.pj-step.done::before, .pj-step.now::before { background: var(--yellow-deep); }
.pj-mark {
  position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--bg);
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  color: var(--text-3);
}
.pj-step.done .pj-mark {
  background: var(--yellow-deep); border-color: var(--yellow-deep); color: #fff;
}
.pj-step.now .pj-mark {
  background: var(--yellow); border-color: var(--yellow-deep);
  color: var(--yellow-on); box-shadow: 0 0 0 4px var(--yellow-soft);
}
/* Dashed, because nothing happened here - see projects.roadmap. */
.pj-step.skipped .pj-mark { border-style: dashed; background: var(--surface-2); }
.pj-step-name { font-size: 11px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.pj-step.todo .pj-step-name, .pj-step.skipped .pj-step-name {
  color: var(--text-3); font-weight: 600;
}
.pj-step-when {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pj-step-days {
  font-family: var(--mono); font-size: 10px; color: var(--amber); font-weight: 700;
}

.pj-detail {
  display: grid; gap: 14px; align-items: start; margin-top: 14px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.pj-side { display: grid; gap: 14px; align-content: start; }
@media (max-width: 860px) { .pj-detail { grid-template-columns: 1fr; } }

.pj-task {
  display: grid; gap: 10px; align-items: baseline;
  grid-template-columns: 92px minmax(0, 1fr) 74px minmax(0, 150px);
  padding: 9px 16px; border-bottom: 1px solid var(--border);
}
.pj-task:last-child { border-bottom: 0; }
.pj-task-name { font-size: 13px; overflow-wrap: anywhere; }
.pj-task-due {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pj-task-due.late { color: var(--red); font-weight: 700; }
.pj-task-who { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .pj-task { grid-template-columns: 92px minmax(0, 1fr); }
  .pj-task-due, .pj-task-who { grid-column: 2; }
}

.pj-bar {
  height: 7px; border-radius: 5px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.pj-bar > i { display: block; height: 100%; background: var(--green); }
.pj-bar-note {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  margin-top: 7px; font-variant-numeric: tabular-nums;
}
.pj-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.pj-kv dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); padding-top: 2px;
}
.pj-kv dd { margin: 0; font-size: 12.5px; }
.pj-objective {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  white-space: pre-wrap;
}

/* Named, but not a client. Says so quietly rather than looking like a brand
   somebody forgot to add to the roster. */
.pj-prospect {
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; margin-left: 4px;
  background: var(--surface-2); color: var(--text-3);
  border: 1px dashed var(--border-strong);
}

/* Why a stage moved on, where the system can point at something rather than
   asking anyone to remember. */
.pj-step-why {
  font-size: 10px; color: var(--green); font-weight: 700; line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Cost estimates raised for a project. */
.pj-ce {
  display: grid; gap: 3px 10px; align-items: baseline; text-decoration: none;
  grid-template-columns: auto minmax(0, 1fr); color: inherit;
  padding: 9px 16px; border-bottom: 1px solid var(--border);
}
.pj-ce:last-child { border-bottom: 0; }
.pj-ce:hover { background: var(--yellow-soft); }
.pj-ce-no {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.pj-ce-title { font-size: 12.5px; overflow-wrap: anywhere; }
.pj-ce-state {
  grid-column: 2; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
}
.pj-ce-state.accepted, .pj-ce-state.signed { color: var(--green); }
.pj-ce-state.sent { color: var(--yellow-deep); }

/* Which project an estimate belongs to, said once at the top of the form. */
.ce-project {
  margin: 0 0 14px; padding: 9px 13px; border-radius: var(--radius-sm);
  background: var(--yellow-soft); border: 1px solid var(--note-line);
  font-size: 12.5px;
}
.ce-project a { margin-left: 8px; font-weight: 650; }


/* --- Access: two views of the same rows -------------------------------------
   The screen this replaces was three stacked matrices of ticks, where a tick
   from somebody's department looked almost exactly like one an administrator
   had granted. Those are different facts and no longer share a shape. */
.seg { display: inline-flex; border: 1px solid var(--border-strong);
       border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.segbtn {
  font: inherit; font-size: 12px; font-weight: 650; padding: 6px 13px;
  border: 0; background: var(--surface); color: var(--text-2); cursor: pointer;
}
.segbtn + .segbtn { border-left: 1px solid var(--border-strong); }
.segbtn.on { background: var(--yellow); color: var(--yellow-on); }

/* One person, as a row you can open. */
.acc-person {
  display: grid; gap: 4px 12px; align-items: center; width: 100%;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto;
  padding: 10px 16px; border: 0; border-bottom: 1px solid var(--border);
  background: none; font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.acc-person:hover { background: var(--surface-2); }
.acc-person[aria-expanded="true"] { background: var(--yellow-soft); }
.acc-name { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.acc-chip {
  font-size: 10.5px; font-weight: 650; padding: 2px 8px; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
}
/* A grant is a decision somebody made, and does not look like a fact about
   the job. That collision is most of what made the old grid unreadable. */
.acc-chip.given { background: var(--yellow-soft); border-color: var(--note-line); color: var(--warn-text); }
.acc-chip.open { background: none; border-style: dashed; color: var(--text-3); }
.acc-chip.none { background: none; border-style: dashed; color: var(--text-3); }
.acc-go { font-family: var(--mono); font-size: 13px; color: var(--text-3); }

.acc-panel { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.acc-grp { padding: 4px 0 8px; }
.acc-grp-head {
  padding: 10px 16px 4px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.acc-line {
  display: grid; gap: 2px 12px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto; padding: 6px 16px;
}
.acc-line.sub { padding-left: 30px; }
.acc-line-name { grid-column: 1; font-size: 12.5px; font-weight: 650; }
/* The sentence is the point. These already existed in access.py and had never
   been anywhere but a title attribute. */
.acc-why { grid-column: 1; font-size: 11.5px; color: var(--text-3); }
.acc-why.given { color: var(--amber); font-weight: 650; }
/* Column two, both rows. Without the column it auto-places into column one
   and pushes the name across - the name ends up on the right and the button
   on the left. */
.acc-line-act { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.acc-btn {
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
}
.acc-btn.on { background: var(--yellow); border-color: var(--yellow-deep); color: var(--yellow-on); }
.acc-locked {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}

/* The grid, for the question a matrix is actually good at. */
.acc-gridwrap { overflow: auto; max-height: 560px; }
table.acc-grid { border-collapse: separate; border-spacing: 0; }
.acc-grid th, .acc-grid td {
  padding: 7px 9px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
/* Sticky both ways. Not being able to see which column you were in was the
   loudest thing wrong with the old screen. */
.acc-grid thead th {
  position: sticky; top: 0; z-index: 3; background: var(--surface-2);
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); text-align: center; border-bottom: 1px solid var(--border-strong);
}
.acc-grid thead th.tabcol { color: var(--text); border-left: 1px solid var(--border-strong); }
.acc-grid td:first-of-type { border-left: 1px solid var(--border-strong); }
.acc-corner, .acc-rowname {
  position: sticky; left: 0; text-align: left;
}
.acc-corner { z-index: 4; }
.acc-rowname {
  z-index: 2; background: var(--surface); font-weight: 650; font-size: 12.5px;
  border-right: 1px solid var(--border);
}
.acc-grid tbody tr:hover .acc-rowname, .acc-grid tbody tr:hover td { background: var(--surface-2); }
.acc-cell { text-align: center; }
.acc-mark {
  display: inline-grid; place-items: center; width: 26px; height: 22px;
  border-radius: 6px; font-size: 11px; font-weight: 800;
  border: 1px solid transparent; background: none; color: var(--text-3);
  font-family: inherit; padding: 0;
}
button.acc-mark { cursor: pointer; }
.acc-mark.given { background: var(--yellow); border-color: var(--yellow-deep); color: var(--yellow-on); }
.acc-mark.auto { background: var(--surface-2); border-color: var(--border); color: var(--text-3); }
.acc-mark.off { border: 1px dashed var(--border-strong); color: transparent; }
button.acc-mark.off:hover { color: var(--text-3); border-color: var(--yellow-deep); }
.acc-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 16px 4px; }
.acc-legend .leg { display: inline-flex; align-items: center; gap: 7px;
                   font-size: 11.5px; color: var(--text-2); }

@media (max-width: 720px) {
  .acc-person { grid-template-columns: 1fr; }
  .acc-go { display: none; }
}

/* Shown only on the staging copy. Deliberately loud and deliberately not the
   brand yellow - the point is that you cannot mistake it for the real site. */
.env-banner {
  position: sticky; top: 0; z-index: 120;
  background: var(--bad-text); color: #fff; text-align: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 12px;
}

/* --- The workspace picker --------------------------------------------------
   Sits at the top of the rail in both faces: the way back out is where the way
   in was. Built on the user menu's panel so the two behave identically. */
.ws { position: relative; margin: 0 0 14px; }
.ws-label {
  margin: 0 0 6px; padding: 0 10px;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rail-dim); font-weight: 600;
}
.ws-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border-radius: var(--radius-pill);
  background: var(--rail-2); border: 1px solid var(--rail-line);
  color: var(--rail-text); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.ws-btn:hover { border-color: #3a3a3a; }
.ws-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws .rail-caret { margin-left: auto; flex: none; }
.ws-panel { left: 0; right: 0; top: calc(100% + 6px); }
.ws-panel .usermenu-link { display: flex; align-items: center; gap: 8px; }
.ws-panel .usermenu-link.on { font-weight: 700; }
.ws-panel .usermenu-link.locked { opacity: .45; cursor: default; }
.ws-panel .rail-count { margin-left: auto; }
/* At home the picker asks rather than naming a place, so it is set apart from
   a workspace name the way a placeholder is from a value. */
.ws-pick { color: var(--rail-dim); font-weight: 500; }
.ws-panel .ws-leave { color: var(--rail-dim); }


/* --- Dark mode -------------------------------------------------------------
   Only the tokens are answered again; every rule above already reads through
   them, so the two themes stay in step instead of drifting apart.

   Three states, not two. An explicit choice stamps data-theme on the root; the
   default "follow my computer" setting stamps nothing, which is the state most
   people are in - so the media query has to stand on its own, and is guarded
   so that choosing light still beats a dark operating system.

   The rail was already near-black, so it barely moves: what changes is the
   page it sits beside. The yellow stays exactly as it is - it is the brand,
   and it carries on a dark ground without help. */
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --rail: #080808; --rail-2: #1c1c1c; --rail-text: #ededed;
  --rail-dim: #8f8f8f; --rail-line: #2b2b2b;

  /* A hair of warmth in the neutrals, so they belong to the yellow rather
     than sitting next to it. */
  --bg: #131211;
  --bg-tint: linear-gradient(180deg, #1a1712 0%, #131211 260px);
  --surface: #1b1a18;
  --surface-2: #232220;
  --border: #2e2c29;
  --border-strong: #403d39;
  --text: #ededea;
  --text-2: #a7a39d;
  --text-3: #918c86;

  --yellow: #ffc629;
  --yellow-on: #111111;
  --yellow-deep: #ffd75e;   /* lifts on dark, where deepening would sink */
  --yellow-soft: #2f2716;
  --note: #2f2716;
  --note-line: #4d4224;
  --note-text: #f2e6c4;
  --note-dim: #bda95f;
  --toast-shadow: 0 14px 38px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .40);

  /* Lifted so they still read as colour against a dark ground; the light
     values would go muddy. */
  --green: #4ac98a;
  --amber: #e8ab22;
  --red: #f2705f;
  --blue: #6aa2ff;
  --purple: #c084fc;

  /* The pill sets: a low-saturation ground, a line with some life in it, and
     text bright enough to read - the inverse shape of the light ones. */
  --band-bg: #2f2716; --band-line: #4d4224; --band-text: var(--yellow);
  --row-hover: #232220;
  --good-wash: #16241c;
  --press: rgba(255, 255, 255, .10);
  --good-bg: #16301f;  --good-line: #23543a;  --good-text: #7fe0ab;
  --bad-bg:  #34191a;  --bad-line:  #5e2b2c;  --bad-text:  #ff9c8f;
  --warn-bg: #322914;  --warn-line: #574722;  --warn-text: #f0ca72;
  --info-bg: #17203a;  --info-line: #27365e;  --info-text: #9dbcff;
  --mute-bg: #262421;  --mute-line: #35322e;  --mute-text: #9c9791;
  }
}

:root[data-theme="dark"] {
  --rail: #080808; --rail-2: #1c1c1c; --rail-text: #ededed;
  --rail-dim: #8f8f8f; --rail-line: #2b2b2b;

  /* A hair of warmth in the neutrals, so they belong to the yellow rather
     than sitting next to it. */
  --bg: #131211;
  --bg-tint: linear-gradient(180deg, #1a1712 0%, #131211 260px);
  --surface: #1b1a18;
  --surface-2: #232220;
  --border: #2e2c29;
  --border-strong: #403d39;
  --text: #ededea;
  --text-2: #a7a39d;
  --text-3: #918c86;

  --yellow: #ffc629;
  --yellow-on: #111111;
  --yellow-deep: #ffd75e;   /* lifts on dark, where deepening would sink */
  --yellow-soft: #2f2716;
  --note: #2f2716;
  --note-line: #4d4224;
  --note-text: #f2e6c4;
  --note-dim: #bda95f;
  --toast-shadow: 0 14px 38px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .40);

  /* Lifted so they still read as colour against a dark ground; the light
     values would go muddy. */
  --green: #4ac98a;
  --amber: #e8ab22;
  --red: #f2705f;
  --blue: #6aa2ff;
  --purple: #c084fc;

  /* The pill sets: a low-saturation ground, a line with some life in it, and
     text bright enough to read - the inverse shape of the light ones. */
  --band-bg: #2f2716; --band-line: #4d4224; --band-text: var(--yellow);
  --row-hover: #232220;
  --good-wash: #16241c;
  --press: rgba(255, 255, 255, .10);
  --good-bg: #16301f;  --good-line: #23543a;  --good-text: #7fe0ab;
  --bad-bg:  #34191a;  --bad-line:  #5e2b2c;  --bad-text:  #ff9c8f;
  --warn-bg: #322914;  --warn-line: #574722;  --warn-text: #f0ca72;
  --info-bg: #17203a;  --info-line: #27365e;  --info-text: #9dbcff;
  --mute-bg: #262421;  --mute-line: #35322e;  --mute-text: #9c9791;
}

/* The dark-mode row in the profile menu: a switch, so its state is visible
   without reading the label. */
.theme-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; font: inherit; cursor: pointer; text-align: left;
}
.theme-switch {
  margin-left: auto; flex: none; width: 34px; height: 19px;
  border-radius: 999px; background: var(--border-strong);
  border: 1px solid var(--border-strong); position: relative;
  transition: background .15s ease;
}
.theme-switch i {
  position: absolute; top: 1px; left: 1px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--surface);
  transition: transform .15s ease;
}
.theme-row.on .theme-switch { background: var(--yellow); border-color: var(--yellow); }
.theme-row.on .theme-switch i { transform: translateX(15px); background: var(--yellow-on); }

/* --- Task reports ---------------------------------------------------------- */
.rep-picker { display: flex; gap: 7px; }
.rep-periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pillbtn.sm { font-size: 12.5px; padding: 4px 11px; }
.rep-head { display: flex; flex-wrap: wrap; gap: 18px;
            align-items: center; justify-content: space-between; }
.rep-title { font-size: 20px; margin: 0; }
.rep-range { margin: 3px 0 0; font-size: 12.5px; color: var(--text-3); }
.rep-figs { display: flex; gap: 26px; flex-wrap: wrap; }
.rep-figs div { text-align: right; }
.rep-figs b { display: block; font-size: 24px; letter-spacing: -.02em;
              font-variant-numeric: tabular-nums; line-height: 1.1; }
.rep-figs span { font-size: 11px; color: var(--text-3); }
.rep-h { font-size: 13px; margin: 0 0 4px; letter-spacing: .01em; }
.rep-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--text-3); }
.rep-foot { margin: 10px 0 0; font-size: 12px; color: var(--text-3); }

/* The reading. A stripe carries the kind, so the page can be skimmed for the
   things that want attention without reading every line. */
.rep-notes { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: 9px; }
.rep-note { padding: 10px 14px; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: var(--surface-2);
            font-size: 13.5px; line-height: 1.55; border-left-width: 3px; }
.rep-note.headline { font-size: 15px; font-weight: 600; color: var(--text);
                     border-left-color: var(--yellow); background: var(--yellow-soft); }
.rep-note.insight  { border-left-color: var(--blue); }
.rep-note.watch    { border-left-color: var(--amber); }
.rep-note.caution  { border-left-color: var(--text-3); color: var(--text-2); }
.rep-note.good     { border-left-color: var(--green); }

.pill.p-good { background: var(--good-bg); color: var(--good-text); }
.pill.p-bad  { background: var(--bad-bg);  color: var(--bad-text); }
.pill.p-thin { background: var(--mute-bg); color: var(--mute-text); }
.rep-thin { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }

.rep-brands { display: flex; flex-direction: column; gap: 7px; }
.rep-brand { display: grid; grid-template-columns: minmax(120px, 210px) 1fr 42px;
             align-items: center; gap: 12px; font-size: 13px; }
.rep-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-brand-n { text-align: right; font-variant-numeric: tabular-nums;
               color: var(--text-2); }
.rep-bar { height: 7px; background: var(--mute-bg); border-radius: 4px; overflow: hidden; }
.rep-bar i { display: block; height: 100%; background: var(--yellow-deep); border-radius: 4px; }
@media (max-width: 720px) {
  .rep-figs { gap: 16px; }
  .rep-brand { grid-template-columns: 1fr 38px; }
  .rep-brand .rep-bar { grid-column: 1 / -1; }
}
/* The two report pickers are one control in two parts - how long a period, then
   which one. Stacked, so the second never rides up into the page heading. */
.page-head:has(.rep-picker) { align-items: flex-start; }
.rep-picker { flex-wrap: wrap; }
.rep-periods { padding-top: 2px; }
.rep-actions { display: flex; gap: 8px; }
.rep-sec { padding-top: 14px; }
.rep-sech { font-size: 12px; margin: 0 0 8px; letter-spacing: .06em;
            text-transform: uppercase; color: var(--text-2); font-weight: 700; }
.rep-para { margin: 0 0 9px; font-size: 13.5px; line-height: 1.62;
            max-width: 78ch; }
.rep-para:last-child { margin-bottom: 0; }
.rep-para.lede { font-size: 15px; line-height: 1.55; color: var(--text); }
.rep-gaps-list { margin: 0; padding-left: 18px; }
.rep-gaps-list li { font-size: 12.5px; color: var(--text-2); margin-bottom: 5px;
               line-height: 1.5; }

/* --- Task report, made scannable ------------------------------------------
   The three takeaways sit above everything: a report nobody can recall the
   shape of has not reported. Then each finding is one line - the figure first,
   because that is what the eye is looking for, and the sentence beside it. */
.takeaways { display: grid; gap: 10px; margin-bottom: 14px;
             grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.takeaway { padding: 15px 17px; border: 1px solid var(--border);
            border-radius: var(--radius); background: var(--surface);
            border-top: 3px solid var(--yellow); }
.takeaway b { display: block; font-size: 27px; letter-spacing: -.025em;
              line-height: 1.05; font-variant-numeric: tabular-nums;
              margin-bottom: 4px; }
.takeaway span { font-size: 13px; color: var(--text-2); line-height: 1.45; }

.findings { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: 9px; }
.findings li { display: grid; grid-template-columns: 96px 1fr; gap: 14px;
               align-items: baseline; }
.fnum { font-weight: 700; font-size: 15px; text-align: right;
        font-variant-numeric: tabular-nums; letter-spacing: -.02em;
        color: var(--text); overflow-wrap: anywhere; }
.ftxt { font-size: 13.5px; line-height: 1.55; color: var(--text-2);
        max-width: 72ch; }
.rep-sech { font-size: 11px; margin: 0 0 11px; letter-spacing: .07em;
            text-transform: uppercase; color: var(--text-3); font-weight: 700; }

/* Tables are detail you open, not a wall you scroll past. */
details.fold > summary { cursor: pointer; list-style: none; font-size: 13px;
                         font-weight: 600; color: var(--text); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "\25B8"; display: inline-block;
                                 width: 14px; color: var(--text-3);
                                 transition: transform .12s ease; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary + * { margin-top: 11px; }
@media (max-width: 640px) {
  .findings li { grid-template-columns: 1fr; gap: 1px; }
  .fnum { text-align: left; }
}

/* --- The report library ----------------------------------------------------
   A segmented switch, because monthly/quarterly/yearly are alternatives and
   three loose pills read as three separate things you might toggle. */
.rep-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid var(--border-strong);
       border-radius: var(--radius-pill); overflow: hidden;
       background: var(--surface); }
.seg-btn { padding: 7px 16px; font-size: 13px; font-weight: 600;
           color: var(--text-2); border-right: 1px solid var(--border);
           white-space: nowrap; }
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--surface-2); color: var(--text); }
.seg-btn.on { background: var(--yellow); color: var(--yellow-on); }
.seg-quiet .seg-btn.on { background: var(--surface-2); color: var(--text);
                         box-shadow: inset 0 -2px 0 var(--yellow); }

.lib { padding: 4px 0; }
.lib-row { display: flex; align-items: center; gap: 14px;
           padding: 13px 18px; border-bottom: 1px solid var(--border); }
.lib-row:last-child { border-bottom: 0; }
.lib-row:hover { background: var(--row-hover); }
.lib-name { display: flex; align-items: baseline; gap: 10px; flex: none; }
.lib-period { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.lib-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
            color: var(--text-3); font-weight: 600; }
/* The dotted run between the name and the buttons, as on a contents page. */
.lib-rule { flex: 1; min-width: 20px;
            border-bottom: 1px dotted var(--border-strong); }
.lib-acts { display: flex; gap: 7px; flex: none; }
@media (max-width: 560px) {
  .lib-row { flex-wrap: wrap; }
  .lib-rule { display: none; }
  .lib-acts { width: 100%; }
}

/* The report header carries three things at three sizes - a title, an action
   and a row of figures. Laid out as a grid so the action stays at the top
   right and the figures keep their own line instead of being squeezed between
   them. */
.rep-head { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px;
            align-items: start; }
.rep-head .rep-actions { grid-column: 2; grid-row: 1; justify-self: end; }
.rep-head .rep-figs { grid-column: 1 / -1; gap: 30px; padding-top: 4px;
                      border-top: 1px solid var(--border); margin-top: 2px; }
.rep-head .rep-figs div { text-align: left; }

/* A lead that is genuinely long wraps inside its own column rather than
   forcing the column wider, and never breaks mid-word. */
.fnum { overflow-wrap: normal; word-break: keep-all; }
@media (min-width: 641px) { .findings li { grid-template-columns: 86px 1fr; } }

/* --- Task report, using the width -----------------------------------------
   The findings are short. Run down a single column they leave half the page
   empty beside them and push the tables two screens down, so the sections sit
   two abreast and the page becomes something you can take in. */
.rep-grid { display: grid; gap: 12px; align-items: start;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.rep-grid .rep-sec { margin-bottom: 0; padding: 15px 18px; }
.rep-sec .findings { gap: 7px; }
.rep-sec .ftxt { max-width: none; }

/* The strip is counts, sized to be read across rather than as headlines - the
   takeaway cards above it already carry the figures that matter. */
.rep-head .rep-figs { gap: 22px; }
.rep-head .rep-figs b { font-size: 19px; }
.takeaway { padding: 13px 16px; }
.takeaway b { font-size: 24px; }

/* --- Report layout, packed ------------------------------------------------
   A grid lines every card in a row up to the tallest one, so a short section
   beside a long one leaves a hole. Columns instead: each card is only as tall
   as its own content and the next one starts straight underneath, which is
   what "no gaps" means when the cards are different lengths. */
.rep-grid { display: block; columns: 3 360px; column-gap: 12px; }
.rep-grid .rep-sec {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%; margin: 0 0 12px;
  vertical-align: top;
}

/* The header was a title on the left, a button on the right and a row of
   counts tucked under the title - three things in two rows with the middle of
   the page empty. One row instead: name, then the counts, then the action. */
.rep-head { display: flex; flex-wrap: wrap; align-items: center;
            gap: 14px 28px; }
.rep-head > div:first-child { flex: none; }
.rep-head .rep-figs { flex: 1 1 auto; border-top: 0; margin: 0; padding: 0;
                      gap: 26px; justify-content: flex-start; }
.rep-head .rep-actions { flex: none; margin-left: auto; }
.rep-title { font-size: 19px; }
.rep-range { font-size: 12px; }
@media (max-width: 720px) {
  .rep-head .rep-figs { gap: 18px; }
  .rep-head .rep-actions { margin-left: 0; }
}
/* Source order puts the action before the counts; on screen the counts belong
   beside the name and the action at the far end. */
.rep-head > div:first-child { order: 1; }
.rep-head .rep-figs { order: 2; }
.rep-head .rep-actions { order: 3; }

/* Tighter still: the header is a label bar, not a panel. Less air above and
   below, the counts closer together, and the whole strip sized so it reads in
   one pass rather than occupying a sixth of the screen. */
.card.rep-head { padding: 11px 16px; margin-bottom: 10px; gap: 8px 20px; }
.rep-head .rep-title { font-size: 17px; line-height: 1.2; }
.rep-head .rep-range { font-size: 11.5px; margin-top: 1px; }
.rep-head .rep-figs { gap: 18px; }
.rep-head .rep-figs b { font-size: 17px; line-height: 1.15; }
.rep-head .rep-figs span { font-size: 10px; }
.rep-head .btn { padding: 7px 14px; font-size: 13px; }

/* The cards below it, likewise. */
.takeaways { gap: 10px; margin-bottom: 10px; }
.takeaway { padding: 11px 14px; }
.takeaway b { font-size: 21px; margin-bottom: 2px; }
.takeaway span { font-size: 12.5px; }
.rep-grid { column-gap: 10px; }
.rep-grid .rep-sec { padding: 12px 15px; margin-bottom: 10px; }
.rep-sech { margin-bottom: 8px; }
.rep-sec .findings { gap: 6px; }
.rep-sec .ftxt { font-size: 13px; line-height: 1.5; }
.rep-sec .fnum { font-size: 14px; }
details.fold { padding: 11px 16px; margin-bottom: 8px; }
.empty-note p { margin: 0 0 8px; font-size: 13px; line-height: 1.6;
                color: var(--text-2); max-width: 66ch; }
.empty-note p:last-child { margin-bottom: 0; }
.empty-note b { color: var(--text); }
.rep-filter { display: inline-flex; gap: 6px; align-items: center; }
.rep-filter .status-select { min-width: 132px; font-weight: 600; }
.rep-controls .filter-box { max-width: 220px; }
.lib-none { margin: 12px 18px; font-size: 13px; color: var(--text-3);
            font-style: italic; }
.vis-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
              clip: rect(0 0 0 0); white-space: nowrap; }

/* --- The finance sheets ---------------------------------------------------- */
.fin-totals { display: flex; gap: 26px; flex-wrap: wrap; }
.fin-totals div { text-align: right; }
.fin-totals b { display: block; font-size: 20px; letter-spacing: -.02em;
                line-height: 1.15; font-variant-numeric: tabular-nums; }
.fin-totals span { font-size: 10.5px; color: var(--text-3); }
.fin-totals .owed { color: var(--amber); }
.fin-totals .got  { color: var(--green); }
.fin-totals .late { color: var(--red); }

.fin-group { padding: 0; overflow: hidden; }
.fin-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
            padding: 10px 16px; background: var(--surface-2);
            border-bottom: 1px solid var(--border); }
.fin-band h2 { font-size: 14px; margin: 0; }
.fin-band-sum { margin-left: auto; font-size: 12px; color: var(--text-2);
                font-variant-numeric: tabular-nums; }
.fin-band-sum b { font-weight: 700; }
.fin-band-sum .owed { color: var(--amber); }
.fin-band-sum .got { color: var(--green); }
.fin-band-sum .sep { color: var(--text-3); margin: 0 4px; }
.fin-foot { padding: 9px 16px; border-top: 1px solid var(--border); }

.tbl-fin th { font-size: 9.5px; padding: 8px 9px; }
.tbl-fin td { padding: 4px 9px; }
.tbl-fin .w1 { width: 30px; }
.tbl-fin .cell { width: 100%; border: 1px solid transparent; background: none;
                 color: var(--text); font: inherit; font-size: 12.5px;
                 padding: 5px 6px; border-radius: 6px; }
.tbl-fin .cell:hover { border-color: var(--border); }
.tbl-fin .cell:focus { border-color: var(--yellow-deep); background: var(--surface);
                       outline: none; }
.tbl-fin .cell.num, .tbl-fin .fin-margin { text-align: right;
                                           font-variant-numeric: tabular-nums; }
.fin-margin { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.fin-row.is-late .cell[name=release_date] { color: var(--red); font-weight: 600; }
.rowkill { background: none; border: 0; color: var(--text-3); cursor: pointer;
           font-size: 16px; line-height: 1; padding: 3px 5px; border-radius: 5px; }
.rowkill:hover { background: var(--bad-bg); color: var(--bad-text); }
.fin-new { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin-new label { font-size: 12.5px; color: var(--text-2); }
.fin-new .status-select { min-width: 220px; max-width: 280px; flex: none; }
.fin-new { align-items: center; }
.imp-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.imp-field { display: flex; flex-direction: column; gap: 5px; }
.imp-field label { font-size: 11px; color: var(--text-2); font-weight: 600; }
.cell.bordered { border: 1px solid var(--border-strong); background: var(--surface);
                 color: var(--text); font: inherit; font-size: 13px;
                 padding: 7px 10px; border-radius: var(--radius-sm); }
.imp-summary { display: flex; gap: 30px; flex-wrap: wrap; }
.imp-summary div b { display: block; font-size: 23px; letter-spacing: -.02em;
                     font-variant-numeric: tabular-nums; line-height: 1.1; }
.imp-summary div span { font-size: 11px; color: var(--text-3); }
.imp-summary .got { color: var(--green); }
.imp-summary .late { color: var(--amber); }
.imp-unmapped td { background: var(--warn-bg); }
.imp-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.imp-go p { margin: 0; font-size: 12.5px; color: var(--text-2); flex: 1 1 320px; }
.tbl-fin select.cell.st-paid { color: var(--good-text); font-weight: 600; }
.tbl-fin select.cell.st-pending { color: var(--warn-text); font-weight: 600; }
.imp-mode { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
            font-size: 13px; line-height: 1.5; cursor: pointer; }
.imp-mode input { margin-top: 3px; flex: none; }
.imp-mode b { color: var(--text); }
.imp-mode span { color: var(--text-2); }
.backlink .sep { color: var(--text-3); margin: 0 7px; }
.page-head .rep-actions .btn.sm { white-space: nowrap; }
.finbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
             padding: 12px 16px; margin-bottom: 10px; }
.fb-field { display: flex; flex-direction: column; gap: 4px; }
.fb-field label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
                  color: var(--text-3); font-weight: 600; }
.fb-field .status-select { min-width: 132px; }
.fb-grow { flex: 1 1 220px; }
.fb-grow .filter-box { width: 100%; max-width: none; }
.fb-count { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); }
/* The find box is one line, like every other control on the bar - flex-grow
   was stretching it to the height of the row it sits in. */
.finbar { align-items: flex-end; }
.fb-grow { flex: 1 1 240px; max-width: 420px; }
.fb-grow .filter-box { width: 100%; max-width: none; height: 36px;
                       box-sizing: border-box; }
.finbar .status-select { height: 36px; box-sizing: border-box; }
.fb-field { justify-content: flex-end; }

/* Named .finbar, not .filterbar: the app already has a .filterbar that lays
   its controls out in a row and gives the search input flex: 1 1 190px. In
   this bar each control sits in its own column with a label above it, so that
   flex grew the input along the column's main axis - 190px of height. */
.finbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
          padding: 12px 16px; margin-bottom: 10px; }
.finbar .fb-field .filter-box,
.finbar .fb-field .status-select { height: 36px; box-sizing: border-box;
                                   flex: none; min-width: 0; }
.finbar .fb-grow { flex: 1 1 240px; max-width: 420px; }
.finbar .fb-grow .filter-box { width: 100%; max-width: none; }
/* One row: name, figures, action. The button was sitting on its own line with
   the figures stacked beneath it and the right half of the bar empty. */
.finhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.finhead .fh-name { flex: 0 1 auto; }
.finhead .fin-totals { flex: 1 1 auto; }
.finhead .fh-act { flex: none; margin-left: auto; }
.finhead h1 { margin-bottom: 2px; }
.finhead .page-sub { margin: 0; }
.warn-card { border-color: var(--warn-line); background: var(--warn-bg); }
.warn-card .rep-h, .warn-card .rep-sub b { color: var(--warn-text); }
.warn-card .rep-sub { color: var(--warn-text); opacity: .9; }

/* --- The sheet bar --------------------------------------------------------
   Title, figures, action and filters in one surface. They were three stacked
   cards, each with its own padding, which put the first row of data most of a
   screen down. */
.sheetbar { padding: 0; margin-bottom: 10px; overflow: hidden; }
.sb-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px;
          padding: 13px 18px; }
.sb-name { flex: 0 1 auto; min-width: 0; }
.sb-name h1 { font-size: 21px; margin: 0; letter-spacing: -.02em; }
.sb-name p { margin: 2px 0 0; font-size: 12px; color: var(--text-3);
             max-width: 52ch; }
.sb-figs { display: flex; gap: 24px; flex-wrap: wrap; margin-left: auto; }
.sb-figs div { text-align: right; }
.sb-figs b { display: block; font-size: 18px; line-height: 1.15;
             letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sb-figs span { font-size: 10px; color: var(--text-3); }
.sb-figs .owed { color: var(--amber); }
.sb-figs .got { color: var(--green); }
.sb-figs .late { color: var(--red); }
.sb-act { flex: none; }

.sb-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
              padding: 10px 18px; border-top: 1px solid var(--border);
              background: var(--surface-2); }
.sb-filters .status-select { height: 34px; box-sizing: border-box; flex: none;
                             min-width: 0; font-size: 12.5px; padding: 0 10px; }
.sb-filters .sb-find { flex: 1 1 240px; max-width: 460px; height: 34px;
                       box-sizing: border-box; width: auto; max-width: 460px; }
@media (max-width: 760px) {
  .sb-figs { margin-left: 0; gap: 18px; }
  .sb-figs b { font-size: 16px; }
  .sb-filters .sb-find { flex: 1 1 100%; max-width: none; }
}
/* The base rule gives every select width:100%. The app's own .filterbar
   overrides that with width:auto; this bar has to do the same or each control
   takes a line to itself. */
.sb-filters select, .sb-filters input { width: auto; }
.sb-filters .status-select { min-width: 118px; max-width: 220px; }
.sb-filters .sb-find { flex: 1 1 260px; min-width: 200px; max-width: 460px; }
/* A row whose estimate comes from a signed CE rather than from typing. */
.ce-tag { display: inline-block; margin-top: 2px; font-size: 9.5px;
          font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
          padding: 1px 6px; border-radius: var(--radius-pill);
          background: var(--good-bg); color: var(--good-text); }
.ce-tag:hover { background: var(--good-line); }
/* Marked signed, but no copy was uploaded - worth distinguishing, since the
   point of the tag is that there is a document behind it. */
.ce-tag.plain { background: var(--mute-bg); color: var(--mute-text); }
.ce-tag.plain:hover { background: var(--mute-line); }
.ce-tag-note { font-weight: 600; opacity: .75; }
.billed-cell { white-space: nowrap; line-height: 1.3; }
.billed-done { display: block; font-weight: 600; }
.billed-left { display: block; font-size: 9.5px; color: var(--amber); }
.billed-full { display: block; font-size: 9.5px; color: var(--green); }
.billed-cell .dim { color: var(--text-3); }
.rowacts { display: flex; gap: 2px; align-items: center; justify-content: flex-end; }
.billbtn { background: none; border: 1px solid var(--border-strong);
           color: var(--text-2); cursor: pointer; font: inherit; font-size: 10px;
           font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
           padding: 2px 7px; border-radius: var(--radius-pill); }
.billbtn:hover { background: var(--yellow); border-color: var(--yellow);
                 color: var(--yellow-on); }
.tbl-fin .w1 { width: 72px; }
/* The invoice attached to a receivable - a scan, or a photo off a phone. */
.invcell { white-space: nowrap; }
.inv-add { display: inline-block; cursor: pointer; font-size: 10px;
           font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
           padding: 2px 8px; border-radius: var(--radius-pill);
           border: 1px dashed var(--border-strong); color: var(--text-3); }
.inv-add:hover { border-color: var(--yellow-deep); color: var(--text);
                 border-style: solid; }
.inv-add input { display: none; }
.inv-has { display: inline-block; font-size: 10px; font-weight: 700;
           text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px;
           border-radius: var(--radius-pill);
           background: var(--good-bg); color: var(--good-text); }
.inv-has:hover { background: var(--good-line); }
.inv-x { background: none; border: 0; color: var(--text-3); cursor: pointer;
         font-size: 13px; line-height: 1; padding: 1px 3px; }
.inv-x:hover { color: var(--bad-text); }
.inv-wait { color: var(--text-3); font-size: 11px; }
/* Looking at an attached invoice without leaving the sheet. */
.inv-view { place-items: center; padding: 28px 20px; }
.inv-modal { max-width: 900px; display: flex; flex-direction: column;
             max-height: calc(100vh - 56px); }
.inv-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
            border-bottom: 1px solid var(--border); }
.inv-head b { flex: 1; font-size: 13.5px; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.inv-body { padding: 14px 16px; overflow: auto; background: var(--surface-2); }
/* A photo of a document is usually portrait and much larger than the window. */
.inv-img { display: block; max-width: 100%; max-height: calc(100vh - 170px);
           margin: 0 auto; border-radius: var(--radius-sm);
           background: #fff; }
.inv-frame { display: block; width: 100%; height: calc(100vh - 170px);
             border: 0; border-radius: var(--radius-sm); background: #fff; }
button.inv-has { border: 0; cursor: pointer; font-family: inherit; }
.fin-or { font-size: 11.5px; color: var(--text-3); }
.fin-new .cell.bordered { min-width: 180px; }
/* A save that has been failing for a while. The small bar is enough for a
   blip; it is not enough for something quietly dropping work. */
.save-stuck .tbl-fin, .save-stuck .tbl-asc { outline: 2px solid var(--red);
                                             outline-offset: 3px; }
.asc-dirty.failed { background: var(--bad-bg); color: var(--bad-text);
                    border-color: var(--bad-line); font-weight: 600; }
/* What was left behind last time. */
.draft-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             padding: 11px 16px; margin-bottom: 10px;
             border: 1px solid var(--warn-line); background: var(--warn-bg);
             color: var(--warn-text); border-radius: var(--radius);
             font-size: 13px; }
.draft-bar span { flex: 1 1 260px; }
.draft-bar b { font-weight: 700; }
/* A save that has been failing long enough to matter. */
.save-stuck .tbl-fin { outline: 2px solid var(--red); outline-offset: 3px; }
.asc-dirty.failed { background: var(--bad-bg); color: var(--bad-text);
                    border-color: var(--bad-line); font-weight: 600; }
/* Work the server never received, offered back on the next visit. */
.draft-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             padding: 11px 16px; margin-bottom: 10px;
             border: 1px solid var(--warn-line); background: var(--warn-bg);
             color: var(--warn-text); border-radius: var(--radius);
             font-size: 13px; }
.draft-bar span { flex: 1 1 280px; }
.draft-bar b { font-weight: 700; }

/* --- Receivables column widths ---------------------------------------------
   Eleven columns sharing the width evenly left Status showing "Pend". These
   are the widths each column actually needs; Description and Notes take what
   is left. */
.tbl-rec { table-layout: fixed; width: 100%; }
.tbl-rec .c-ce     { width: 68px; }
.tbl-rec .c-inv    { width: 68px; }
.tbl-rec .c-desc   { width: auto; min-width: 140px; }
.tbl-rec .c-due    { width: 120px; }
.tbl-rec .c-status { width: 104px; }
.tbl-rec .c-money  { width: 92px; }
.tbl-rec .c-file   { width: 74px; }
.tbl-rec .c-notes  { width: auto; min-width: 120px; }
.tbl-rec .c-kill   { width: 34px; }
/* A fixed layout clips rather than wraps, so every cell has to fit its box. */
.tbl-rec .cell { min-width: 0; max-width: 100%; }
.tbl-rec select.cell { padding-right: 4px; }
.tbl-rec td { overflow: hidden; }
@media (max-width: 1100px) {
  /* Below this the row cannot hold eleven columns without squeezing one of
     them; the table scrolls sideways in its own wrapper instead. */
  .tbl-rec { table-layout: auto; min-width: 1040px; }
}

/* --- Asking before destroying ---------------------------------------------- */
.confirm-bg { place-items: center; padding: 24px; z-index: 90; }
.confirm-modal { max-width: 420px; padding: 20px 22px; }
.confirm-modal h3 { margin: 0 0 8px; font-size: 16px; }
.confirm-modal p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55;
                   color: var(--text-2); }
.confirm-acts { display: flex; gap: 8px; justify-content: flex-end; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff;
              font-weight: 600; }
.btn.danger:hover { filter: brightness(1.08); }
/* Taking a brand off the sheet. Quiet until hovered: it removes a year of a
   brand's rows and should not be the loudest thing on the band. */
.bandkill { background: none; border: 0; color: var(--text-3); cursor: pointer;
            font-size: 15px; line-height: 1; padding: 2px 6px;
            border-radius: var(--radius-sm); }
.bandkill:hover { background: var(--bad-bg); color: var(--bad-text); }

/* --- Payables and Suppliers ---------------------------------------------- */
/* Both reuse the finance sheet's markup and script wholesale. What they need
   of their own is column widths - Receivables' eleven-column grid squeezed
   Status to "Pend" when the widths were left to the browser, and these have
   seven columns each, so they get their own stated widths rather than
   inheriting a grid built for a different shape. */

.tbl-pay { table-layout: fixed; width: 100%; }
.tbl-pay .c-desc   { width: auto; min-width: 200px; }
.tbl-pay .c-ce     { width: 76px; }
.tbl-pay .c-status { width: 124px; }
.tbl-pay .c-due    { width: 134px; }
.tbl-pay .c-money  { width: 108px; }
.tbl-pay .c-notes  { width: auto; min-width: 140px; }
.tbl-pay .c-kill   { width: 34px; }
.tbl-pay .cell { min-width: 0; max-width: 100%; }
.tbl-pay select.cell { padding-right: 4px; }
.tbl-pay td { overflow: hidden; }

.tbl-sup { table-layout: fixed; width: 100%; }
.tbl-sup .c-desc  { width: auto; min-width: 150px; }
.tbl-sup .c-inv   { width: auto; min-width: 150px; }
.tbl-sup .c-due   { width: 128px; }
.tbl-sup .c-file  { width: 130px; }
.tbl-sup .c-notes { width: auto; min-width: 130px; }
.tbl-sup .c-kill  { width: 34px; }
.tbl-sup .cell { min-width: 0; max-width: 100%; }
.tbl-sup td { overflow: hidden; }

@media (max-width: 900px) {
  /* Below this the fixed grid starts clipping; let the table size itself and
     scroll inside .tbl-wrap, which is what the other sheets do. */
  .tbl-pay { table-layout: auto; min-width: 860px; }
  .tbl-sup { table-layout: auto; min-width: 900px; }
}

/* A count, not money. Kept off .sb-figs on purpose: the shared script rewrites
   every <b> in that class as a peso figure, so a supplier count parked there
   would be replaced with 0.00 on the first keystroke. */
.sb-meta { display: flex; align-items: baseline; gap: 6px; margin-left: auto;
           text-align: right; }
.sb-meta b { font-size: 18px; line-height: 1.15; letter-spacing: -.02em;
             font-variant-numeric: tabular-nums; }
.sb-meta span { font-size: 10px; color: var(--text-3); }

.fin-band-count { margin-left: auto; font-size: 11px; color: var(--text-3);
                  font-variant-numeric: tabular-nums; }

/* The portfolio cell: a box to type a link in, and an arrow to follow the one
   that is already there. The arrow sits inside the cell rather than taking a
   column of its own - one row in twenty-five has a link. */
.supcell { position: relative; }
.supcell .cell { padding-right: 22px; }
.sup-open { position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
            font-size: 13px; line-height: 1; text-decoration: none;
            color: var(--text-3); padding: 2px; border-radius: var(--radius-sm); }
.sup-open:hover, .sup-open:focus-visible { color: var(--blue);
                                           background: var(--row-hover); }

@media (max-width: 760px) {
  .sb-meta { margin-left: 0; }
}

/* --- Revenue: the margin tracker ---------------------------------------- */
/* A project card holds two tables, which no other sheet here does, so the
   sub-blocks get a little separation and their own heading rather than running
   together as one long grid. */

.tbl-rvtop { table-layout: fixed; width: 100%; }
.tbl-rvtop .c-desc  { width: auto; min-width: 200px; }
.tbl-rvtop .c-brand { width: auto; min-width: 150px; }
.tbl-rvtop .c-money { width: 128px; }
.tbl-rvtop .c-pct   { width: 56px; }
.tbl-rvtop tfoot th { border-top: 2px solid var(--border-strong);
                      font-variant-numeric: tabular-nums; }
.tbl-rvtop td.num, .tbl-rvtop th.num { font-variant-numeric: tabular-nums; }
.rv-jump { text-decoration: none; color: var(--text); font-weight: 600; }
.rv-jump:hover, .rv-jump:focus-visible { color: var(--blue);
                                         text-decoration: underline; }

.tbl-rvln { table-layout: fixed; width: 100%; }
.tbl-rvln .c-ce    { width: 72px; }
.tbl-rvln .c-desc  { width: auto; min-width: 160px; }
.tbl-rvln .c-money { width: 104px; }
.tbl-rvln .c-notes { width: auto; min-width: 110px; }
.tbl-rvln .c-kill  { width: 34px; }
.tbl-rvln .cell { min-width: 0; max-width: 100%; }
.tbl-rvln td { overflow: hidden; }

.tbl-rvct { table-layout: fixed; width: 100%; }
.tbl-rvct .c-desc  { width: auto; min-width: 220px; }
.tbl-rvct .c-money { width: 128px; }
.tbl-rvct .c-kill  { width: 34px; }
.tbl-rvct .cell { min-width: 0; max-width: 100%; }
.tbl-rvct td { overflow: hidden; }

.rv-head { gap: 8px; }
.rv-head .rv-title { flex: 1 1 260px; font-weight: 600; font-size: 14px;
                     width: auto; min-width: 0; }
.rv-head .rv-brand { flex: 0 1 200px; width: auto; min-width: 0;
                     color: var(--text-2); }

/* The three figures for the project, between its title and its tables. */
.rv-figs { display: flex; flex-wrap: wrap; gap: 20px; padding: 8px 18px;
           border-bottom: 1px solid var(--border); background: var(--surface-2);
           font-size: 11px; color: var(--text-3); }
.rv-figs b { font-size: 13px; color: var(--text); margin-left: 5px;
             font-variant-numeric: tabular-nums; }
.rv-figs b.got { color: var(--green); }
.rv-figs b.late { color: var(--red); }
.rv-figs i { font-style: normal; margin-left: 5px; opacity: .75; }

.rv-sub { padding-top: 4px; }
.rv-sub + .rv-sub { border-top: 1px solid var(--border); margin-top: 4px; }
.rv-sub h3 { margin: 10px 18px 4px; font-size: 10.5px; font-weight: 700;
             letter-spacing: .06em; text-transform: uppercase;
             color: var(--text-3); }

@media (max-width: 1000px) {
  .tbl-rvln { table-layout: auto; min-width: 980px; }
  .tbl-rvtop { table-layout: auto; min-width: 760px; }
}

/* --- The pager ----------------------------------------------------------- */
/* Shown above and below the rows, because the reason you want it is that the
   page is long - and having to scroll back to the top to turn the page is the
   same complaint again. */
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
         padding: 9px 2px; font-size: 12px; color: var(--text-3); }
.pg-at { font-variant-numeric: tabular-nums; }
.pg-nums { display: flex; align-items: center; gap: 3px; margin-left: auto;
           flex-wrap: wrap; }
.pg-n, .pg-step { min-width: 27px; height: 27px; display: inline-flex;
                  align-items: center; justify-content: center;
                  padding: 0 6px; border: 1px solid var(--border);
                  border-radius: var(--radius-sm); text-decoration: none;
                  color: var(--text-2); background: var(--surface);
                  font-variant-numeric: tabular-nums; box-sizing: border-box; }
.pg-n:hover, .pg-step:hover,
.pg-n:focus-visible, .pg-step:focus-visible { background: var(--row-hover);
                                              border-color: var(--border-strong);
                                              color: var(--text); }
.pg-n.here { background: var(--band-bg); border-color: var(--band-line);
             color: var(--band-text); font-weight: 700; }
.pg-n.here:hover { background: var(--band-bg); }
.pg-step.off { opacity: .35; }
.pg-step.off:hover { background: var(--surface); border-color: var(--border);
                     color: var(--text-2); }
/* A note when the find box is only filtering what is loaded. */
.pg-find { font-size: 11px; color: var(--text-3); padding: 2px 2px 8px; }
.pg-find b { color: var(--text-2); font-weight: 600; }
@media (max-width: 620px) {
  .pg-nums { margin-left: 0; }
}

/* --- Clocking in and out -------------------------------------------------- */
.clk-now { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           padding: 11px 16px; }
.clk-state { display: flex; align-items: center; gap: 11px; }
.clk-state b { display: block; font-size: 15px; }
.clk-state span { font-size: 11.5px; color: var(--text-3); }
.clk-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.clk-dot.on { background: var(--green);
              box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); }
.clk-dot.off { background: var(--border-strong); }
.clk-act { display: flex; align-items: center; gap: 8px; margin-left: auto;
           flex-wrap: wrap; }
.clk-act .cell { width: auto; min-width: 190px; }
.btn.big { font-size: 14px; padding: 11px 26px; font-weight: 650; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.quiet { background: none; border-color: transparent; color: var(--text-3); }
.btn.quiet:hover { color: var(--red); border-color: var(--border); }


/* The forgotten clock-out. Deliberately loud - quiet, it becomes a nineteen
   hour shift nobody notices until payroll. */
.clk-stale { border-color: var(--warn-line); background: var(--warn-bg);
             padding: 14px 18px; }
.clk-stale b { color: var(--warn-text); }
.clk-stale p { margin: 5px 0 10px; font-size: 12.5px; color: var(--text-2);
               max-width: 70ch; }
.clk-fix { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
           margin-bottom: 6px; }
.clk-fix label { font-size: 10.5px; color: var(--text-3); display: grid; gap: 3px; }
.clk-fix .cell { width: auto; }

.clk-day .fin-band h2 { font-size: 13px; }
.clk-today { font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
             text-transform: uppercase; color: var(--band-text);
             background: var(--band-bg); border: 1px solid var(--band-line);
             border-radius: var(--radius-pill); padding: 1px 7px;
             margin-left: 6px; vertical-align: 1px; }
.clk-total { margin-left: auto; font-variant-numeric: tabular-nums;
             font-weight: 650; }
.tbl-clk { table-layout: fixed; width: 100%; }
.tbl-clk .c-t    { width: 110px; }
.tbl-clk .c-dur  { width: 96px; }
.tbl-clk .c-note { width: auto; min-width: 140px; }
.tbl-clk .c-kill { width: 92px; }
.tbl-clk tr.is-open td { background: color-mix(in srgb, var(--green) 7%, transparent); }
.clk-running { color: var(--green); font-size: 11.5px; }
.clk-next { font-size: 9.5px; color: var(--text-3); margin-left: 4px; }
.clk-fixed { font-size: 9.5px; color: var(--text-3); border: 1px solid var(--border);
             border-radius: var(--radius-pill); padding: 0 6px; margin-left: 5px; }
.rowedit { background: none; border: 1px solid var(--border); cursor: pointer;
           font-size: 11.5px; color: var(--text-2); white-space: nowrap;
           border-radius: var(--radius-sm); padding: 3px 9px; }
.rowedit:hover, .rowedit:focus-visible { color: var(--text);
                                         background: var(--row-hover); }
/* The correction panel: its own full-width row, so it has somewhere to go. */
.clk-editrow > td { background: var(--surface-2);
                    border-top: 1px solid var(--border); padding: 10px 14px; }
.clk-editrow .clk-fix { margin-bottom: 0; }
.clk-editrow .clk-fix .grow { flex: 1 1 220px; }
.clk-editrow .clk-fix .grow .cell { width: 100%; }
/* The cell stays a cell. Giving it display:flex takes it out of the table
   layout, colspan stops applying, and the panel collapses to the width of one
   column - which is the stacked mess this was meant to fix in the first place.
   The flex row goes on a wrapper inside it. */
.clk-editwrap { display: flex; align-items: flex-end; gap: 10px;
                flex-wrap: wrap; }
.clk-editwrap .clk-fix { flex: 1 1 420px; }
.clk-drop { margin-left: auto; }
.clk-foot { font-size: 11px; color: var(--text-3); padding: 4px 2px 16px; }

.tbl-team { table-layout: fixed; width: 100%; }
.tbl-team .c-who  { width: auto; min-width: 180px; }
.tbl-team .c-st   { width: 92px; }
.tbl-team .c-t    { width: 104px; }
.tbl-team .c-dur  { width: 94px; }
.tbl-team .c-note { width: auto; min-width: 150px; }
.tbl-team td b { display: block; }
.tbl-team td .dim { font-size: 11px; }
.tbl-team tr.is-absent td { opacity: .62; }
.pill { font-size: 10px; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase; padding: 2px 8px;
        border-radius: var(--radius-pill); border: 1px solid; }
.pill.on   { color: var(--good-text); background: var(--good-bg); border-color: var(--good-line); }
.pill.done { color: var(--mute-text); background: var(--mute-bg); border-color: var(--mute-line); }
.pill.none { color: var(--text-3); background: transparent; border-color: var(--border); }

@media (max-width: 760px) {
  .clk-act { margin-left: 0; width: 100%; }
  .tbl-clk { table-layout: auto; min-width: 560px; }
  .tbl-team { table-layout: auto; min-width: 720px; }
}

/* The way from the overview card into the full history. */
.clock-see { margin-left: auto; font-size: 11.5px; color: var(--text-3);
             white-space: nowrap;
             text-decoration: none; border-bottom: 1px solid transparent; }
.clock-see:hover, .clock-see:focus-visible { color: var(--text);
                                             border-bottom-color: var(--border-strong); }

/* --- Approvals ------------------------------------------------------------ */
.clk-wait { font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
            text-transform: uppercase; color: var(--warn-text);
            background: var(--warn-bg); border: 1px solid var(--warn-line);
            border-radius: var(--radius-pill); padding: 1px 7px; }
.clk-no { font-size: 9.5px; color: var(--bad-text); margin-left: 5px; }
.appr { padding: 14px 18px; }
.appr-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.appr-who b { font-size: 14px; }
.appr-when { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.appr-change { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
               margin: 10px 0 6px; }
.appr-change > div { display: grid; gap: 1px; }
.appr-change span { font-size: 9.5px; letter-spacing: .05em;
                    text-transform: uppercase; color: var(--text-3); }
.appr-change b { font-size: 13px; font-variant-numeric: tabular-nums; }
.appr-change i { font-style: normal; font-size: 11px; color: var(--text-3); }
.appr-new b { color: var(--good-text); }
.appr-arrow { color: var(--text-3); font-size: 15px; }
.appr-why { margin: 2px 0 10px; font-size: 12.5px; color: var(--text-2);
            max-width: 70ch; }
.appr-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appr-no { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.appr-no .cell { width: auto; min-width: 180px; }

.btn.sm.off { opacity: .4; pointer-events: none; }

/* An empty state is one sentence. It was taking a full card's padding and
   reading as tall as a card with a table in it. */
.card.empty { padding: 12px 16px; }
.card.empty p { margin: 0; font-size: 13px; color: var(--text-3); }

/* The week bar and the footnote are one line, not two blocks. */

/* An empty date input still prints mm/dd/yyyy, which on a sheet where most
   rows have no date is seventy lines of placeholder shouting over the data.
   Dimmed at rest, full strength the moment it is being used. */
.cell.nodate { color: var(--text-3); opacity: .4; }
.cell.nodate:hover, .cell.nodate:focus { opacity: 1; color: var(--text); }

/* The timesheet's filter bar is only filters, so it needs no header block. */
.clk-bar { margin-bottom: 10px; }
.clk-bar .sb-filters { border-top: 0; border-radius: var(--radius); }
.clk-sum { margin-left: auto; font-size: 11.5px; color: var(--text-3);
           font-variant-numeric: tabular-nums; }

/* Two tabs under one rail row. */
.subtabs { display: flex; gap: 2px; margin: 0 0 10px; border-bottom: 1px solid var(--border); }
.subtabs a { padding: 7px 14px; font-size: 12.5px; font-weight: 600;
             color: var(--text-3); text-decoration: none;
             border-bottom: 2px solid transparent; margin-bottom: -1px;
             display: inline-flex; align-items: center; gap: 6px; }
.subtabs a:hover { color: var(--text); background: var(--row-hover); }
.subtabs a.on { color: var(--text); border-bottom-color: var(--yellow); }
.subtab-n { font-size: 10px; font-weight: 700; min-width: 16px; text-align: center;
            padding: 0 5px; border-radius: var(--radius-pill);
            background: var(--warn-bg); color: var(--warn-text);
            border: 1px solid var(--warn-line); }

/* --- People and the 201 file ---------------------------------------------- */
.tbl-people { table-layout: fixed; width: 100%; }
.tbl-people .c-who  { width: auto; min-width: 230px; }
.tbl-people .c-dept { width: 180px; }
.tbl-people .c-ten  { width: 120px; }
.tbl-people .c-gaps { width: 130px; }
/* Without a width here the last column shares the leftover space with the
   name column - in a fixed layout every unsized column does - so half the
   table was an empty strip on the right. Sized, the slack all goes to the
   names, which is the column that can use it. */
.tbl-people .c-kill { width: 52px; }
.tbl-people td.w1 { text-align: center; }
.tbl-people tr.prow td { padding: 0; }
.tbl-people tr.prow td:not(:first-child) { padding: 10px 12px; }
.prow-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
             text-decoration: none; color: inherit; }
.prow-link b { display: block; font-size: 13px; }
.prow-link .dim { font-size: 11.5px; }
.prow:hover { background: var(--row-hover); }
.avatar.sm { width: 28px; height: 28px; font-size: 10px; flex: none; }

.crumb { font-size: 12px; padding: 0 2px 8px; }
.crumb a { color: var(--text-3); text-decoration: none; }
.crumb a:hover { color: var(--text); }

.pf-head { display: flex; align-items: center; gap: 12px; }
.pf-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-set[disabled] .cell, .pf-set[disabled] input,
.pf-set[disabled] textarea { opacity: .82; }
.pf-card .fin-band h2 { font-size: 12.5px; }
.pf-save { display: flex; justify-content: flex-end; margin: 0 0 14px; }

.pf-leave { list-style: none; margin: 0; padding: 0; display: flex;
            gap: 22px; flex-wrap: wrap; }
.pf-leave b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pf-leave span { font-size: 11px; color: var(--text-3); margin-left: 5px; }

.pf-training { border-top: 1px solid var(--border); }

.pill.warn { color: var(--warn-text); background: var(--warn-bg);
             border-color: var(--warn-line); }

/* The way from your account page to your employee file. */
.pf-jump { display: flex; align-items: center; gap: 12px; padding: 14px 18px;
           text-decoration: none; color: inherit; margin-top: 18px; }
.pf-jump:hover { background: var(--row-hover); border-color: var(--border-strong); }
.pf-jump b { display: block; font-size: 13.5px; }
.pf-jump span span { font-size: 12px; color: var(--text-3); }
.pf-jump-go { margin-left: auto; font-size: 12px; color: var(--text-3);
              white-space: nowrap; }

/* --- Leave ---------------------------------------------------------------- */
.tbl-leave { table-layout: fixed; width: 100%; }
.tbl-leave .c-kind { width: auto; min-width: 130px; }
.tbl-leave .c-n    { width: 92px; }
.tbl-leave .c-why  { width: auto; min-width: 180px; }
.tbl-leave td.num, .tbl-leave th.num { font-variant-numeric: tabular-nums; }
.tbl-leave .cell.num { width: 100%; }
.pf-leavesave { display: flex; align-items: center; gap: 12px;
                border-top: 1px solid var(--border); }
.pf-leavesave .hint { margin: 0; }
.pf-leavesave .btn { margin-left: auto; }
.lv-file .hint { font-size: 11.5px; }

/* --- On-screen notices ----------------------------------------------------- */
/* Centred, because these wait to be dismissed rather than fading: in the
   corner a stack of five reads as clutter to be swept away, in the middle it
   reads as something to answer. The wrapper covers the screen but ignores the
   mouse, so only the notices themselves are clickable and the page underneath
   stays usable. */
.toasts { position: fixed; inset: 0; z-index: 90; pointer-events: none;
          display: flex; flex-direction: column; align-items: center;
          justify-content: center; gap: 8px; padding: 24px 16px;
          overflow-y: auto; }
.toast { display: flex; align-items: flex-start; gap: 13px; pointer-events: auto;
         width: min(560px, 100%); box-sizing: border-box;
         background: var(--surface); border: 1px solid var(--border-strong);
         border-radius: var(--radius); padding: 18px 20px;
         box-shadow: var(--toast-shadow); text-decoration: none;
         color: var(--text); opacity: 0; transform: translateY(6px) scale(.985);
         transition: opacity .22s ease, transform .22s ease; }
.toast.in { opacity: 1; transform: none; }
.toast:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.toast:hover { border-color: var(--yellow); }
.toast-dot { width: 10px; height: 10px; border-radius: 50%; flex: none;
             margin-top: 7px; background: var(--yellow); }
.toast-text { min-width: 0; }
.toast-text b { display: block; font-size: 15.5px; line-height: 1.35;
                letter-spacing: -.01em; }
.toast-text span { display: block; font-size: 13px; color: var(--text-2);
                   margin-top: 4px; line-height: 1.45; }
.toast-x { margin-left: auto; background: none; border: 0; cursor: pointer;
           color: var(--text-3); font-size: 20px; line-height: 1;
           padding: 0 4px; align-self: flex-start; }
.toast-x:hover { color: var(--text); }
.toast.quiet { opacity: 0; }
.toast.quiet.in { opacity: .85; }
.toast.quiet .toast-text b { font-weight: 500; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: none; }
}

/* With no timer on a notice, the stack needs a way to clear it. Hidden until
   there is something to clear. */
.toast-all { order: -1; align-self: center; pointer-events: auto;
             background: var(--surface); border: 1px solid var(--border-strong);
             border-radius: var(--radius-pill); color: var(--text-2);
             font: inherit; font-size: 12px; padding: 6px 16px; cursor: pointer;
             margin-bottom: 4px; box-shadow: var(--toast-shadow);
             display: none; }
.toasts:has(.toast) .toast-all { display: block; }
.toast-all:hover { color: var(--text); border-color: var(--border-strong); }

/* The blur behind the notices. It covers the page and takes the mouse, so the
   notice is the only thing to deal with - and clicking it, or Escape, clears
   them all. It lifts when the last one goes, not the first. */
.toast-veil { position: fixed; inset: 0; z-index: 89; opacity: 0;
              background: rgba(12, 12, 14, .34);
              -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
              transition: opacity .24s ease; }
.toast-veil.in { opacity: 1; }
:root[data-theme="light"] .toast-veil { background: rgba(28, 25, 20, .22); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .toast-veil { background: rgba(28, 25, 20, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .toast-veil { transition: none; }
}

/* --- Choosing a notification sound ---------------------------------------- */
.snd-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.snd { display: flex; align-items: center; gap: 9px; cursor: pointer;
       border: 1px solid var(--border); border-radius: var(--radius-sm);
       padding: 9px 12px; flex: 1 1 210px; background: var(--surface); }
.snd:hover { border-color: var(--border-strong); background: var(--row-hover); }
.snd.on { border-color: var(--yellow); background: var(--yellow-soft); }
.snd input { width: auto; margin: 0; flex: none; }
.snd b { font-size: 13px; }
.snd span { font-size: 11px; color: var(--text-3); }
.snd-try { margin-left: auto; background: none; border: 1px solid var(--border);
           border-radius: var(--radius-pill); color: var(--text-2); font: inherit;
           font-size: 11px; padding: 2px 10px; cursor: pointer; }
.snd-try:hover { color: var(--text); border-color: var(--border-strong); }
.snd-save { align-self: center; }
.snd-up { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
          margin-top: 12px; padding-top: 12px;
          border-top: 1px solid var(--border); }
.snd-up .hint { flex: 1 1 260px; margin: 0; }
.snd-file { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.snd-file input { width: auto; }
.snd-drop { margin-top: 8px; }

/* --- Recruitment ----------------------------------------------------------- */
.rq { padding: 0; }
.rq-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           padding: 13px 18px; text-decoration: none; color: inherit; }
.rq-head:hover { background: var(--row-hover); }
.rq-name b { display: block; font-size: 14px; }
.rq-name .dim { font-size: 11.5px; }
.rq-figs { margin-left: auto; display: flex; align-items: center; gap: 16px;
           flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); }
.rq-figs b { color: var(--text); font-variant-numeric: tabular-nums; }
.rq-figs .late { color: var(--red); }
.rq-about p { margin: 0 0 6px; font-size: 13px; color: var(--text-2);
              max-width: 80ch; }
.rq-about p:last-child { margin-bottom: 0; }
/* These were hand-rolled flex rows: fields of different heights, so labels and
   boxes landed at different levels and the button floated mid-row. They use
   the grid the rest of the app already has - every column the same width,
   every box bottom-aligned, the button on its own line. */
.rq-new, .lv-file, .pf-training {
  display: grid; gap: 14px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rq-new .field, .lv-file .field, .pf-training .field {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.rq-new .field.wide, .lv-file .field.wide { grid-column: 1 / -1; }
.rq-new label, .lv-file label, .pf-training label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
/* Every control in these forms styled the same way, by element rather than by
   class. `.cell` has no styling of its own - it is only dressed inside the
   sheets - so an <input type="email"> matched the app's base rule and an
   <input> with no type matched nothing and fell back to the browser's own
   box. One tall field in a row of short ones, every time. */
.rq-new input, .rq-new select, .rq-new textarea,
.lv-file input, .lv-file select, .lv-file textarea,
.pf-training input, .pf-training select {
  font: inherit; font-size: 14.5px; padding: 9px 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); width: 100%; box-sizing: border-box;
}
/* A file input is taller than a text box; boxed like one, it stops throwing
   the row out. */
.rq-new input[type=file], .pf-training input[type=file] {
  font-size: 12.5px; padding: 7px 10px; border-color: var(--border);
}
/* The button gets its own row rather than sitting in the middle of the grid
   wherever it happened to land. */
.rq-new > .btn, .lv-file > .btn, .pf-training > .btn {
  grid-column: 1 / -1; justify-self: start;
}

/* The pipeline: one column per stage, scrolling sideways rather than
   squeezing six columns onto a laptop. */
/* All six stages across, equal width, no sideways scroll above tablet. Below
   that it scrolls, with the columns at a readable minimum. */
.pipe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        gap: 8px; padding: 2px 2px 12px; align-items: start; }
.pipe-col { background: var(--surface-2); min-width: 0;
            border: 1px solid var(--border); border-radius: var(--radius);
            padding: 9px; }
@media (max-width: 900px) {
  .pipe { display: flex; overflow-x: auto; }
  .pipe-col { flex: 0 0 190px; }
}
.pipe-head { display: flex; align-items: baseline; gap: 8px;
             font-size: 10px; font-weight: 700; letter-spacing: .04em;
             text-transform: uppercase; color: var(--text-3);
             margin-bottom: 8px; min-width: 0; }
.pipe-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The count was butting straight onto the label - "ASSESSMENT0" - once the
   column got narrow. */
.pipe-head span { margin-left: auto; flex: none; }
.pipe-head span { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cand { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius-sm); padding: 10px 11px; margin-bottom: 8px; }
.cand b { display: block; font-size: 13px; }
.cand .dim { display: block; font-size: 11px; }
.cand-src { display: inline-block; font-size: 9.5px; letter-spacing: .04em;
            text-transform: uppercase; color: var(--text-3);
            border: 1px solid var(--border); border-radius: var(--radius-pill);
            padding: 0 7px; margin-top: 5px; }
.cand-cv { font-size: 11px; margin-left: 6px; color: var(--blue); }
.cand-note { margin: 6px 0 0; font-size: 11.5px; color: var(--text-2); }
.cand-move { margin-top: 8px; }
.cand-move .status-select { width: 100%; font-size: 11.5px; height: 30px; }
.cand-hire summary { cursor: pointer; font-size: 11.5px; color: var(--text-3);
                     margin-top: 7px; }
.cand-hire summary:hover { color: var(--text); }
.cand-hire label { display: grid; gap: 3px; font-size: 10.5px;
                   color: var(--text-3); margin-top: 7px; }
.cand-hire .cell, .cand-hire .status-select { width: 100%; }
.cand-hire .btn { margin-top: 9px; }

/* The name and the email sat side by side with nothing between them and read
   as one word. */
.pool-mail { display: block; font-size: 11.5px; margin-top: 2px; }

.cand-role { display: block; font-size: 10.5px; color: var(--yellow-deep);
             margin-top: 2px; }
.cand-acts { display: flex; align-items: center; gap: 8px; margin-top: 8px;
             flex-wrap: wrap; }
.cand-open { font-size: 11px; color: var(--text-3); text-decoration: none; }
.cand-open:hover { color: var(--text); }
.pool-attach { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pool-attach .status-select { width: auto; min-width: 150px; font-size: 12px; }

/* A reason belongs under the thing it explains, not trailing after it as one
   long sentence. */
.why-line { display: block; font-size: 11.5px; margin-top: 3px; }

.tbl-people .c-stat { width: 128px; }

/* The key for the access chips. Sits directly above the rows it explains. */
.acc-key { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 18px;
           border-bottom: 1px solid var(--border); background: var(--surface-2);
           font-size: 11.5px; color: var(--text-3); }
.acc-key > span { display: inline-flex; align-items: center; gap: 7px; }

/* What somebody cannot see. Deliberately quiet - it is the absence, not a
   warning - but present, so a short row reads as "less access" rather than
   "fewer tabs exist". */
.acc-chip.shut { background: none; border-style: dotted;
                 border-color: var(--border-strong); color: var(--text-3); }

.acc-key > span b { color: var(--text); font-size: 13px; margin-right: 3px;
                    font-variant-numeric: tabular-nums; }
.acc-all { display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
           cursor: pointer; color: var(--text-2); }
.acc-all input { width: auto; margin: 0; }
/* Somebody with nothing given to them: said in words rather than left blank,
   so the row reads as "nothing was decided here" instead of looking unfinished. */
.acc-chip.plain { background: none; border-style: dashed; color: var(--text-3);
                  font-weight: 500; }

/* A form somebody opens now and then, folded away until they want it. The
   page is for reading; adding is the occasional thing, and it was the biggest
   block on every screen. */
.foldform { margin-bottom: 12px; }
.foldform > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: 7px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.foldform > summary::-webkit-details-marker { display: none; }
.foldform > summary:hover { color: var(--text); border-color: var(--yellow);
                            background: var(--row-hover); }
.foldform[open] > summary { margin-bottom: 10px; border-color: var(--yellow);
                            color: var(--text); }
.foldform .card { margin-bottom: 0; }

/* An empty stage keeps its place in the line but not its width: six full-width
   columns, half of them empty, is most of why this scrolled sideways. */
.pipe-col.empty { opacity: .62; }
.pipe-card .pipe { padding: 12px 14px 14px; }
@media (max-width: 900px) { .pipe-card .pipe { padding: 10px 12px 12px; } }

/* The card: a name, the role, and the facts about them on one line. It was six
   stacked lines, two of which were controls dressed as text. */
.cand { display: block; position: relative; text-decoration: none;
        color: inherit; }
.cand:hover { border-color: var(--yellow); }
.cand b { font-size: 13px; }
.cand-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cand-tag { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
            color: var(--text-3); border: 1px solid var(--border);
            border-radius: var(--radius-pill); padding: 0 7px; }
.cand-side { position: absolute; top: 8px; right: 8px; }
.cand-x { background: none; border: 0; cursor: pointer; color: var(--text-3);
          font-size: 15px; line-height: 1; padding: 2px 4px;
          border-radius: var(--radius-sm); }
.cand-x:hover { color: var(--text); background: var(--row-hover); }
.pipe-col .cand { margin-bottom: 8px; }

/* A fold that lives inside a card rather than standing on its own. */
.foldform.inner { margin: 0; border-top: 1px solid var(--border); }
.foldform.inner > summary { border: 0; border-radius: 0; background: none;
                            width: 100%; padding: 11px 18px; }
.foldform.inner > summary:hover { background: var(--row-hover); }
.foldform.inner[open] > summary { margin-bottom: 0;
                                  border-bottom: 1px solid var(--border); }

/* A tag that is also a link. Same shape as the ones on the pipeline cards, so
   a CV reads the same wherever it appears. */
a.cand-tag.link { text-decoration: none; color: var(--text-2); }
a.cand-tag.link:hover, a.cand-tag.link:focus-visible {
  color: var(--text); border-color: var(--border-strong);
  background: var(--row-hover);
}

/* --- Photos on a company announcement ---------------------------------
   The layout follows the count. One picture is usually a poster or a memo
   and wants the width; a pair reads as a pair; three or more tile. Every
   tile is the same shape so a portrait phone photo next to a landscape one
   does not make the row ragged - the picture is covered into the tile and
   shown whole in the lightbox. */
.notice-shots { display: grid; gap: 8px; margin: 14px 0 2px; }
.notice-shots.n1 { grid-template-columns: 1fr; }
.notice-shots.n2 { grid-template-columns: 1fr 1fr; }
.notice-shots.n3 { grid-template-columns: repeat(3, 1fr); }
.notice-shots.n4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
  .notice-shots.n3, .notice-shots.n4 { grid-template-columns: 1fr 1fr; }
}
.notice-shots .shot {
  padding: 0; border: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
  display: block; width: 100%;
}
.notice-shots .shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* A lone picture is shown whole rather than cropped: it is usually the thing
   being announced, and a cropped memo is a memo you cannot read. */
.notice-shots.n1 .shot { background: var(--surface-2); cursor: zoom-in; }
.notice-shots.n1 .shot img { height: auto; max-height: 420px;
                             object-fit: contain; }
.notice-shots.n2 .shot img { height: 230px; }
.notice-shots.n3 .shot img, .notice-shots.n4 .shot img { height: 150px; }
.notice-shots .shot:hover { border-color: var(--yellow); }

/* The lightbox. One element reused for every photo on the page. */
.shotbox { position: fixed; inset: 0; z-index: 1200; display: none;
           background: rgba(0,0,0,.82); cursor: zoom-out;
           align-items: center; justify-content: center; padding: 28px; }
.shotbox.on { display: flex; }
.shotbox img { max-width: 100%; max-height: 100%;
               border-radius: var(--radius); }
.shotbox-x { position: absolute; top: 16px; right: 20px; background: none;
             border: 0; color: #fff; font-size: 30px; line-height: 1;
             cursor: pointer; padding: 4px 10px; }

/* What the picker shows once files are chosen, so somebody knows the upload
   took before they post. */
.shot-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shot-picked img { width: 58px; height: 58px; object-fit: cover;
                   border-radius: var(--radius-sm);
                   border: 1px solid var(--border); }
.shot-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.shot-drop { display: block; font-size: 11.5px; color: var(--text-2);
             text-align: center; }
.shot-drop img { width: 84px; height: 84px; object-fit: cover; display: block;
                 border-radius: var(--radius-sm);
                 border: 1px solid var(--border); margin-bottom: 4px; }
.shot-drop span { display: inline-flex; align-items: center; gap: 4px;
                  cursor: pointer; }

/* --- Dragging a row to a new place ------------------------------------
   The grip is the only handle. These rows are made of textareas and selects;
   a row draggable from anywhere is a row whose text you cannot select. */
.col-agrip { width: 26px; }
.row-grip-cell { width: 26px; padding-left: 6px !important; padding-right: 0;
                 text-align: center; vertical-align: middle; }
.row-grip { display: inline-block; cursor: grab; user-select: none;
            color: var(--text-3); font-size: 11px; letter-spacing: -2px;
            line-height: 1; padding: 6px 2px; border-radius: var(--radius-sm); }
.row-grip:hover { color: var(--text); background: var(--row-hover); }
.row-grip:active { cursor: grabbing; }
tr.is-dragging { opacity: .45; }
tr.is-dragging .cell { border-color: var(--yellow); }
/* The subject column lost its gutter to the grip sitting in front of it. */
.mc-table td.mc-subject, .mc-table th.mc-subject { padding-left: 4px; }
@media (hover: none) {
  /* Touch devices do not fire HTML5 drag events, so the grip would be a
     control that does nothing. Better absent than broken. */
  .row-grip { display: none; }
}

/* --- A candidate card that opens the person ---------------------------
   It was a link to the role, so clicking somebody's name landed you on a
   different screen entirely. Now it is a button, which needs the anchor's
   styling undone. */
button.cand { width: 100%; text-align: left; font: inherit; cursor: pointer;
              background: var(--surface); }
button.cand:focus-visible { outline: 2px solid var(--yellow);
                            outline-offset: 1px; }

/* The facts inside that dialog: label above value, so a long portfolio URL
   or a wrapped note does not push its own label off the line. */
.cand-facts { margin: 0; display: grid; grid-template-columns: 136px 1fr;
              gap: 8px 16px; align-items: baseline; }
.cand-facts dt { font-size: 10.5px; letter-spacing: .04em;
                 text-transform: uppercase; color: var(--text-3); margin: 0; }
.cand-facts dd { margin: 0; font-size: 13.5px; color: var(--text);
                 min-width: 0; overflow-wrap: anywhere; }
.cand-facts dd a { color: var(--text); }
.cand-facts dd a:hover { color: var(--yellow); }
@media (max-width: 560px) {
  .cand-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .cand-facts dd { margin-bottom: 8px; }
}

/* --- The people under a role on the dashboard -------------------------
   The row beneath each role, holding everybody being considered for it. It
   reads as a continuation of the row above, so no top border and a quieter
   ground than the row itself. */
tr.rq-people > td { border-top: 0; padding-top: 0; padding-bottom: 12px; }
.rq-people-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-person { display: inline-flex; align-items: baseline; gap: 8px;
             font: inherit; cursor: pointer; text-align: left;
             background: var(--surface-2); color: var(--text);
             border: 1px solid var(--border); border-radius: var(--radius-pill);
             padding: 5px 13px; }
.rq-person b { font-size: 12.5px; font-weight: 600; }
.rq-person:hover { border-color: var(--yellow); background: var(--row-hover); }
.rq-person:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.rq-person-stage { font-size: 9.5px; letter-spacing: .04em;
                   text-transform: uppercase; color: var(--text-3); }