:root {
  color-scheme: light;

  --ink: #17221d;
  --muted: #69756f;
  --line: #d0d7d1;
  --canvas: #e9ede9;
  --white: #fff;

  --green: #23634b;
  --green-deep: #173e30;

  --lane: #dce1dc;
  --lane-queue: #d5e3da;
  --lane-queue-line: #c5d7ca;
  --lane-custom: #e2dfd7;
  --lane-custom-line: #d7d2c8;

  --radius: .75rem;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
}

a { color: inherit; }
button, input { font: inherit; }

.ghost {
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--white);
  padding: .5rem .75rem;
  color: #48564f;
  font-size: .8125rem;
  font-weight: 650;
  text-decoration: none;
}

/* Application header */

.app-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .4375rem 1.25rem;
  min-height: 3.75rem;
  background: var(--green-deep);
  color: var(--white);
}

.brand {
  font-size: 1.125rem;
  font-weight: 850;
  letter-spacing: -.01em;
  text-decoration: none;
}

/* Sections outgrow a narrow window long before they stop being worth reaching, so the nav takes
   another row rather than pushing the page wider than the window: the Lane canvas is the only
   thing on the page that scrolls sideways. */
.app-nav { display: flex; flex-wrap: wrap; gap: .3125rem; }

.app-nav__item {
  padding: .5rem .625rem;
  border-radius: .4375rem;
  color: #b9ccc2;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  /* A section is named on one line. Broken over two, "Recurring work" reads as two sections. */
  white-space: nowrap;
}

.app-nav__item[aria-current="page"] { background: #2b5947; color: var(--white); }

.app-header__right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.app-header__right .ghost { background: #295441; border-color: #3c6856; color: var(--white); }

/* Planning Board */

.board { padding: 1.125rem 0 2rem; }

.board__title { padding: 0 1.25rem .875rem; }
.board__title h1 { margin: 0; font-size: 1.3125rem; letter-spacing: -.01em; }

.lane-canvas {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  overflow-x: auto;
  /* Panning the Lanes is panning the Lanes: at either end the gesture stops here rather than
     chaining onward to the page and its back-swipe. */
  overscroll-behavior-x: contain;
  padding: 0 1.25rem 1.75rem;
  scroll-snap-type: x proximity;
  /* The snapport ignores the canvas padding, so without this the first lane
     snaps flush to the window edge and eats the left gutter. */
  scroll-padding: 0 1.25rem;
}

.lane-canvas:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.lane {
  flex: 0 0 18.25rem;
  min-width: 0;
  min-height: 24rem;
  /* The containing block for the `.visually-hidden` text its cards carry. Without it those spans
     resolve against the page, not the Lane canvas, so the canvas never clips them: the far-right
     Lane's hidden labels stretch the document sideways and the whole page — header and all —
     slides left once the canvas runs out of scroll. */
  position: relative;
  padding: .5625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--lane);
  scroll-snap-align: start;
}

.lane--queue { background: var(--lane-queue); border-color: var(--lane-queue-line); }

/* A Custom Lane reads as one person's own view of the same work, not as another Queue. */
.lane--custom { background: var(--lane-custom); border-color: var(--lane-custom-line); }

.lane--new {
  min-height: 0;
  background: rgba(255, 255, 255, .35);
  border-style: dashed;
}

.lane__head { padding: .3125rem .3125rem .6875rem; }
.lane__head h2 { margin: 0; font-size: .9375rem; }
.lane__head p { margin: .25rem 0 0; color: #6e7973; font-size: .75rem; }

.lane__count {
  margin-left: .375rem;
  padding: .1875rem .4375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: #5d6963;
  font-size: .6875rem;
  font-weight: 700;
  vertical-align: middle;
}

.lane__empty {
  margin: 0;
  padding: 1.5rem 1rem;
  border: 1px dashed #adb9b1;
  border-radius: .5625rem;
  background: rgba(255, 255, 255, .35);
  color: #56635b;
  font-size: .8125rem;
  font-weight: 700;
  text-align: center;
}

.lane__empty span {
  display: block;
  margin-top: .375rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 400;
}

.lane__filters {
  margin: .4375rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.lane__filters li {
  padding: .1875rem .375rem;
  border-radius: .375rem;
  background: rgba(255, 255, 255, .6);
  color: #54625a;
  font-size: .6875rem;
  font-weight: 650;
}

.lane__controls {
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
}

.lane__controls button {
  border: 1px solid var(--line);
  border-radius: .4375rem;
  background: var(--white);
  padding: .25rem .4375rem;
  color: #48564f;
  font-size: .6875rem;
  font-weight: 650;
  cursor: pointer;
}

.lane__controls button[disabled] { opacity: .45; cursor: default; }

.lane__edit { margin-top: .5rem; }

.lane__edit summary {
  color: #48564f;
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
}

/* The two sections a Custom Lane separates its work into. */
.lane__section {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: .625rem .25rem .4375rem;
  color: #6e746e;
  font-size: .6875rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lane__section::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, .12); }

.lane__none { margin: 0 .25rem .375rem; color: var(--muted); font-size: .75rem; }

/* A section with nothing in it still shows where a card would land. */
.lane__cards--empty {
  border: 1px dashed rgba(35, 99, 75, .35);
  border-radius: .5625rem;
  background: rgba(255, 255, 255, .3);
}

.lane__more { margin: .5rem .25rem 0; font-size: .75rem; font-weight: 700; text-align: center; }

.lane-form { margin: 0; display: grid; gap: .4375rem; }

.lane-form__field { margin: 0; display: grid; gap: .1875rem; }

.lane-form label { color: #54625a; font-size: .6875rem; font-weight: 700; }

.lane-form input,
.lane-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: .4375rem;
  background: var(--white);
  padding: .3125rem .4375rem;
  font-size: .75rem;
}

.lane-form button {
  justify-self: start;
  margin-top: .1875rem;
  border: 0;
  border-radius: .4375rem;
  background: var(--green);
  padding: .375rem .625rem;
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}

.lane__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* A list with nothing in it is still somewhere a card can be dropped, so it keeps a height. */
  min-height: 2.25rem;
  /* A card is as wide as its Lane and no wider, whatever a long issue title puts inside it. */
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

.card {
  padding: .625rem .6875rem;
  border: 1px solid #cfd8d2;
  border-radius: .5625rem;
  background: var(--white);
  box-shadow: 0 .0625rem .125rem rgba(23, 34, 29, .05);
}

.card__title { margin: 0; font-size: .8125rem; line-height: 1.35; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }

.card__project {
  margin: .3125rem 0 0;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 700;
}

.card__number { font-weight: 400; }

.card__labels {
  margin: .4375rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.card__labels li {
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: var(--lane-queue);
  color: #3d5b4e;
  font-size: .6875rem;
}

.card__facts {
  margin: .4375rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  color: var(--muted);
  font-size: .6875rem;
}

.card__milestone { color: var(--green); font-weight: 700; }

/* Who GitLab has assigned and who owns the next internal action are two answers, so they are
   never drawn as one. */
.card__owner { color: var(--ink); font-weight: 700; }
.card__note {
  padding: .0625rem .375rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.card__unowned { margin: .4375rem 0 0; }

/* Open Related MRs: a count and a way through to GitLab, drawn as quietly as the facts above it.
   It says open related work exists and nothing about whether that work is ready. */
.card__merge-requests {
  margin: .4375rem 0 0;
  color: var(--muted);
  font-size: .6875rem;
}

.card__merge-requests a { color: var(--green); font-weight: 700; }
.card__merge-requests summary { cursor: pointer; color: var(--green); font-weight: 700; }

.card__merge-requests ul {
  margin: .25rem 0 0;
  padding: 0 0 0 .75rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .1875rem;
}

/* Linked Projects */

.page { padding: 1.125rem 1.25rem 2.5rem; width: min(56rem, 100%); }

.page__title h1 { margin: 0; font-size: 1.3125rem; letter-spacing: -.01em; }
.page__title p { margin: .25rem 0 1.25rem; color: var(--muted); font-size: .8125rem; }

.panel {
  padding: .9375rem 1rem 1.0625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.panel h2 { margin: 0 0 .75rem; font-size: .9375rem; }

.link-form label,
.search-form label {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  font-weight: 700;
}

.form-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.board__filter input,
.link-form input,
.search-form input[type="search"] {
  flex: 1 1 22rem;
  padding: .5625rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
}

.link-form button,
.search-form button,
.new-work-item__form button,
.recurring-form button,
.work-item__planning-form button,
.work-item__note-form button,
.users__admit button,
.audit__filter button {
  border: 0;
  border-radius: .5rem;
  padding: .5625rem 1rem;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  cursor: pointer;
}

/* The planning panel reads at .8125rem throughout, so its buttons sit at the scale of the text
   they belong to rather than at the page-level one. */
.work-item__planning-form button,
.work-item__note-form button { padding: .375rem .75rem; font-size: .8125rem; }

.link-form__problem { margin: .625rem 0 0; color: #8c2f22; font-size: .8125rem; }

.notice {
  margin: 1rem 0;
  padding: .625rem .75rem;
  border: 1px solid var(--lane-queue-line);
  border-radius: .5rem;
  background: var(--lane-queue);
  font-size: .8125rem;
}

.count {
  margin-left: .375rem;
  padding: .1875rem .4375rem;
  border-radius: 999px;
  background: var(--lane);
  color: #5d6963;
  font-size: .6875rem;
  font-weight: 700;
  vertical-align: middle;
}

.projects-heading {
  margin: 1.75rem 0 .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.projects-heading h2 { margin: 0; font-size: .9375rem; }
.projects-heading button { cursor: pointer; }

.projects-note { margin: 0 0 .75rem; color: var(--muted); font-size: .75rem; max-width: 44rem; }

.empty {
  margin: 0;
  padding: 1.5rem 1rem;
  border: 1px dashed #adb9b1;
  border-radius: .5625rem;
  color: #56635b;
  font-size: .8125rem;
  font-weight: 700;
  text-align: center;
}

.empty span { display: block; margin-top: .375rem; color: var(--muted); font-size: .75rem; font-weight: 400; }

.projects { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.project {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  padding: .75rem .875rem;
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: var(--white);
}

.project[aria-current="true"] { border-color: var(--green); box-shadow: 0 0 0 .125rem rgba(35, 99, 75, .12); }

.project__name { font-weight: 700; font-size: .875rem; }
.project__path { margin: .1875rem 0 0; color: var(--muted); font-size: .75rem; }

.project__state { display: flex; align-items: flex-start; gap: .375rem; }

.tag {
  padding: .125rem .4375rem;
  border-radius: 999px;
  background: var(--lane);
  color: #4c5a53;
  font-size: .6875rem;
  font-weight: 700;
}

.tag--ok { background: var(--lane-queue); color: #2c5a46; }
.tag--warn { background: #f6e2cf; color: #8a4b16; }

.project__actions { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .625rem; }
.project__failure { margin: 0 0 .5rem; color: #7a4a2a; font-size: .75rem; }
.project__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }

.project__buttons button {
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .4375rem .75rem;
  background: var(--white);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}

.project__lifecycle { margin: 0 0 .5rem; color: var(--muted); font-size: .75rem; max-width: 44rem; }
.project__retained { display: block; margin-top: .25rem; }

.project__confirm {
  margin: 0 0 .625rem;
  padding: .625rem .75rem;
  border: 1px solid #e0cdb4;
  border-radius: .5rem;
  background: #f6e2cf;
  color: #7a4a2a;
  font-size: .8125rem;
}

.project__confirm p { margin: 0 0 .5rem; max-width: 44rem; }
.project__cancel, .project__discard { align-self: center; font-size: .8125rem; font-weight: 700; }

.project__note { margin-top: .625rem; font-size: .8125rem; }
.project__note summary { color: var(--muted); font-size: .75rem; font-weight: 700; cursor: pointer; }
.project__note-text { margin: .5rem 0; white-space: pre-wrap; max-width: 44rem; }
.project__note label { display: block; margin: .5rem 0 .25rem; font-size: .75rem; font-weight: 700; }
.project__note textarea { display: block; width: 100%; max-width: 44rem; font: inherit; font-size: .8125rem; }
.project__note button {
  margin: .5rem 0 .25rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .4375rem .75rem;
  background: var(--white);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* Sign in */

.sign-in { width: min(42rem, calc(100% - 3rem)); margin: 18vh auto; }
.sign-in h1 { margin: .3125rem 0 .75rem; font-size: 2rem; letter-spacing: -.02em; }
.sign-in p { max-width: 34rem; color: var(--muted); font-size: 1.0625rem; }
.sign-in form { margin-top: 1.5rem; }

.sign-in .eyebrow {
  margin: 0;
  color: var(--green);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sign-in button {
  border: 0;
  border-radius: .5625rem;
  padding: .75rem 1.125rem;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 .1875rem .5625rem rgba(35, 99, 75, .18);
}

@media (max-width: 37.5rem) {
  .app-header { gap: 1rem; padding: 0 .875rem; }
  .app-nav { display: none; }
  .board__title, .lane-canvas { padding-left: .875rem; padding-right: .875rem; }
  .lane-canvas { scroll-padding: 0 .875rem; }
  .board__problem, .board__warning, .board__undo { margin-left: .875rem; margin-right: .875rem; }
  .lane { flex-basis: min(18.25rem, 85vw); }
}

/* Synchronization */

.banner {
  margin: 0;
  padding: .5625rem 1.25rem;
  border-bottom: 1px solid #e0cdb4;
  background: #f6e2cf;
  color: #7a4a2a;
  font-size: .8125rem;
}

.board__problem,
.board__warning {
  margin: 0 1.25rem 1rem;
  padding: .625rem .75rem;
  border: 1px solid #e0cdb4;
  border-radius: .5rem;
  background: #f6e2cf;
  color: #8c2f22;
  font-size: .8125rem;
}

.card--orphaned { border-style: dashed; border-color: #d8bfa4; background: #fdfaf6; }

.card__orphan {
  margin: .4375rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem;
  color: #7a4a2a;
  font-size: .6875rem;
}

.card__discard { margin: .5rem 0 0; }

.card__discard button {
  border: 1px solid #d8bfa4;
  border-radius: .5rem;
  padding: .3125rem .5625rem;
  background: var(--white);
  color: #7a4a2a;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}

/* Search */

.search-form__scope {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  gap: .4375rem;
  color: var(--muted);
  font-weight: 400;
}

.results-heading { margin: 1.75rem 0 .5rem; font-size: .9375rem; }

.results { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.result {
  padding: .75rem .875rem;
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: var(--white);
}

.result__title { font-size: .875rem; font-weight: 700; text-decoration: none; }
.result__title:hover { text-decoration: underline; }

.result__facts {
  margin: .3125rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .75rem;
}

.result__project { font-weight: 700; }

.results__more { margin: .75rem 0 0; color: var(--muted); font-size: .75rem; }

/* Work Item detail */

.work-item__back { margin: 0 0 .625rem; font-size: .75rem; font-weight: 700; }

.work-item .page__title p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .875rem;
}

.work-item__project { font-weight: 700; }

.work-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: .75rem;
}

.button {
  border-radius: .5rem;
  padding: .5rem .875rem;
  background: var(--green);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
}

.notice--warn { border-color: #e0cdb4; background: #f6e2cf; color: #7a4a2a; }

.work-item__panel { margin-top: 1rem; }

.facts { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: .4375rem .75rem; font-size: .8125rem; }
.facts dt { color: var(--muted); font-size: .75rem; font-weight: 700; }
.facts dd { margin: 0; }
.facts__none { color: var(--muted); }

.panel__lede { margin: -.375rem 0 .875rem; color: var(--muted); font-size: .75rem; }

.work-item__owner { font-weight: 700; }

/* Where this work stands in the Queue, beside a form that says where it could go instead. */
.work-item__place { font-weight: 700; }
.work-item__place.facts__none { font-weight: 400; }

.work-item__planning-form,
.work-item__note-form { margin-top: .875rem; display: grid; gap: .375rem; justify-items: start; }

/* The two questions the planning form asks, each with its label above and its hint below. */
.work-item__field { display: grid; gap: .25rem; justify-items: start; width: min(28rem, 100%); }

.work-item__field label,
.work-item__note-form label { font-size: .75rem; font-weight: 700; }

.work-item__field select,
.work-item__note-form textarea {
  width: 100%;
  padding: .5rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--white);
  font: inherit;
  font-size: .8125rem;
}

.work-item__note-form textarea { width: min(28rem, 100%); resize: vertical; }

.form__hint { color: var(--muted); font-size: .75rem; }

.work-item__note { margin-top: .875rem; }
.work-item__note h3 { margin: 0 0 .25rem; font-size: .8125rem; }
.work-item__note p { margin: 0; font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.description { font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.description > :first-child { margin-top: 0; }
.description > :last-child { margin-bottom: 0; }
.description :is(h1, h2, h3, h4, h5, h6) { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.description pre {
  padding: .625rem .75rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #f4f6f4;
  overflow-x: auto;
}
.description code { font-size: .8125rem; }
.description blockquote {
  margin: .75rem 0;
  padding: .125rem .75rem;
  border-left: .1875rem solid var(--line);
  color: var(--muted);
}
.description table { border-collapse: collapse; display: block; overflow-x: auto; }
.description th, .description td { padding: .3125rem .5rem; border: 1px solid var(--line); text-align: left; }
.description__embed { font-weight: 700; }

/* Scheduling: moving Work Items between the Queue and the Triage Pool */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Room to drop a card into a Lane that holds none. */
.lane__cards { min-height: 3.5rem; }

.card__place {
  float: right;
  margin: 0 0 0 .5rem;
  min-width: 1.25rem;
  padding: .0625rem .3125rem;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: .6875rem;
  font-weight: 750;
  text-align: center;
}

/*
 * The slot every card reserves for its ⋯, whether it has one or not: a Lane's cards line up, and a
 * card's height is the same whether it is being pointed at, opened, or left alone. Floated, so the
 * title beside it wraps the way it always has — and floated before the Queue place, which lands to
 * its left.
 */
.card__manage {
  float: right;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: .375rem;
}

/*
 * Chrome-free and faint until the card is pointed at or the control itself is focused. It fades
 * rather than appears: it is laid out at rest, so nothing on the Lane moves either way.
 */
.card__manage-trigger {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: .3125rem;
  background: none;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease-in;
}

.lane__card:hover .card__manage-trigger,
/* Stays put while the panel it opened is open: focus has moved into the panel by then,
   and a control that vanished under its own panel would read as having gone. */
.lane__card:has(.card__panel:popover-open) .card__manage-trigger,
.card__manage-trigger:focus-visible { opacity: 1; color: var(--green); }

/* Nothing hovers here, so there is no reveal to make: the control is simply there. */
@media (hover: none) {
  .card__manage-trigger { opacity: 1; }
}

/*
 * Everything the card can do, in the top layer. Anything drawn inside the card would be clipped at
 * the edge of the lane canvas, which scrolls sideways — the right-most Lane would lose its panel.
 * `inset` and `margin` are the browser's, which centres the panel on screen: that is what a page
 * this script never reached gets, and it is usable rather than broken.
 */
.card__panel {
  width: 18rem;
  max-width: calc(100vw - 2rem);
  max-height: min(24rem, calc(100vh - 2rem));
  overflow-y: auto;
  padding: .625rem;
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: var(--white);
  box-shadow: 0 .5rem 1.5rem rgba(23, 34, 29, .18);
}

.card__panel::backdrop { background: none; }

/*
 * One form in the panel: two labelled selects and one Save, stacked, because the options name Work
 * Items and those titles are as long as they are.
 */
.card__form {
  display: grid;
  gap: .1875rem;
  margin: 0;
}

.card__form label {
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 700;
}

/* Air between the two questions; the first label sits against the top of the panel. */
.card__form select + label { margin-top: .3125rem; }

.card__form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .25rem;
  background: var(--white);
  font-size: .75rem;
}

.card__form button,
.board__undo button {
  justify-self: start;
  margin-top: .125rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .25rem .5rem;
  background: var(--white);
  color: #48564f;
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
}

.card__form button:hover,
.board__undo button:hover { border-color: var(--green); color: var(--green); }

.board__undo { margin: 0 1.25rem 1rem; }

.card--dragging { opacity: .45; }

/* A pointer drag moves whole cards, so nothing inside one starts a text selection instead. */
.lane__cards li { touch-action: manipulation; }

/* New Work Item */

.new-work-item .panel { margin-top: 1rem; }

.new-work-item__projects { display: flex; flex-wrap: wrap; gap: .375rem; }

.new-work-item__project {
  padding: .375rem .6875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: inherit;
  font-size: .8125rem;
  text-decoration: none;
}

.new-work-item__project--chosen {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
  font-weight: 700;
}

.new-work-item__form { display: grid; gap: .875rem; }
.new-work-item__form h2 { margin: 0; }
.new-work-item__form button { justify-self: start; }

.new-work-item__field { margin: 0; display: grid; gap: .375rem; justify-items: start; }
.new-work-item__field > label,
.new-work-item__labels legend { padding: 0; font-size: .75rem; font-weight: 700; }

.new-work-item__field input[type="text"],
.new-work-item__field textarea,
.new-work-item__field select {
  width: min(34rem, 100%);
  padding: .5rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--white);
  font: inherit;
  font-size: .8125rem;
}

.new-work-item__field textarea { resize: vertical; }

.new-work-item__labels { border: 0; margin: 0; padding: 0; }
.new-work-item__label {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  margin-right: .625rem;
  font-size: .8125rem;
}

/* Recurring work: the templates and the form that writes one. The project chooser and the fields
   are the New Work Item form's, because they ask the same things of the same projects. */
.recurring__projects { display: flex; flex-wrap: wrap; gap: .5rem; margin: .625rem 0; }
.recurring__project {
  padding: .375rem .6875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: inherit;
  font-size: .8125rem;
  text-decoration: none;
}

.recurring__project--chosen {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
  font-weight: 700;
}

.recurring-form { display: grid; gap: .875rem; margin-top: .625rem; }
.recurring-form button { justify-self: start; }

.recurring-form__field { margin: 0; display: grid; gap: .375rem; justify-items: start; }
.recurring-form__field > label,
.recurring-form__labels legend { padding: 0; font-size: .75rem; font-weight: 700; }

.recurring-form__field input,
.recurring-form__field textarea,
.recurring-form__field select {
  width: min(34rem, 100%);
  padding: .5rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--white);
  font: inherit;
  font-size: .8125rem;
}

.recurring-form__field input[type="number"] { width: 6rem; }
.recurring-form__field textarea { resize: vertical; }

.recurring-form__labels { border: 0; margin: 0; padding: 0; }
.recurring-form__label {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  margin-right: .625rem;
  font-size: .8125rem;
}

.templates { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.template {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: var(--white);
}

.template__name { margin: 0; font-weight: 700; font-size: .875rem; }
.template__where { margin: .1875rem 0 0; color: var(--muted); font-size: .75rem; }
.template__state { display: flex; align-items: flex-start; gap: .375rem; }
.template__health { grid-column: 1 / -1; display: grid; gap: .375rem; font-size: .75rem; }
.template__health p { margin: 0; max-width: 44rem; }
.template__last, .template__next { color: var(--muted); }
.template__failure { color: #7a4a2a; }
.template__missed, .template__piling { color: #7a4a2a; }
.template__actions { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .625rem; }
.template__actions .project__buttons { margin-bottom: .25rem; }
.template__edit { margin-top: .625rem; font-size: .8125rem; }
.template__edit summary { color: var(--muted); font-size: .75rem; font-weight: 700; cursor: pointer; }

/* People and Hygiene: lists of Work Items that answer a question rather than offering moves. */

.lines { margin: 0; padding: 0; list-style: none; display: grid; gap: .375rem; }

.line {
  padding: .5rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--white);
}

.line__title { font-size: .8125rem; font-weight: 700; text-decoration: none; }
.line__title:hover { text-decoration: underline; }

.line__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .625rem;
  margin: .1875rem 0 0;
  color: var(--muted);
  font-size: .75rem;
}

.line__project { font-weight: 700; }
.line__note { color: #54625a; }
.line__failure { margin: .3125rem 0 0; color: #7a4a2a; font-size: .75rem; max-width: 44rem; }
.line--project .project__buttons, .line--template .project__buttons { margin-top: .5rem; }

/* People */

.user { display: grid; gap: .75rem; }
.user__identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; }
.user__identity h2 { margin: 0; font-size: .9375rem; }
.user__load { margin: 0; color: var(--muted); font-size: .75rem; }
.user__load strong { color: var(--ink); font-size: .875rem; }
.user__none { margin: 0; color: var(--muted); font-size: .75rem; }
.user__section h3 { margin: 0; font-size: .8125rem; }
.user__lede { margin: .1875rem 0 .5rem; color: var(--muted); font-size: .75rem; max-width: 44rem; }

/* Hygiene */

.condition h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.condition .panel__lede { margin: -.375rem 0 .75rem; max-width: 44rem; }

/* Users: the roster, and admitting somebody onto it. */

.users__admit { align-items: center; }
.users__admit label { font-size: .75rem; font-weight: 700; }
.users__admit input {
  width: 8rem;
  padding: .5625rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  font: inherit;
  font-size: .8125rem;
}

.roster { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.user-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .5rem 1rem;
  padding: .75rem .875rem;
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: var(--white);
}

.user-row[data-admission="unapproved"] { background: var(--lane); }
.user-row__name { margin: 0; font-weight: 700; font-size: .875rem; }
.user-row__id { margin: .1875rem 0 0; color: var(--muted); font-size: .75rem; }
.user-row__last { margin: 0; color: var(--muted); font-size: .75rem; max-width: 22rem; text-align: right; }
.user-row__actions button {
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .4375rem .75rem;
  background: var(--white);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* Audit trail: what was done, most recent first. */

.audit__filter { align-items: center; margin: 0 0 1rem; }
.audit__filter label { font-size: .75rem; font-weight: 700; }
.audit__filter select {
  padding: .5625rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  font: inherit;
  font-size: .8125rem;
}

.events { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.event {
  padding: .75rem .875rem;
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: var(--white);
}

.event__what { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; font-size: .8125rem; }
.event__record { color: var(--muted); }
.event__who { margin: .1875rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .75rem; }
.event__history { font-size: .75rem; }

.event__values {
  margin: 0;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: .25rem .75rem;
  font-size: .75rem;
}

.event__values dt { color: var(--muted); font-weight: 700; }
.event__values dd { margin: 0; }
.event__value-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.audit__pages { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* ---- Board Filter ---------------------------------------------------------
   Narrows every Lane at once. It sits above the lane canvas, which is the one
   thing on the page that scrolls sideways, so it stays put however far along
   the canvas somebody has scrolled. */
.board__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

.board__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* The box itself is the shared one, up beside Search's. Only how much room it takes on a row it
   shares with the heading is its own business. */
.board__filter input { flex: 0 1 22rem; min-width: 10rem; }

/* Clearing the filter is the link beside the box, on every browser. WebKit draws a cross inside a
   search box and Firefox draws none, and two ways to clear on some machines and one on others is
   not a thing anybody can be told about. */
.board__filter input::-webkit-search-cancel-button { display: none; }

.board__filter-clear { font-size: .75rem; }

.board__no-matches {
  margin: 0 1.25rem .875rem;
  font-size: .8125rem;
  color: var(--muted);
}

.lane__filtered-out {
  margin: 0 0 .5rem;
  font-size: .75rem;
  color: var(--muted);
}

/* A card the filter has taken out of a Lane is not shown, not dragged, and not
   a neighbour any move can be named against. A list item needs telling: the
   reset's [hidden] rule loses to .lane__cards li on specificity. */
.lane__card[hidden] { display: none; }