:root {
  --paper: #F3EEE4;
  --charcoal: #2A2622;
  --indigo: #3D4C6F;
  --indigo-pale: rgba(61, 76, 111, 0.28);
  --confirm: #B5522A;
  --ruin: #7A2E2E;
  --baseline: 8px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
}
.desk {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 32px 64px;
}
.chrome {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  gap: 16px;
}
.mark {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.chrome nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.chrome nav a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.chrome nav a[aria-current="page"] { font-weight: 500; }
h1, h2, .next-step h2 {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  margin: 0 0 16px;
}
h2 { font-size: 28px; }
.lede, .focus { margin: 0 0 16px; }
.kind, .mono, .caption, .cue, .life-kicker, .reasons .mono {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 18px;
}
.life-kicker { letter-spacing: 0.04em; margin: 0 0 8px; }
.caption { color: rgba(42, 38, 34, 0.72); }
.flash { color: var(--ruin); }
label, fieldset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  border: 0;
  padding: 0;
}
input, select, textarea, button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--charcoal);
  border-radius: 0;
  padding: 8px 10px;
}
button {
  background: var(--confirm);
  color: var(--paper);
  border-color: var(--confirm);
  cursor: pointer;
  width: fit-content;
}
button.quiet, button.text {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
button.text {
  border: 0;
  padding: 0;
  text-decoration: underline;
  background: transparent;
  color: var(--charcoal);
}
button.danger {
  background: transparent;
  color: var(--ruin);
  border-color: var(--ruin);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.custom-dates[hidden] { display: none; }
.first-session, .ledger-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px;
  align-items: start;
}
.hold-band {
  border: 1px solid var(--charcoal);
  background: var(--indigo-pale);
  padding: 16px;
  margin: 0 0 24px;
}
.hold-band p { margin: 0 0 8px; }
.next-step { margin-bottom: 32px; }
.reasons { list-style: none; padding: 0; }
.reasons li { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.reasons .rejected { opacity: 0.55; text-decoration: line-through; }
.row-actions, .taps, .add-reason { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.vessel-block { margin-top: 24px; }
.writable-vessel, .vessel-glyph {
  display: inline-block;
  border-left: 1.5px solid var(--charcoal);
  border-right: 1.5px solid var(--charcoal);
  border-bottom: 1.5px solid var(--charcoal);
  border-top: 0;
}
.vessel-glyph { width: 16px; height: 16px; }
.writable-vessel {
  width: 72px;
  height: 88px;
  position: relative;
}
.writable-vessel.filled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  background: var(--indigo);
}
.capture { display: flex; gap: 8px; margin: 16px 0; }
.capture input { flex: 1; }
.chip {
  border: 1px solid var(--charcoal);
  padding: 8px 12px;
  margin: 0 0 8px;
  animation: ink 180ms ease-out;
}
.tree-svg { width: 100%; height: auto; }
.tree-svg .now { stroke: var(--charcoal); stroke-width: 1; }
.tree-svg .branch {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.5;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 450ms ease-out forwards;
}
.tree-svg .branch.held { stroke: var(--indigo-pale); stroke-width: 1.5; }
.tree-svg .branch.other { stroke: rgba(42, 38, 34, 0.35); }
.tree-svg .label, .tree-svg .caption {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  fill: var(--charcoal);
}
.tree-list { list-style: none; padding: 0; }
.tree-list li { margin-bottom: 12px; display: flex; flex-direction: column; }
.tree-list .focus strong { color: var(--indigo); }
.line-list { list-style: none; padding: 0; }
.line-list li { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; }
.resume {
  border-bottom: 1px solid var(--charcoal);
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.review-form fieldset label { flex-direction: row; align-items: center; gap: 8px; }
.scribe-box { margin: 24px 0; }
.holds { list-style: none; padding: 0; }
.holds li { margin-bottom: 8px; }
.fallback { margin-bottom: 16px; }
a { color: inherit; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ink { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 799px) {
  .desk { padding: 16px; }
  .first-session, .ledger-grid, .pair { grid-template-columns: 1fr; }
  .life-col {
    max-height: 48px;
    overflow: hidden;
    border-top: 1px solid var(--charcoal);
    padding-top: 8px;
  }
  .life-col:focus-within, .life-col.open { max-height: none; }
}