/* =====================================================================
   Greenhouse Foundations Tracker — brand stylesheet
   Greenhouse Design System: Green 700 ink on Cream, Chapeau display,
   Pangea/Nunito body, Chapeau Mono figures.
   The retired olive #585828 / cream #F8F8E8 palette is not used.
   ===================================================================== */

/* Chapeau is licensed; served from the Greenhouse asset host. Nunito is the
   documented free fallback for body copy. Both stacks degrade gracefully. */
@font-face {
  font-family: 'Chapeau';
  src: url('https://assets.greenhouse.ca/fonts/Chapeau-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chapeau';
  src: url('https://assets.greenhouse.ca/fonts/Chapeau-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chapeau';
  src: url('https://assets.greenhouse.ca/fonts/Chapeau-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chapeau Mono';
  src: url('https://assets.greenhouse.ca/fonts/ChapeauMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --green700: #43523B;
  --deepgreen: #2E5628;
  --cream: #FCF8ED;
  --green200: #CED6C4;
  --green500: #7A8A6E;
  --chloro: #BBFF5C;
  --clay: #A8452C;
  --amber: #B8802A;
  --slate: #3F6B72;
  --surface: #FFFFFF;

  --font-display: 'Chapeau', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Pangea', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Chapeau Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  --radius: 12px;
  --hairline: 1px solid var(--green200);
  --shell: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--green700);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 30px; font-weight: 300; }
h2 { font-size: 20px; font-weight: 500; }
h3 { font-size: 17px; font-weight: 500; }

a { color: var(--deepgreen); text-decoration: none; }
a:hover { text-decoration: underline; }

.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Header --------------------------------------------------------- */
.masthead {
  background: var(--green700);
  color: var(--cream);
  padding: 14px 24px;
}
.masthead-inner {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display); font-weight: 400;
  font-size: 17px; color: var(--cream); display: flex; align-items: center; gap: 9px;
}
.wordmark:hover { text-decoration: none; }
.masthead-spacer { flex: 1; }
.masthead-actions { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.masthead-user { color: var(--green200); }

.btn-files {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--cream);
  border: 1px solid rgba(252,248,237,.35);
  padding: 6px 13px; border-radius: 8px; font-size: 13px; font-weight: 500;
}
.btn-files:hover { background: rgba(252,248,237,.1); text-decoration: none; }

/* --- Nav ------------------------------------------------------------ */
.nav { background: var(--surface); border-bottom: var(--hairline); }
.nav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 4px; overflow-x: auto;
}
.nav a {
  padding: 12px 14px; font-size: 14px; font-weight: 500;
  color: var(--green500); border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--green700); text-decoration: none; }
.nav a.on { color: var(--green700); border-bottom-color: var(--deepgreen); }

/* --- Layout --------------------------------------------------------- */
main { max-width: var(--shell); margin: 0 auto; padding: 26px 24px 64px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { color: var(--green500); font-size: 14px; }
.grid { display: grid; gap: 16px; }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* --- Cards ---------------------------------------------------------- */
.card {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius); padding: 18px 20px;
}
.card-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: -2px 0 14px; padding-bottom: 10px; border-bottom: var(--hairline);
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .count { margin-left: auto; font-size: 13px; color: var(--green500); }

/* --- Stat tiles ----------------------------------------------------- */
.tile .label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green500);
}
/* A tile label that links somewhere still reads as a label. */
.tile .label a { color: inherit; }
.tile .label a:hover { color: var(--green700); text-decoration: underline; }
.tile .value {
  font-family: var(--font-mono); font-size: 38px; font-weight: 400;
  line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.tile .note { font-size: 12.5px; color: var(--green500); margin-top: 3px; }
.tile.alert .value { color: var(--clay); }
.tile.warn  .value { color: var(--amber); }

/* One deliberate Chlorophyll highlight per view — the countdown only. */
.tile.headline {
  background: var(--green700); border-color: var(--green700); color: var(--cream);
}
.tile.headline .label { color: var(--green200); }
.tile.headline .value { color: var(--chloro); }
.tile.headline .note  { color: var(--green200); }

/* --- Progress ------------------------------------------------------- */
.bar { height: 7px; background: var(--green200); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--deepgreen); border-radius: 99px; }

/* --- Tables --------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: var(--hairline); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green500); padding: 11px 12px; border-bottom: var(--hairline);
}
thead th a { color: inherit; }
tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(206,214,196,.55); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(206,214,196,.18); }
td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.is-overdue td.due { color: var(--clay); font-weight: 600; }
tr.is-done { color: var(--green500); }
tr.is-done .task-name { text-decoration: line-through; text-decoration-color: var(--green200); }

/* --- Chips / badges -------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.ws-chip { color: #FFFFFF; }
.chip.hollow { background: transparent; border-color: var(--green200); color: var(--green500); }
.chip.clay  { background: rgba(168,69,44,.12);  color: var(--clay);  border-color: rgba(168,69,44,.3); }
.chip.amber { background: rgba(184,128,42,.13); color: var(--amber); border-color: rgba(184,128,42,.3); }
.chip.green { background: rgba(46,86,40,.1);    color: var(--deepgreen); border-color: rgba(46,86,40,.25); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* --- Forms ---------------------------------------------------------- */
select, input[type=text], input[type=search], input[type=email], input[type=date],
input[type=url], textarea {
  font-family: var(--font-body); font-size: 14px; color: var(--green700);
  background: var(--surface); border: var(--hairline);
  border-radius: 8px; padding: 7px 10px; max-width: 100%;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--deepgreen); outline-offset: -1px;
}
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--green500); }

.status-select { font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 7px; cursor: pointer; }
.status-select[data-status=not_started] { color: var(--green500); }
.status-select[data-status=in_progress] { color: var(--deepgreen); }
.status-select[data-status=blocked]     { color: var(--clay); border-color: rgba(168,69,44,.4); }
.status-select[data-status=deferred]    { color: var(--slate); border-color: rgba(63,107,114,.4); }
.status-select[data-status=done]        { color: var(--green700); background: rgba(206,214,196,.35); }
.status-select[data-status=at_risk]     { color: var(--amber); border-color: rgba(184,128,42,.4); }
/* Open questions carry their own three states. */
.status-select[data-status=open]     { color: var(--green500); }
.status-select[data-status=awaiting] { color: var(--amber); border-color: rgba(184,128,42,.4); }
.status-select[data-status=answered] { color: var(--green700); background: rgba(206,214,196,.35); }

/* The board's department column: a dropdown that has to sit in a table row
   without shouting louder than the task beside it. */
.dept-select { font-size: 13px; padding: 5px 8px; border-radius: 7px; width: 100%; }
.who-input { font-size: 13px; padding: 5px 8px; border-radius: 7px; width: 100%; }

/* The status key: counts always visible, definitions one click behind. */
.status-key { margin-bottom: 12px; }
.status-key > summary { cursor: pointer; list-style: none; }
.status-key > summary::-webkit-details-marker { display: none; }
.status-key-hint {
  font-size: 12px; color: var(--green500); border-bottom: 1px dotted var(--green200);
}
.status-key[open] .status-key-hint { color: var(--green700); }
.status-key dl {
  margin: 10px 0 0; padding: 12px 14px; display: grid; gap: 4px 14px;
  grid-template-columns: max-content 1fr; align-items: baseline;
  background: var(--surface); border: var(--hairline); border-radius: var(--radius);
}
.status-key dt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.status-key dd { margin: 0; font-size: 13px; color: var(--green500); }
@media (max-width: 700px) {
  .status-key dl { grid-template-columns: 1fr; }
  .status-key dd { margin-bottom: 6px; }
}

.priority-select { font-size: 13px; padding: 5px 8px; border-radius: 7px; }
.priority-select[data-priority=High]   { color: var(--clay); font-weight: 600; border-color: rgba(168,69,44,.4); }
.priority-select[data-priority=Medium] { color: var(--amber); }
.priority-select[data-priority=Low]    { color: var(--green500); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  background: var(--green700); color: var(--cream);
  border: 1px solid var(--green700); border-radius: 8px;
  padding: 8px 16px; cursor: pointer;
}
.btn:hover { background: var(--deepgreen); border-color: var(--deepgreen); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--green700); border-color: var(--green200); }
.btn.ghost:hover { background: rgba(206,214,196,.3); color: var(--green700); }
.btn.danger { background: transparent; color: var(--clay); border-color: rgba(168,69,44,.4); }
.btn.danger:hover { background: rgba(168,69,44,.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.small { padding: 4px 10px; font-size: 12.5px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }

/* A filter that takes several values: a dropdown of tick boxes dressed as a
   select, so the row of filters still reads as one row. */
.multi-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--green500); }
.multi { position: relative; }
.multi > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  min-width: 120px; max-width: 260px; box-sizing: border-box;
  font-family: var(--font-body); font-size: 14px; color: var(--green700);
  background: var(--surface); border: var(--hairline); border-radius: 8px; padding: 7px 10px;
}
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: "▾"; margin-left: auto; color: var(--green500); font-size: 12px; }
.multi[open] > summary { outline: 2px solid var(--deepgreen); outline-offset: -1px; }
.multi-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: 360px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: var(--hairline); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 6px;
}
.multi-option {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: 13.5px; color: var(--green700); cursor: pointer; white-space: nowrap;
}
.multi-option:hover { background: rgba(206,214,196,.35); }
.multi-option input { margin: 0; accent-color: var(--deepgreen); }
.multi-clear {
  display: block; width: 100%; margin-top: 4px; padding: 6px 8px; text-align: left;
  font: inherit; font-size: 12.5px; color: var(--green500);
  background: none; border: 0; border-top: var(--hairline); cursor: pointer;
}
.multi-clear:hover { color: var(--green700); }

/* --- Open questions ------------------------------------------------- */
/* The intake form: a wide question box with the metadata wrapping beside it. */
.q-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; align-items: end; }
.q-form .q-wide { grid-column: 1 / -1; }
.q-form input, .q-form select, .q-form textarea { width: 100%; box-sizing: border-box; }
.q-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 2px; }
.q-form-actions .btn { white-space: nowrap; }

/* A heading is the sort control. The caret only appears on the column being
   sorted, so nothing competes with the headings that are not. */
.q-table thead th a.q-sort {
  color: inherit; display: inline-flex; align-items: baseline; gap: 3px;
}
.q-table thead th a.q-sort:hover { color: var(--green700); text-decoration: none; }
.q-table thead th a.q-sort.on { color: var(--green700); }
.q-table .q-caret { font-size: 10px; line-height: 1; color: var(--deepgreen); }

/* The filter row under the headings: one select per column, the heading
   itself acting as its label. An active filter is inked so the reason a
   short list is short is visible at a glance. */
.q-table tr.q-filters th {
  padding: 0 7px 9px; border-bottom: var(--hairline); vertical-align: top;
  /* The heading row upper-cases and letter-spaces its text; the controls
     under it are ordinary UI and should read as such. */
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.q-table .q-filter {
  width: 100%; box-sizing: border-box; font-size: 12.5px;
  padding: 4px 6px; border-radius: 7px; color: var(--green500);
}
.q-table .q-filter[data-on], .q-table select.q-filter:not([value=""]):focus { color: var(--green700); }
.q-table .q-filter[data-on] { border-color: var(--deepgreen); font-weight: 600; }
.q-table .q-filter-none { color: var(--green200); text-align: center; }
/* The gate's own name, written out under the code it belongs to. */
.q-table .gate-name { color: var(--green700); line-height: 1.3; margin-top: 3px; }
.q-table tr.q-filters .btn.small { white-space: nowrap; }

/* Twelve editable columns. Fixed layout so each one keeps the width it is
   given instead of the browser squeezing the selects down to one letter;
   min-width makes .table-wrap scroll on a narrow screen rather than crush. */
.q-table { table-layout: fixed; min-width: 1240px; }
.q-table th, .q-table td { box-sizing: border-box; padding: 9px 7px; }
.q-table td { vertical-align: top; }
.q-table td input, .q-table td select, .q-table td textarea {
  box-sizing: border-box; width: 100%; font-size: 13px; padding: 5px 7px;
}
.q-table td textarea { min-height: 56px; resize: vertical; }
/* The question is the column people read, so it gets the room to be read. */
.q-table td.q-question textarea { min-height: 92px; }
.q-table .q-link { margin-top: 5px; border-top: var(--hairline); padding-top: 5px; }
.q-table .support-link { display: inline-block; margin-top: 3px; }
/* The class beats the browser's own [hidden] rule, so restate it. */
.q-table .support-link[hidden] { display: none; }
.q-table .q-code { display: flex; align-items: center; gap: 6px; }
.q-table .remove-question { padding: 1px 7px; line-height: 1.4; }

/* --- Open questions v2 ---------------------------------------------- */
/* Fourteen columns now: the health dot, the area and the target date joined
   the eleven that were here. Wider, and still scrolling rather than crushing. */
.q-table { min-width: 1620px; }

/* The health dot sits at the left of the row, where the eye lands first.
   Colour is never the only carrier — the select beneath it says the word. */
.rag-cell { display: flex; align-items: center; gap: 6px; }
.rag-dot { width: 10px; height: 10px; border: 1px solid rgba(67,82,59,.25); }
.rag-dot.rag-none { background: transparent; border-style: dashed; }
.rag-select { font-size: 12px; padding: 4px 5px; border-radius: 7px; min-width: 0; }
.rag-select[data-rag=green] { color: var(--deepgreen); }
.rag-select[data-rag=amber] { color: var(--amber); border-color: rgba(184,128,42,.4); }
.rag-select[data-rag=red]   { color: var(--clay); border-color: rgba(168,69,44,.4); font-weight: 600; }
.rag-select[data-rag=blue]  { color: var(--slate); }
/* The suggestion is one short offer on one line: a column 80px wide has no
   room for a sentence, and a four-line one reads as an error. */
.rag-suggest { margin-top: 4px; white-space: nowrap; }

/* A button that reads as a link: an offer, not an action already taken. */
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--clay); text-decoration: underline; text-underline-offset: 2px;
  font-family: var(--font-body); font-size: 12px;
}
.link-btn:hover { color: var(--green700); }

/* Blocking questions sit above the rest under their own band, so no sort on
   another column can bury what is stopping somebody working today. */
.q-table tr.q-band td {
  background: rgba(206,214,196,.35); font-size: 12px; color: var(--green700);
  padding: 7px 10px; border-bottom: var(--hairline);
}
.q-table tr.q-band.is-blocking-band td {
  background: rgba(168,69,44,.08); color: var(--clay);
}
.q-table tr.is-blocking td:first-child { box-shadow: inset 3px 0 0 var(--clay); }
.q-table tr.is-overdue td.due input { color: var(--clay); font-weight: 600; border-color: rgba(168,69,44,.4); }

/* Chased by: the picker, then which side of the project the owner is on. */
.owner-pick { display: flex; flex-direction: column; gap: 4px; }
.owner-select { font-size: 12.5px; padding: 5px 6px; border-radius: 7px; width: 100%; }
.owner-other { font-size: 12.5px; padding: 5px 6px; }
/* The organisation reads as a chip and edits as a select — the same control
   doing both, rather than a chip beside an editor saying the same thing. */
.org-select {
  width: 100%; margin-top: 4px; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px; color: var(--green500);
}
.org-select[data-org=""] { font-weight: 400; }
.org-select:not([data-org=""]) { color: var(--green700); background: rgba(206,214,196,.3); }

/* The row drawer: everything about a question that does not deserve a column
   on a table this wide. Same <details> idiom as the board's notes panel. */
.q-drawer { margin-top: 6px; }
.q-drawer .drawer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 10px; margin: 8px 0;
}
.q-drawer .drawer-grid input { width: 100%; box-sizing: border-box; }
.q-drawer .drawer-tasks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.q-drawer .drawer-audit { margin-top: 10px; border-top: var(--hairline); padding-top: 6px; }
.q-drawer .adopt-prompt { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* The label is one flex item, not one per word. Without the span the text is
   an anonymous flex item that the drawer's table cell squeezes to a word a
   line, which reads as a fault rather than as a control. */
.checkline {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 13px; color: var(--green700); cursor: pointer; line-height: 1.35;
}
.checkline input { accent-color: var(--deepgreen); flex: none; }
.checkline span { min-width: 0; }
/* Both the intake grid and the register's cells set every input to 100%
   width. Applied to a checkbox that makes a 280px invisible box with the
   tick drawn in the middle of it and the label shoved out of the column.
   A checkbox is the size of a checkbox. */
.q-form .checkline input[type="checkbox"],
.q-table td .checkline input[type="checkbox"] { width: auto; flex: none; margin: 0; }

.task-chip { text-decoration: none; }
.task-chip:hover { border-color: var(--green500); text-decoration: none; }
.q-origin { margin-left: 6px; font-size: 11px; text-decoration: none; }

/* --- The task-create drawer ----------------------------------------- */
/* One create form for the whole app: a task raised from a question is the
   same task, with the same fields, as one raised on the board.

   Its own class rather than `.drawer`, which Task Register v3.0's schedule
   drawer owns — the board carries both and they are different things. */
dialog.create-drawer {
  width: min(760px, calc(100vw - 32px)); max-height: 88vh; overflow: auto;
  border: var(--hairline); border-radius: var(--radius);
  background: var(--surface); color: var(--green700); padding: 20px 22px;
}
dialog.create-drawer::backdrop { background: rgba(67,82,59,.42); }
.create-drawer .drawer-head {
  display: flex; align-items: center; gap: 12px;
  /* v3.0's drawer head is a bar inside a sliding panel; this one is the top
     of a dialog, so it takes neither the border nor the padding. */
  padding: 0; margin-bottom: 4px; border-bottom: 0; background: none;
}
.create-drawer .drawer-head h2 { margin: 0; font-size: 17px; }
.create-drawer .drawer-source { margin: 0 0 12px; }
/* What a field does when it is left alone, said quietly under it. */
.create-drawer .field-hint { font-size: 11px; color: var(--green500); }

/* --- Decisions ------------------------------------------------------- */
.decision-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px; margin-top: 10px;
}
.decision-meta input { width: 100%; box-sizing: border-box; }
/* An unwritten impact or recommendation is the point of the page, so it
   reads as a gap to fill rather than as nothing at all. */
.empty-prompt {
  margin-top: 5px; padding-left: 9px; border-left: 2px dashed var(--green200);
  font-style: italic;
}

/* --- Calendar ------------------------------------------------------- */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green500); padding: 8px 6px; text-align: left; border-bottom: var(--hairline);
}
.cal td {
  border: 1px solid rgba(206,214,196,.6); vertical-align: top;
  height: 118px; padding: 6px; width: 14.28%;
}
.cal td.empty { background: rgba(206,214,196,.14); }
.cal td.today { outline: 2px solid var(--deepgreen); outline-offset: -2px; }
.cal .daynum { font-family: var(--font-mono); font-size: 12px; color: var(--green500); }
.cal td.today .daynum { color: var(--deepgreen); font-weight: 700; }
.cal .ev {
  display: block; font-size: 11.5px; line-height: 1.3; margin-top: 3px;
  padding: 2px 5px; border-radius: 5px; border-left: 3px solid var(--green500);
  background: rgba(206,214,196,.3); color: var(--green700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.cal .ev.gate { background: var(--green700); color: var(--cream); border-left-color: var(--chloro); font-weight: 600; }
.cal .ev.done { opacity: .5; text-decoration: line-through; }
.cal .more { font-size: 11px; color: var(--green500); margin-top: 3px; display: block; }

/* --- Timeline / Gantt ----------------------------------------------- */
.gantt { position: relative; }
.gantt-row { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: center; margin-bottom: 9px; }
.gantt-label { font-size: 13px; }
.gantt-label .code { font-family: var(--font-mono); color: var(--green500); margin-right: 6px; }
.gantt-track { position: relative; height: 26px; background: rgba(206,214,196,.3); border-radius: 6px; }
.gantt-bar {
  position: absolute; top: 0; height: 100%; border-radius: 6px;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11.5px; color: #FFFFFF; overflow: hidden; white-space: nowrap;
}
.gantt-bar .fill { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.28); border-radius: 6px; }
.gantt-bar span.txt { position: relative; }
.gantt-axis { position: relative; height: 20px; margin-left: 274px; border-top: var(--hairline); }
.gantt-tick { position: absolute; font-size: 11px; color: var(--green500); transform: translateX(-50%); padding-top: 3px; }
.gantt-marker { position: absolute; top: 0; bottom: 0; width: 2px; z-index: 3; }
.gantt-marker.today { background: var(--deepgreen); }
.gantt-marker.cutover { background: var(--clay); }
.gantt-gate {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--green700); color: var(--cream);
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}

/* --- Misc ----------------------------------------------------------- */
.empty-state { padding: 26px; text-align: center; color: var(--green500); font-size: 14px; }
.notice { border: var(--hairline); border-left: 3px solid var(--deepgreen); border-radius: 8px; padding: 12px 15px; background: var(--surface); font-size: 14px; }
.notice.bad  { border-left-color: var(--clay);  color: var(--clay); }
.notice.good { border-left-color: var(--deepgreen); }
.notice.warn { border-left-color: var(--amber); }
.muted { color: var(--green500); }
.clay-text { color: var(--clay); font-weight: 600; }
.small { font-size: 12.5px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.expand { cursor: pointer; }
details.detail summary { cursor: pointer; font-size: 13px; color: var(--green500); }
details.detail summary:hover { color: var(--green700); }
details.detail > div { padding-top: 8px; font-size: 13.5px; }
.detail-label {
  display: block;
  margin: 8px 0 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--green500);
}
.detail-label:first-child { margin-top: 0; }
.folder-link { display: inline-block; margin-top: 8px; font-size: 12.5px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--green700); color: var(--cream); padding: 10px 20px;
  border-radius: 8px; font-size: 14px; z-index: 99; transition: transform .22s ease;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--clay); }

/* --- Login ---------------------------------------------------------- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { max-width: 420px; width: 100%; text-align: center; padding: 38px 34px; }
/* The logo is the login page's heading, so h1 carries no type of its own. */
.login-card h1.login-mark { margin: 0 0 14px; font-size: 0; line-height: 0; }

/* Brand logo. The lockup is ~2.44:1, so it is sized on width and lets height
   follow. The masthead is green700 and takes the reversed (cream) file; the
   login card is light and takes the standard Green 700 one. */
.login-logo {
  display: block; margin: 0 auto;
  width: 250px; max-width: 100%; height: auto;
}

/* The lockup stands alone in the masthead — no product name beside it. */
.wordmark-logo { display: block; width: 158px; height: auto; }

@media (max-width: 760px) {
  .login-logo { width: 210px; }
  .wordmark-logo { width: 124px; }
}

@media (max-width: 760px) {
  .gantt-row { grid-template-columns: 1fr; gap: 4px; }
  .gantt-axis { margin-left: 0; }
  main { padding: 18px 14px 48px; }
  .cal td { height: 88px; }
}

@media print {
  .masthead, .nav, .filters, .btn { display: none !important; }
  body { background: #FFFFFF; }
}

/* --- Duration views: calendar bars, week grid, task Gantt ------------
   Start dates turn a deadline into a span, so a task is a bar you can see
   coming rather than a dot that arrives. */
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.cal td.nonworking, .weekgrid-day.nonworking { background: rgba(206,214,196,.22); }
.cal .load {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--clay); line-height: 1;
}
.cal .ev.bar {
  width: 100%; text-align: left; border: 0; border-left: 3px solid var(--green500);
  font-family: inherit; appearance: none;
}
/* A day in the middle of a run is a bar, not a repeat of the title. */
.cal .ev.bar.mid { height: 9px; padding: 0; opacity: .65; border-left-style: dotted; }
.cal .ev.bar:hover { background: rgba(206,214,196,.55); }
.cal .ev .chev, .weekbar .chev { font-weight: 700; margin-right: 3px; }
.cal .ev .diamond { font-size: 9px; margin-left: 3px; }
.weekbar .diamond { font-size: 9px; margin-left: auto; padding-left: 6px; }

.weekgrid { display: block; }
.weekgrid-head, .weekgrid-row { display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
.weekgrid-head { margin-bottom: 8px; }
.weekgrid-row { margin-bottom: 6px; }
.weekgrid-label { font-size: 12.5px; color: var(--green700); padding-top: 4px; }
.weekgrid-label .num { margin-right: 6px; }
.weekgrid-track {
  position: relative; display: grid; grid-template-columns: repeat(7, 1fr);
  min-height: 26px; border-radius: 6px; overflow: hidden;
}
.weekgrid-day { border-right: 1px solid rgba(206,214,196,.5); min-height: 26px; padding: 4px 6px; }
.weekgrid-day:last-child { border-right: 0; }
.weekgrid-head .weekgrid-day.today { background: rgba(46,86,40,.09); }
.weekbar {
  position: absolute; top: 2px; bottom: 2px; border: 0; border-radius: 6px;
  display: flex; align-items: center; gap: 2px; padding: 0 8px;
  font-family: inherit; font-size: 11.5px; color: #FFFFFF; cursor: pointer;
  overflow: hidden; white-space: nowrap;
}
.weekbar.is-done { opacity: .5; }
.weekbar .txt { overflow: hidden; text-overflow: ellipsis; }

.gantt-group { border-top: var(--hairline); padding-top: 8px; margin-bottom: 8px; }
.gantt-group-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; font-size: 13px; padding: 4px 0; list-style: none;
}
.gantt-group-head::-webkit-details-marker { display: none; }
.gantt-group-head::before { content: '▸'; color: var(--green500); }
.gantt-group[open] .gantt-group-head::before { content: '▾'; }
.gantt-row.task-row { margin-bottom: 5px; }
.gantt-row.task-row .gantt-track { height: 20px; }
.gantt-bar.task-bar { cursor: grab; font-size: 10.5px; }
.gantt-bar.task-bar:focus-visible { outline: 2px solid var(--deepgreen); outline-offset: 2px; }
.gantt-bar.task-bar.dragging { cursor: grabbing; opacity: .75; }
.gantt-bar.task-bar.locked { box-shadow: inset 0 0 0 2px var(--clay); }
.gantt-bar.task-bar.flag-compressed { background-image:
  repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 4px, transparent 4px 8px); }
.gantt-row.is-critical .gantt-bar.task-bar { box-shadow: inset 0 0 0 2px var(--chloro); }
.gantt-row.is-selected .gantt-track { background: rgba(187,255,92,.25); }
.gantt-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; }

.swatch { width: 14px; height: 10px; display: inline-block; border-radius: 3px; border: 1px solid var(--green200); }
.swatch.nonworking { background: rgba(206,214,196,.5); }
.swatch.critical { background: var(--green500); box-shadow: inset 0 0 0 2px var(--chloro); }
.swatch.locked { background: var(--green500); box-shadow: inset 0 0 0 2px var(--clay); }

ul.tight { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.risk-strip { border-left: 3px solid var(--amber); }

/* --- Drawer and the cascade confirmation ---------------------------- */
.drawer {
  position: fixed; inset: 0; background: rgba(67,82,59,.35);
  display: flex; justify-content: flex-end; z-index: 60;
}
.drawer[hidden] { display: none; }
.drawer-panel {
  background: var(--surface); width: min(520px, 100%); height: 100%;
  display: flex; flex-direction: column; box-shadow: -8px 0 28px rgba(67,82,59,.18);
}
.drawer-panel.narrow { width: min(560px, 100%); height: auto; margin: auto; border-radius: var(--radius); }
.drawer-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: var(--hairline);
}
.drawer-head h2 { margin: 2px 0 0; font-size: 16px; }
.drawer-head .btn { margin-left: auto; }
.drawer-body { padding: 16px 18px; overflow-y: auto; font-size: 13.5px; }
.drawer-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 18px; border-top: var(--hairline);
}
.drawer-body dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0 0 16px; }
.drawer-body dt { color: var(--green500); font-size: 12.5px; }
.drawer-body dd { margin: 0; }
.drawer-body h3 { font-size: 13px; margin: 16px 0 6px; color: var(--green500);
                  text-transform: uppercase; letter-spacing: .06em; }
.drawer-body .move { border-bottom: 1px solid rgba(206,214,196,.5); padding: 6px 0; }
.drawer-body .conflict { color: var(--clay); font-weight: 600; }

.date-input {
  font-family: var(--font-mono); font-size: 12px; padding: 3px 5px;
  border: 1px solid var(--green200); border-radius: 6px; background: var(--surface);
  color: var(--green700); width: 100%;
}
.date-input[data-locked] { border-color: var(--clay); }
/* The board's way into a task's chain: a quiet pill on its own line under
   the deadline, so it never spills into the Owner column beside it. */
.deps-btn {
  display: flex; align-items: center; gap: 4px; margin-top: 5px;
  padding: 2px 8px; border: 1px solid var(--green200); border-radius: 999px;
  background: transparent; color: var(--green500); cursor: pointer;
  font-family: var(--font-body); font-size: 11px; line-height: 1.5;
  transition: background .15s, color .15s, border-color .15s;
}
.deps-btn span { font-size: 12px; line-height: 1; }
.deps-btn:hover, .deps-btn:focus-visible {
  background: rgba(46,86,40,.08); color: var(--deepgreen); border-color: rgba(46,86,40,.3);
}
.linky {
  background: none; border: 0; padding: 2px 0 0; font: inherit; font-size: 11px;
  color: var(--green500); text-decoration: underline; cursor: pointer;
}

/* --- Task Register v3.2: phase ----------------------------------------- */
/* A phase is a row treatment, not a swatch: Phase 1 is the default look,
   simplified is lighter, nice-to-have is grey, pending decision carries an
   amber outline, Phase 2 is muted and grouped at the bottom, Closed is
   hidden unless asked for. The chip carries the same treatment so the
   legend and the row read as one thing. */
.chip.phase { border-color: var(--green200); color: var(--green700); background: transparent; }
.chip.phase.phase-1 { background: rgba(46,86,40,.1); color: var(--deepgreen); border-color: rgba(46,86,40,.25); }
.chip.phase.phase-simplified { background: rgba(46,86,40,.05); color: var(--green500); border-color: rgba(46,86,40,.18); }
.chip.phase.phase-nice { background: rgba(206,214,196,.35); color: var(--green500); }
.chip.phase.phase-pending { background: transparent; color: var(--amber); border: 1px dashed var(--amber); }
.chip.phase.phase-2 { background: rgba(63,107,114,.12); color: var(--slate); border-color: rgba(63,107,114,.3); }
.chip.phase.phase-closed { background: transparent; color: var(--green500); text-decoration: line-through; }

tr.phase-simplified .task-name { color: var(--green700); opacity: .85; }
tr.phase-nice .task-name, tr.phase-nice td.num { color: var(--green500); }
tr.phase-pending td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
tr.phase-2 { color: var(--green500); background: rgba(63,107,114,.05); }
tr.phase-2 .task-name { color: var(--green500); }
tr.phase-2 td:first-child { box-shadow: inset 3px 0 0 var(--slate); }
tr.phase-closed { color: var(--green500); }
tr.phase-closed .task-name { text-decoration: line-through; text-decoration-color: var(--green200); }

.phase-select { max-width: 150px; font-size: 12px; }
/* Eleven columns now. Fixed layout so each keeps the width it is given
   rather than the Task column's long names starving Owner, and a min-width
   so .table-wrap scrolls sideways instead of crushing — the same rule the
   question register already relies on. */
.board-table { table-layout: fixed; min-width: 1480px; }
.board-table th, .board-table td { box-sizing: border-box; }
/* The registers (board, questions, risks, KPIs) use the full window width
   so all columns fit on most screens, and each table scrolls inside a
   viewport-high box so the sideways scrollbar is always on screen — no
   trip to the bottom of the page to reach the right-hand columns. The
   header stays pinned inside the box. */
main.wide { max-width: none; }
.register-scroll { max-height: calc(100vh - 80px); overflow: auto; }
.board-table td { vertical-align: top; }
.board-table .date-input { max-width: 100%; box-sizing: border-box; }
.phase-select[data-phase="Phase 2"] { color: var(--slate); }
.phase-select[data-phase="Pending decision"] { color: var(--amber); border-style: dashed; }
.phase-key { margin-top: 8px; border-top: var(--hairline); padding-top: 8px; }

.chip.pf-ref { font-family: var(--font-mono); letter-spacing: .02em; }
.chip.decision-link { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.chip.blocked-by-decision { border-style: dashed; }
.chip.task-chip { cursor: pointer; font-family: inherit; }
button.chip { line-height: 1.4; }

/* --- Decisions page ---------------------------------------------------- */
.decision.is-overdue > .row:first-child strong { color: var(--clay); }
.decision.status-rejected { opacity: .8; }
.decision .related-tasks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.decision-status { max-width: 130px; }

/* --- Gantt: markers overlay, phase 2 group, the chain ------------------ */
.gantt-markers {
  position: absolute; top: 0; bottom: 20px; left: 274px; right: 0;
  pointer-events: none; z-index: 1;
}
.gantt-markers .gantt-marker { pointer-events: auto; }
.gantt-marker.gate { width: 0; border-left: 2px dashed var(--green500); background: transparent; opacity: .7; }
.gantt-group.phase-2-group { border-top: 2px solid rgba(63,107,114,.35); }
.gantt-row.phase-2 .gantt-label { color: var(--green500); }
.gantt-row.phase-2 .gantt-bar.task-bar { opacity: .55; }
.gantt-row.phase-closed .gantt-bar.task-bar { opacity: .4; }
.gantt-row.is-upstream .gantt-track { background: rgba(46,86,40,.12); }
.gantt-row.is-downstream .gantt-track { background: rgba(184,128,42,.14); }
.gantt-row.is-upstream .gantt-label .code, .gantt-row.is-downstream .gantt-label .code { color: var(--green700); font-weight: 700; }
@media (max-width: 760px) {
  .gantt-markers { left: 0; }
  .register-scroll { max-height: none; }
}

/* The task drawer's chain view: predecessors → this task → successors. */
.chain { margin: 6px 0 12px; padding-left: 0; list-style: none; }
.chain li { position: relative; padding: 6px 0 6px 18px; border-left: 2px solid var(--green200); }
.chain li::before {
  content: ''; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--green200);
}
.chain li.is-this { border-left-color: var(--deepgreen); }
.chain li.is-this::before { background: var(--deepgreen); }
.chain li.is-this .linky { font-weight: 700; }
.chain li.is-locked::before { box-shadow: 0 0 0 2px var(--clay); }
.chain li .meta { font-size: 12px; color: var(--green500); }
.chain li.is-after { border-left-color: rgba(184,128,42,.5); }
.drawer-body .decision-box {
  border: var(--hairline); border-left: 3px solid var(--amber); border-radius: 8px;
  padding: 10px 12px; margin: 8px 0 12px; font-size: 13px;
}
.drawer-body .decision-box.decided { border-left-color: var(--deepgreen); }
.drawer-body .decision-box .chip { margin-left: 6px; }

/* --- Task Register v3.3: decision markers and gate inputs ------------- */
/* A decision date that is not a gate (WMS, 9 Oct): dotted amber, so it
   never reads as one of the dashed green gate lines. */
.gantt-marker.decision { width: 0; border-left: 2px dotted var(--amber); background: transparent; opacity: .85; }
.gantt-gate.decision { color: var(--amber); }
.decision-marker-row td { color: var(--green500); }
.gate-inputs { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gate-inputs .chip { text-decoration: none; }
.gate-inputs .chip.is-done { color: var(--deepgreen); border-color: rgba(46,86,40,.35); }