: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: 0 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;
}

.app-nav { display: flex; gap: .3125rem; }

.app-nav__item {
  padding: .5rem .625rem;
  border-radius: .4375rem;
  color: #b9ccc2;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
}

.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; }
.board__title p { margin: .25rem 0 0; color: var(--muted); font-size: .8125rem; }

.lane-canvas {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  overflow-x: auto;
  padding: 0 1.25rem 1.75rem;
  scroll-snap-type: x proximity;
}

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

.lane {
  flex: 0 0 18.25rem;
  min-width: 0;
  min-height: 24rem;
  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 {
  /*
   * The card is what its own clipped moves are positioned against. Without this they would be laid
   * out against the page instead, which puts a Lane's cards at page coordinates the Lane canvas has
   * scrolled away from — and, being outside the canvas, not clipped by it, so the page itself would
   * scroll sideways as far as the right-most card and leave the header behind.
   */
  position: relative;
  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; }

.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__owner-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__owner-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; }
  .board__problem, .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 {
  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; }

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

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

.work-item__owner-form select,
.work-item__note-form textarea {
  width: min(28rem, 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 { 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;
}

.card__moves,
.card__schedule {
  margin: .5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3125rem;
}

/*
 * Cards rest quiet. The moves are shown on the card being pointed at, and on the card a keyboard has
 * reached — which is why they are clipped rather than hidden, so they stay focusable and tabbing
 * into one brings it into view.
 */
.lane__card .card__moves,
.lane__card .card__schedule {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.lane__card:hover .card__moves,
.lane__card:hover .card__schedule,
.lane__card:focus-within .card__moves,
.lane__card:focus-within .card__schedule {
  position: static;
  width: auto;
  height: auto;
  margin: .5rem 0 0;
  overflow: visible;
  clip-path: none;
}

.card__moves button,
.card__schedule button,
.board__undo button {
  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__moves button:hover,
.card__schedule button:hover,
.board__undo button:hover { border-color: var(--green); color: var(--green); }

.card__schedule select {
  /* Its own line: the options name Work Items, and those titles are as long as they are. */
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .1875rem .25rem;
  background: var(--white);
  font-size: .6875rem;
}

.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; }