/* ==========================================================================
 * Idea space, Proposal view and Me.
 *
 * Ported from IdeaSpace.dc.html, ProposalView.dc.html and MePage.dc.html.
 * Every value here is read off those artboards -- paddings, font sizes,
 * letter-spacing, the exact hexes -- not chosen. Where an artboard sets a
 * colour the app already has a variable for, the hex is kept so the two can
 * be compared without translating in your head.
 *
 * The three artboards each define their own `.card`, and ProposalView's
 * carries padding and flex that the others' does not. So none of them reuse
 * the app's `.card`: they get `ix-card`, and ProposalView gets `pv-card`.
 * ========================================================================== */

.ix-mono { font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; }
.ix-sans { font-family: Helvetica, Arial, sans-serif; }
.ix-serif { font-family: Georgia, "Times New Roman", serif; }

.ix-card { background: #FFFFFF; border: 1px solid #141413; }
.ix-title { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: #7A7970; font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; }
.ix-dark { border: 1px solid #141413; background: #141413; color: #F2F1E8;
  font-family: Helvetica, Arial, sans-serif; font-weight: 600; cursor: pointer; }
.ix-dark[disabled] { opacity: 0.35; cursor: default; }
.ix-linkbtn { border: none; background: none; padding: 0; cursor: pointer;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #2A4FD6; text-decoration: underline; }

.ix-meta { font-size: 10px; color: #A3A296; }

/* ==========================================================================
 * Idea space
 * ========================================================================== */
.is-wrap { display: flex; flex-direction: column; min-width: 0; max-width: 100%;
  min-height: 0; flex: 1 1 auto; gap: 14px; padding: 12px 18px;
  box-sizing: border-box; }
.is-wrap > .is-goal { flex: 0 0 auto; margin-bottom: 0; }
.is-goal { padding: 14px 20px; margin-bottom: 16px; display: flex;
  align-items: center; gap: 16px; flex-wrap: wrap; }
.is-goal-prompt { font-size: 16px; font-weight: 700; color: #141413;
  white-space: nowrap; flex: 0 0 auto; }
.is-goal-input { flex: 1 1 260px; min-width: 0; border: none;
  border-bottom: 1px solid #C7C6BC; padding: 6px 0; font-size: 15px;
  background: transparent; font-family: Helvetica, Arial, sans-serif; }
.is-goal-input:focus { outline: none; border-bottom-color: #141413; }
.is-goal-save { padding: 8px 16px; font-size: 12px; flex: 0 0 auto; }
.is-goal-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #A3A296; flex: 0 0 auto; }
.is-goal-text { font-size: 18px; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.is-goal-edit { font-size: 11px; flex: 0 0 auto; }

.is-board { padding: 0; overflow: hidden; }
.is-board-head { padding: 12px 16px; border-bottom: 1px solid #141413;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.is-board-head button { padding: 8px 16px; font-size: 12px; }
.is-board iframe { width: 100%; height: 100%; border: none; display: block; }
.is-board-blocked { padding: 28px 20px; background: #FAFAF7; text-align: center; }

.is-sticky-card { padding: 16px 20px; margin-bottom: 24px; }
.is-sticky-row { display: flex; gap: 10px; align-items: flex-start; }
.is-sticky-row textarea { flex: 1 1 auto; min-width: 0; min-height: 56px;
  resize: vertical; border: 1px solid #C7C6BC; padding: 10px 12px; font-size: 14px;
  box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; }
.is-sticky-row button { padding: 10px 18px; font-size: 12px; flex: 0 0 auto; }

.is-lb { position: fixed; inset: 0; background: rgba(20, 20, 19, 0.7);
  display: flex; align-items: center; justify-content: center; z-index: 50; }
.is-lb-card { width: 640px; max-width: 90vw; padding: 0; overflow: hidden; }
.is-lb-head { padding: 14px 18px; border-bottom: 1px solid #141413; display: flex;
  align-items: center; justify-content: space-between; }
.is-lb-head span { font-size: 11px; color: #7A7970; }
.is-lb-close { border: none; background: none; cursor: pointer; font-size: 18px;
  color: #55534A; line-height: 1; }
.is-lb-sticky { padding: 40px; min-height: 220px; display: flex; align-items: center; }
.is-lb-sticky span { font-size: 20px; line-height: 1.5; color: #141413; }
.is-lb-board { background: #FAFAF7; padding: 40px; min-height: 320px; display: flex;
  align-items: center; justify-content: center; }

/* ==========================================================================
 * Me
 * ========================================================================== */
.me-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 20px; }
.me-strip > .ix-card { padding: 14px 18px; min-width: 0; }
.me-fig { font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 700; margin-top: 4px; }
.me-note { font-size: 11px; color: #7A7970; margin-top: 2px; }

.me-table-card { padding: 18px 20px; }
.ec-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ec-table th, .ec-table td { border: 1px solid #141413; padding: 0; }
.ec-table th { background: #F1F0EA;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: #55534A;
  text-align: left; padding: 6px 8px; font-weight: 700; }
.ec-table td { padding: 7px 8px;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; }
.ec-table td.num { text-align: right; }
.ec-table td.sans { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #55534A; }
.ec-table tr.total td { padding: 8px; font-weight: 700; }
.ec-table tr.total td.lbl { font-family: Helvetica, Arial, sans-serif; }
.me-foot { font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; color: #A3A296; margin-top: 10px; }
.me-scroll { overflow-x: auto; max-width: 100%; }
.me-scroll .ec-table { min-width: 1080px; }

@media (max-width: 900px) { .me-strip { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
 * Proposal view -- a split screen where only the right side scrolls
 * ========================================================================== */
/* A `full` route: html.is-full locks the page, so this fills what it is given
 * and lets only the right column scroll. min-height: 0 on every level, and
 * max-width: 100% as well -- min-width alone let main come out wider than the
 * window on 2026-09-22. */
.pv { display: flex; flex-direction: column; min-width: 0; max-width: 100%;
  min-height: 0; flex: 1 1 auto; }
.pv-split { display: flex; flex: 1 1 auto; min-height: 0; max-width: 100%;
  border: 1px solid #141413; overflow: hidden; }
.pv-left { flex: 0 0 38%; box-sizing: border-box; padding: 20px 22px; display: flex;
  flex-direction: column; gap: 11px; border-right: 1px solid #141413;
  overflow: hidden; background: #E9E9E4; min-width: 0; }
.pv-right { flex: 1 1 auto; box-sizing: border-box; background: #FFFFFF;
  overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column;
  gap: 16px; min-width: 0; min-height: 0; scrollbar-width: thin; }
.pv-right::-webkit-scrollbar { width: 9px; }
.pv-right::-webkit-scrollbar-thumb { background: #C7C6BC; }

.pv-kicker { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #7A7970; }
.row-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #7A7970;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  display: block; margin-bottom: 3px; }
.ix-field { border: none; border-bottom: 1px solid #C7C6BC; background: transparent;
  width: 100%; box-sizing: border-box; padding: 5px 0; margin: 0; color: #141413;
  font-family: Helvetica, Arial, sans-serif; font-size: 14px; }
.ix-field:focus { outline: none; border-bottom-color: #141413; }
.ix-field.mono { font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; }
.ix-field.big { font-size: 17px; font-weight: 700; font-family: Georgia, serif; }
.pv-pair { display: flex; gap: 14px; }
.pv-pair > div { flex: 1; min-width: 0; }
.pv-inline { display: flex; align-items: baseline; gap: 5px; }
.pv-inline .ix-field { max-width: 60px; }
.pv-hint { font-size: 10px; color: #A3A296; }

.pv-check { border: none; background: none; padding: 0; cursor: pointer;
  font-family: Helvetica, Arial, sans-serif; display: flex; align-items: center;
  gap: 8px; align-self: flex-start; text-align: left; }
.pv-check .box { width: 14px; height: 14px; border: 1px solid #141413; display: flex;
  align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto; }
.pv-check span.lbl { font-size: 12px; font-weight: 600; }
.pv-vatrow { display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; gap: 8px; }
.pv-vatrow .pv-check .box { width: 12px; height: 12px; }
.pv-vatrow .pv-check span.lbl { font-size: 11px; }
.pv-vat { font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; }

.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pv-chip { display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid #141413; font-size: 11px; cursor: pointer;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; }
.pv-chip .box { width: 9px; height: 9px; border: 1px solid currentColor;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* the dark split panel, bleeding to the column's edges */
.pv-panel { background: #14142B; padding: 16px; display: flex; flex-direction: column;
  gap: 8px; margin: 14px -22px 0 -22px; }
.pv-panel-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8A8AC8; }
.pv-panel-fig { font-family: Georgia, "Times New Roman", serif; font-size: 24px;
  color: #F2F1E8; line-height: 1.1; margin-bottom: 4px; }
.pv-member { display: flex; align-items: center; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid #23233F; }
.pv-member .nm { font-size: 13px; color: #F2F1E8; flex: 0 0 auto; }
.pv-member .pc { display: flex; align-items: center; gap: 3px; }
.pv-member .pc .ix-field { width: 32px; font-size: 13px; color: #B7B6E0;
  text-align: right; border-bottom-color: #23233F; }
.pv-member .pc span { font-size: 13px; color: #B7B6E0; }
.pv-member .amt { flex: 1; text-align: right; font-size: 13px; color: #F2F1E8; }
.pv-panel-foot { font-size: 9px; color: #6E6D93; }

.pv-save { margin-top: auto; background: #141413; color: #F2F1E8; padding: 11px;
  font-size: 13px; font-weight: 700; text-align: center; border: none;
  cursor: pointer; font-family: Helvetica, Arial, sans-serif; }

.pv-card { background: #FFFFFF; border: 1px solid #141413; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pv-card.flush { padding: 0; overflow: hidden; gap: 0; }
.pv-card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; }
.pv-obj { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-obj .idx { font-size: 11px; color: #A3A296; width: 16px; flex: 0 0 16px;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; }
.pv-obj .ix-field { flex: 1 1 auto; font-size: 13px; min-width: 0; }
.pv-obj .rm { border: none; background: none; cursor: pointer; color: #A3A296;
  font-size: 14px; line-height: 1; flex: 0 0 auto; }
.pv-sub { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid #E4E3DC; padding-top: 8px; gap: 10px; }
.pv-sub .k { font-size: 11px; color: #55534A; }
.pv-sub .v { font-size: 16px; font-weight: 700; }
.pv-mini-head { padding: 12px 16px; border-bottom: 1px solid #141413; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; }
.pv-card.flush iframe { width: 100%; height: 260px; border: none; display: block; }
.pv-stickies { padding: 10px 16px; display: flex; gap: 10px; }
.pv-stickies > div { flex: 1; padding: 10px; min-height: 60px; min-width: 0; }
.pv-stickies span { font-size: 12px; line-height: 1.4; }

@media (max-width: 1000px) {
  .pv-split { flex-direction: column; }
  .pv-left { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #141413; }
  .pv-panel { margin-left: -22px; margin-right: -22px; }
}

/* --- the idea space, once it saves -------------------------------------- */
.is-save { font-size: 10px; color: #A3A296; }
.is-save.bad { color: #B4372B; }
.is-headright { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* Excalidraw measures its container, so the box has to have a real height
 * before the editor mounts -- not a percentage of something unsized. */
/* The canvas fills whatever the column has left. It was a fixed 560px, which
   is what made the page taller than the window and pushed the notes below the
   fold. min-height: 0 up the whole chain, or the flex item refuses to shrink
   below its content and the PAGE scrolls however much overflow is set further
   down -- the same trick .pv needs. */
.is-canvas { flex: 1 1 auto; min-height: 0; width: 100%; position: relative; }
.is-thumb, .is-lb-img { max-width: 100%; max-height: 100%; display: block;
  object-fit: contain; }
.is-lb-board .is-lb-img { max-height: 60vh; }

/* --- three columns, locked to the window --------------------------------
 * Board, then write-a-sticky, then the saved notes. The board gives up the
 * width; the notes column is the only thing that scrolls and nothing else on
 * the page does. `full` on the route makes html.is-full lock the window, and
 * the rest is min-height: 0 at every level -- without it a flex item will not
 * shrink below its content and the whole page scrolls anyway.
 */
.is-row { display: flex; gap: 16px; align-items: stretch;
  flex: 1 1 auto; min-height: 0; min-width: 0; }
.is-row > .is-board { flex: 1 1 auto; min-width: 0; min-height: 0;
  margin-bottom: 0; display: flex; flex-direction: column; }
.is-row > .is-board .is-board-head { flex: 0 0 auto; }
.is-rail { flex: 0 0 280px; width: 280px; padding: 0; display: flex;
  flex-direction: column; min-width: 0; min-height: 0; }

/* The saved notes: the only scroller on the page. */
.is-notes { flex: 0 0 330px; width: 330px; padding: 0; display: flex;
  flex-direction: column; min-width: 0; min-height: 0; }
.is-notes-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; }
.is-notes-scroll .belongs { padding: 14px 16px; font-size: 12px; }
.is-note { display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px 16px; border: none; border-bottom: 1px solid #E4E3DC;
  background: none; cursor: pointer; text-align: left; font: inherit; }
.is-note:hover { background: #F4F4EF; }
.is-note-dot { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 3px; }
.is-note-thumb { width: 34px; height: 34px; flex: 0 0 34px; background: #FAFAF7;
  border: 1px solid #E4E3DC; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.is-note-main { display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1 1 auto; }
.is-note-text { font-size: 12px; line-height: 1.4; color: #141413;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }
.is-note-when { font-size: 9px; color: #A3A296; }

.is-col-head { padding: 12px 16px; border-bottom: 1px solid #141413;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex: 0 0 auto; }
.is-rail-write { padding: 12px 16px; display: flex; flex-direction: column;
  gap: 8px; border-bottom: 1px solid #E4E3DC; }
.is-rail-write textarea { width: 100%; min-height: 76px; resize: vertical;
  border: 1px solid #C7C6BC; padding: 10px 12px; font-size: 13px;
  box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; }
.is-rail-write button { padding: 9px 14px; font-size: 12px; align-self: stretch; }

/* Narrower than this, three columns cannot all be useful, so the page gives
   up being locked and scrolls like any other -- undone the same way
   planning.css undoes it. */
@media (max-width: 1100px) {
  html.is-full, html.is-full body { height: auto; overflow: visible; }
  html.is-full main { overflow: visible; }
  .is-row { flex-direction: column; }
  .is-rail, .is-notes { flex: 0 0 auto; width: auto; }
  .is-canvas { height: 460px; flex: 0 0 auto; }
  .is-notes-scroll { max-height: 340px; }
}

/* --- Home ---------------------------------------------------------------- */
.hm-grid { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.hm-left { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column;
  gap: 16px; min-width: 0; }
.hm-right { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px;
  min-width: 0; }
.hm-card { padding: 0; display: flex; flex-direction: column; min-width: 0; }
.hm-head { padding: 12px 16px; border-bottom: 1px solid #141413; display: flex;
  align-items: baseline; justify-content: space-between; gap: 8px; }
.hm-card > .belongs { padding: 14px 16px; margin: 0; }
.hm-list { display: flex; flex-direction: column; }
.hm-row { display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 10px 16px; border: none; border-bottom: 1px solid #E4E3DC;
  background: none; cursor: pointer; text-align: left; font: inherit;
  min-width: 0; }
.hm-row:last-child { border-bottom: none; }
.hm-row:hover { background: #F4F4EF; }
.hm-dot { width: 10px; height: 10px; flex: 0 0 10px; border: 1px solid #E4E3DC; }
.hm-text { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hm-row.wide .hm-text { font-weight: 700; }
.hm-when { font-size: 10px; color: #A3A296; white-space: nowrap; flex: 0 0 auto; }
.hm-amt { font-size: 11px; white-space: nowrap; flex: 0 0 auto; }
.hm-todo { min-height: 180px; }

@media (max-width: 1000px) {
  .hm-grid { flex-direction: column; }
  .hm-left { flex: 0 0 auto; width: auto; align-self: stretch; }
}

/* the Ver PDF link, one line */
.me-pdf { font-size: 10px; color: #2A4FD6; text-decoration: underline;
  cursor: help; white-space: nowrap; }

/* The conversion button, at the right of the goal bar. */
.is-goal-conv { padding: 8px 16px; font-size: 12px; flex: 0 0 auto; }

/* --- the proposal picker strip -------------------------------------------
 * The artboard was drawn for one proposal. There can be many now, so the page
 * needs a way to say which -- and a way to make and unmake them.
 */
.pv-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  flex: 0 0 auto; padding: 0 0 10px; }
.pv-pick { flex: 0 1 320px; min-width: 0; font-size: 12px; }
.pv-status { font-size: 10px; color: #A3A296; margin-left: auto; }
.pv-status.bad { color: #B4372B; }
.pv-del { color: #B4372B; }
.pv-empty { flex: 1 1 auto; border: 1px solid #141413; padding: 28px 24px;
  background: #FFFFFF; }
.pv-empty .belongs { max-width: 54ch; font-size: 14px; line-height: 1.6; }

/* Save and "turn into project" sit together at the foot of the left column. */
.pv-outs { display: flex; flex-direction: column; gap: 6px; }
.pv-toproj { background: #FFFFFF; color: #141413; border: 1px solid #141413; }
.pv-toproj:hover { background: #F4F4EF; }

/* --- /people/config ------------------------------------------------------
 *
 * The setup page for private-sector planning, and the checklist the planning
 * page shows while it is not filled in. Both live here rather than in app.css
 * because they are one page's furniture, not the house style.
 *
 * Inputs sit INSIDE grid cells rather than in a form of their own: every field
 * on this page is one field of one row, and a table already says which row.
 * A separate form would have had to repeat the row's name above every box.
 */

.cfg-in {
  font: inherit; font-size: 13px; font-family: var(--mono);
  padding: 5px 7px; width: 110px; text-align: right;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule);
}
.cfg-in:focus { outline: none; border-color: var(--hairline); background: var(--field-focus); }
.cfg-in.wide { width: 100%; max-width: 320px; text-align: left; }
select.cfg-in { width: auto; min-width: 170px; max-width: 100%; text-align: left; }

.cfg-filter { margin-bottom: 10px; }

/* The add-a-tier row. Marked so it does not read as an existing tier with an
   empty name -- an input in a table looks identical either way. */
.cfg-new td { background: var(--surface-2); }
.cfg-off td { opacity: .55; }

/* Done / not done, in the card head. Never colour alone: the tick and the
   circle carry it too, so it survives a greyscale print and colour blindness. */
.cfg-tick { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.cfg-tick.done { color: var(--paul); }
.cfg-tick.todo { color: var(--alarm); }

.cfg-tickcell { font-family: var(--mono); width: 1.5em; text-align: center; color: var(--paul); }
tr.cfg-todo .cfg-tickcell { color: var(--alarm); }

/* Saving / saved / the server's complaint, beside the card's own note. */
.cfg-status { font-family: var(--mono); font-size: 11px; margin-left: 4px; }
.cfg-status.ok { color: var(--paul); }
.cfg-status.bad { color: var(--alarm); }

.cfg-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--link); text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.cfg-link:hover { color: var(--ink); }

/* The banner at the top of Config. The shared .blocked is rust-edged because
   it always means "empty, and here is why"; here it can also mean finished. */
.blocked.done { border-left-color: var(--paul); }

/* ---------------------------------------------------------------------------
   /tasks
   Grouped by project. The three hour figures -- estimate, actual, budget --
   get three places and are never added together, so the row grid is fixed
   rather than flowing: a column that moves is a column you have to re-read.
   --------------------------------------------------------------------------- */
.tk { display: flex; flex-direction: column; gap: 14px; }

.tk-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 6px; border-bottom: 1px solid var(--hairline);
}
.tk-showdone {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--muted); cursor: pointer;
}

.tk-proj { border: 1px solid var(--hairline); background: var(--card); }

.tk-phead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--hairline);
}
.tk-pname { font-weight: 700; font-size: 13px; }
.tk-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid currentColor; padding: 0 3px; color: var(--faint);
}
/* A department project never ends. Giving it its own colour is the visual
   half of Projects.kind -- the half you read without thinking. */
.tk-kind.department { color: var(--paul); }
.tk-kind.grant { color: var(--dep-projects); }
.tk-ptot { font-size: 11px; color: var(--muted); }
.tk-pnum {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* A milestone header. It carries the same three numbers as a project, at the
   level somebody actually promised something by a date. */
.tk-ms {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 5px 12px; background: var(--surface-2);
  border-top: 1px solid var(--hairline);
  font-size: 11px;
}
.tk-ms-name { font-weight: 700; font-size: 12px; }
.tk-ms-date { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
/* Late = has a date, the date has passed, something is still open. A milestone
   with no date cannot be late, so nothing here ever fires on one. */
.tk-ms-date.late { color: var(--accent-red, #9c4a3d); font-weight: 700; }
.tk-ms.late { border-left: 3px solid var(--accent-red, #9c4a3d); }
.tk-ms.shut { opacity: 0.62; }
.tk-ms-prog { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.tk-ms-num {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.tk-ms-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 6px 22px;
  border-top: 1px solid var(--hairline);
}
/* The picker on a task row. Deliberately quiet: it is used rarely and sits in
   every row, so it must not compete with the title. */
.tk-ms-pick {
  font: inherit; font-size: 10.5px; padding: 1px 3px; min-width: 0;
  border: 1px solid transparent; background: transparent;
  color: var(--muted);
}
.tk-ms-pick:hover, .tk-ms-pick:focus { border-color: var(--hairline); }
.tk-late {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-red, #9c4a3d); border: 1px solid currentColor; padding: 0 3px;
}

.tk-row {
  display: grid;
  /* title, milestone, who, date (+ plan, + done), status, buttons. No hours: tasks carry none. */
  grid-template-columns: minmax(0, 1fr) 120px 100px minmax(120px, 210px) 90px 30px;
  align-items: center; gap: 8px;
  padding: 4px 12px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
}
.tk-row.done { color: var(--faint); }
.tk-row.done .tk-title { text-decoration: line-through; }
.tk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-who { font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-due { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.tk-act {
  font-family: var(--mono); font-size: 11px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.tk-st, .tk-est {
  font: inherit; font-size: 11px; padding: 2px 4px;
  border: 1px solid var(--hairline); background: var(--paper); color: inherit;
  min-width: 0;
}
.tk-est { text-align: right; font-family: var(--mono); }
.tk-btns { display: flex; gap: 4px; justify-content: flex-end; }
.tk-log, .tk-drop, .tk-plus, .tk-cancel {
  font: inherit; font-size: 11px; padding: 2px 6px; cursor: pointer;
  border: 1px solid var(--hairline); background: transparent; color: var(--muted);
}
.tk-log:hover, .tk-plus:hover { color: var(--paul); border-color: var(--paul); }
.tk-drop:hover { color: var(--accent-red, #9c4a3d); border-color: currentColor; }
.tk-plus { margin-left: 6px; }

.tk-add {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 8px 12px; border-top: 1px solid var(--hairline);
  background: var(--surface-2);
}
.tk-in {
  font: inherit; font-size: 12px; padding: 3px 6px;
  border: 1px solid var(--hairline); background: var(--paper); color: inherit;
}
.tk-in[type="text"]:first-child { flex: 1 1 220px; }
.tk-in-s { width: 108px; }

.tk-empty { padding: 18px 0 8px; }
.tk-empty p { margin: 0 0 6px; }

@media (max-width: 1000px) {
  /* The milestone picker goes first: on a narrow screen the grouping headers
     already say which milestone a task is under, so the per-row picker is the
     most redundant thing on the line. */
  .tk-row { grid-template-columns: minmax(0, 1fr) 100px minmax(120px, 200px) 90px 30px; }
  .tk-ms-pick { display: none; }
}
@media (max-width: 860px) {
  /* Below this the fixed grid stops fitting: title, date, state, button.
     (A worker's phone view is mi semana; this page is for planning.) */
  .tk-row { grid-template-columns: minmax(0, 1fr) minmax(96px, 140px) 84px 30px; }
  .tk-who { display: none; }
}
@media (max-width: 560px) {
  /* A phone: the title gets its own line, or only «Cie…» fits. */
  .tk-row { grid-template-columns: minmax(0, 1fr) 84px 30px; }
  .tk-row > :first-child { grid-column: 1 / -1; }
}

/* The idea list in the idea space (each opens its record on Proyectos). */
.is-ideas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.is-idea { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin: 0 10px;
  border: 1px solid #141413; background: #FFFFFF; color: #141413; text-decoration: none; }
.is-idea:hover { border-color: #2A4FD6; }
.is-idea-t { font-size: 15px; }
.is-idea-s { font-size: 12px; line-height: 1.4; color: #5E5D55; }

/* Dates, plan against forecast against real (2026-10-19). Dashed = the plan, as everywhere. */
.tk-due { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tk-date { font: inherit; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid transparent; background: transparent; padding: 1px 2px; }
input.tk-date:hover, input.tk-date:focus { border-color: var(--hairline); background: var(--paper); }
.tk-date.late { color: var(--accent-red, #9c4a3d); font-weight: 700; }
.tk-plan { font-family: var(--mono); font-size: 10px; color: var(--muted);
  border: 1px dashed var(--muted); padding: 0 4px; white-space: nowrap; }
.tk-real { font-family: var(--mono); font-size: 10px; color: #2d6b5c; white-space: nowrap; }
.tk-row.dropped { color: var(--faint); }
.tk-row.dropped .tk-title { text-decoration: line-through; }
.tk-log-box { padding: 4px 12px 8px 24px; background: var(--surface-2); border-top: 1px solid var(--hairline); }
.tk-logline { display: flex; gap: 10px; font-size: 11px; padding: 2px 0; }
.tk-logwhen { font-family: var(--mono); color: var(--muted); min-width: 110px; }
/* The weekly review line on a project's or department's own list. */
.tk-review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.tk-rv { font-weight: 600; }
.tk-rv.stale { color: var(--accent-red, #9c4a3d); }
.tk-review .tk-in { width: 220px; }
.tk-section { margin-top: 24px; }
.tk-section > h2 { font-size: 15px; margin: 0 0 8px; }
.tk-section > details > summary { cursor: pointer; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
/* Under a milestone on a grant page: its budget, spending and payments (grant.js). */
.tk-proj .gr-msmoney-line { padding: 3px 12px 3px 24px; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); border-top: 1px solid var(--hairline); background: var(--surface-2); }
.tk-proj .gr-payrow { padding-left: 12px; }

/* edit2: a colour per person on each task, and milestones set apart from tasks. */
.tk-row.has-who { box-shadow: inset 4px 0 0 var(--tk-who); }
.tk-whobox { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tk-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.tk-ms { border-top: 2px solid var(--ink); background: var(--field-focus, var(--surface-2)); padding-top: 7px; padding-bottom: 7px; }
.tk-ms-mark { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.tk-ms-name { font-size: 13px; }