:root {
  --paper:   #FFFFFF;
  --paper-2: #E8E8ED;
  --card:    #FFFFFF;
  --ink:     #1D1D1F;
  --ink-2:   #636366;
  --rule:    #D2D2D7;
  --rule-2:  #C7C7CC;
  --rule-3:  #86868B;
  --pink:    #D6006F;
  --blue:    #1F5BFF;
  --green:   #00875A;
  --orange:  #E2550B;
  --violet:  #6E3DD6;
  --teal:    #0E8F9E;
  --amber:   #C4860A;
  --slate:   #5B6B8C;
  --red:      #C5281C;
  --brown:    #8A5A2B;
  --olive:    #6B7A12;
  --lime:     #4C8C0A;
  --sky:      #1479C9;
  --indigo:   #3F4DB8;
  --plum:     #9C2F8E;
  --graphite: #3A3F4B;
  --accent:  var(--blue);
  --hover:   var(--orange);
  --lively:  linear-gradient(90deg, var(--pink), var(--blue));

  --round: var(--s-4);
  --pill:  999px;

  --track-display: -0.025em;
  --track-head:    -0.02em;
  --track-title:   -0.012em;
  --track-caps:    0.08em;
  --lift:  0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
  --glow:  -12px 14px 40px rgba(214, 0, 111, 0.14),
           12px 14px 40px rgba(31, 91, 255, 0.16);

  --f--1: 0.786rem;
  --f--0: 0.887rem;
  --f-0:  1rem;
  --f-1:  1.272rem;
  --f-2:  1.618rem;
  --f-3:  2.618rem;
  --f-4:  4.236rem;

  --f-1-2: clamp(var(--f-1), 0.42rem + 1.42vw, var(--f-2));

  --s-1: 0.382rem;
  --s-2: 0.618rem;
  --s-3: 1rem;
  --s-4: 1.618rem;
  --s-5: 2.618rem;
  --s-6: 4.236rem;
  --s-7: 6.854rem;

  --phi: 1.618;
  --shell: 72rem;

  --measure:   62ch;
  --measure-s: 38ch;
  --gutter: clamp(var(--s-3), 3.23vw, var(--s-6));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-arrive: cubic-bezier(0.22, 1, 0.36, 1);

  --t:      200ms;
  --t-slow: 420ms;
  --t-enter: 900ms;

  --lh-display: 1.05;
  --lh-head:    1.15;
  --lh-ui:      1.4;
  --lh-body:    1.618;
}

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

html {
  font-size: clamp(0.95rem, 0.855rem + 0.304vw, 1.069rem);
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 46rem) {
  html { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--f-0);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: var(--accent); color: var(--paper); }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.ico { width: 1em; height: 1em; flex: none; stroke-width: 2; vertical-align: -0.15em; }
.ico__bg  { fill: none; }
.ico__hi  { stroke: currentColor; }
.btn .ico { width: 1.272em; height: 1.272em; }

/* the entry treatment of the website: a faint photo blended with ink glows, fixed behind the board */
.view-entry {
  background-color: var(--paper);
  background-image:
    var(--backdrop),
    radial-gradient(28rem 24rem at 81% 33%, color-mix(in srgb, var(--ink) 4%, transparent), transparent),
    radial-gradient(90rem 60rem at 0% 100%, color-mix(in srgb, var(--ink) 5%, transparent), transparent),
    radial-gradient(60rem 40rem at 100% 100%, color-mix(in srgb, var(--ink) 3%, transparent), transparent);
  background-repeat: no-repeat;
  background-position: right 5vw top 9vh, 0 0, 0 0, 0 0;
  background-size: min(24vw, 400px), auto, auto, auto;
  background-attachment: fixed, scroll, scroll, scroll;
  background-blend-mode: multiply, normal, normal, normal;
}

@media (max-width: 46rem) {
  .view-entry { background-image: none; }
  main {
    --f--1: 0.887rem;
    --f--0: 1rem;
  }
  main .btn { max-width: 100%; white-space: normal; text-align: left; }
  :is(h1, h2, h3) { hyphens: auto; overflow-wrap: break-word; }
}

/* --- the bar --- */
.bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  width: 100%;
  padding: var(--s-4) var(--gutter);
}

.bar__home {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--f--0);
  line-height: var(--lh-ui);
  letter-spacing: var(--track-title);
}
.mark--small { width: var(--s-4); height: auto; }

.bar__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }

.bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
  text-decoration: none;
  padding-block: var(--s-1);
  transition: color var(--t) var(--ease);
}

.bar__link:hover, .bar__link:focus-visible { color: var(--hover); }
.bar__link--on { color: var(--ink); }

.bar__alert { position: relative; padding-right: var(--s-3); }
.bar__alert .ico { width: 1.272rem; height: 1.272rem; }
.bar__alert .badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--s-3);
  height: var(--s-3);
  padding: 0 var(--s-1);
  justify-content: center;
  font-size: var(--f--1);
  line-height: 1;
}
.bar__marks {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.bar__me {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}

.bar__help {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1);
  border-radius: var(--pill);
  color: var(--ink-2);
  transition: color var(--t) var(--ease);
}
.bar__help:hover, .bar__help:focus-visible { color: var(--hover); }
.bar__help .ico { width: 1.272rem; height: 1.272rem; }

.bar__out { margin: 0; }
.bar__out .btn { padding: var(--s-1) var(--s-3); font-size: var(--f--1); }

.avatar { width: 1.618rem; height: 1.618rem; border-radius: var(--pill); object-fit: cover; }
.avatar--small { width: 1.272rem; height: 1.272rem; }
.avatar--init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tone) 22%, var(--card));
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  font-size: calc(var(--f--1) * 0.9);
}
.avatar--small.avatar--init { font-size: calc(var(--f--1) * 0.7); }
.avatar--medium { width: var(--s-5); height: var(--s-5); }
.avatar--medium.avatar--init { font-size: var(--f--0); }
.avatar--large { width: var(--s-7); height: var(--s-7); }
.avatar--large.avatar--init { font-size: var(--f-2); }

.bar__me { text-decoration: none; transition: color var(--t) var(--ease); }
.bar__me:hover, .bar__me:focus-visible { color: var(--hover); }
.bar__me--on { color: var(--ink); }

.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-5);
}
.profile .form { flex: 1 1 20rem; }
.profile__facts { flex: 1 1 100%; max-width: var(--measure-s); font-size: var(--f--0); }
input[type=file] {
  width: 100%;
  padding: var(--s-2) 0;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
input[type=file]::file-selector-button {
  margin-right: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  cursor: pointer;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-2);
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--card);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
}

/* --- page skeleton --- */
.page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-7);
}

.door-head {
  padding: clamp(var(--s-4), 7.6vw, var(--s-6)) 0 var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4) var(--s-5);
}

.door-head__text { flex: 1 1 34rem; min-width: 0; }

.door-head h1 {
  margin: 0;
  max-width: 34ch;
  font-weight: 600;
  font-size: clamp(var(--f-2), 5.32vw, var(--f-3));
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.door-head__line {
  margin: var(--s-4) 0 0;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: var(--f-1);
  line-height: var(--lh-ui);
  letter-spacing: var(--track-title);
}

.door-head .acts { margin-top: 0; align-self: center; }

.head {
  margin-bottom: var(--s-4);
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.head h2 {
  margin: 0;
  font-weight: 600;
  font-size: var(--f-2);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}

.head__note {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--f-0);
  line-height: var(--lh-body);
}
.head__note a { color: inherit; text-underline-offset: 0.25em; transition: color var(--t) var(--ease); }
.head__note a:hover, .head__note a:focus-visible { color: var(--hover); }

.box { margin-top: var(--s-6); }
.box--unheaded { margin-top: var(--s-2); }

.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* --- the tab switch of the admin pages, as the website's door switch --- */
.seg {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--pill);
  background: var(--paper-2);
}
.seg__opt {
  position: relative;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.seg__opt:hover { color: var(--ink); }
.seg__opt--on, .seg__opt--on:hover {
  z-index: 1;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--lift);
  cursor: default;
}
.seg__opt:focus-visible { z-index: 2; outline-offset: 2px; }
.door-head > .seg { align-self: flex-end; }
@media (pointer: coarse) { .seg__opt { min-height: 44px; display: inline-flex; align-items: center; } }

/* five or six tabs wrap on a narrow screen instead of running off it */
@media (max-width: 46rem) { .seg { flex-wrap: wrap; border-radius: var(--s-3); } }

/* --- chips and tags --- */
.tag {
  display: inline-block;
  padding: 0.3em 0.85em;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  white-space: nowrap;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* --- controls --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--f--0);
  line-height: var(--lh-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t) var(--ease),
              color var(--t) var(--ease),
              opacity var(--t) var(--ease);
}

:is(.btn, .pick, .bar__help, .followup):active { opacity: 0.72; }

.btn:not(.btn--solid):hover,
.btn:not(.btn--solid):focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.btn--solid {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--card);
}
.btn--solid:hover, .btn--solid:focus-visible { opacity: 0.86; }

.btn--small { padding: var(--s-1) var(--s-3); font-size: var(--f--1); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink); }

.pick {
  flex: none;
  padding: 0.3em 0.95em;
  border: 1px solid var(--blue);
  border-radius: var(--pill);
  background: var(--blue);
  color: var(--card);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.pick:hover, .pick:focus-visible { background: transparent; color: var(--blue); }

/* an action that is a mark: a round pill, the name read out and shown on hover */
.btn--icon {
  padding: var(--s-2);
  gap: 0;
  width: 2.618rem;
  height: 2.618rem;
}
.btn--icon .ico { width: 1.272rem; height: 1.272rem; }

/* the spell check is an aside, not an action: a quiet line under the field */
.ai-check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
.ai-check:hover, .ai-check:focus-visible { color: var(--hover); }
.ai-check:disabled { color: var(--ink-2); cursor: progress; }
.ai-check .ico { width: 1em; height: 1em; }

/* --- fields --- */
input[type=text], input[type=date], input[type=number], textarea, select {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule-2);
  border-radius: var(--s-2);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--f--0);
  line-height: var(--lh-ui);
  transition: border-color var(--t) var(--ease);
}
:is(input, textarea, select):hover { border-color: var(--rule-3); }
:is(input, textarea, select):focus-visible { border-color: var(--accent); outline-offset: 2px; border-radius: var(--s-2); }
textarea { resize: vertical; min-height: calc(var(--lh-ui) * 3em + var(--s-4)); }
select { appearance: none; -webkit-appearance: none; padding-right: var(--s-5);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - var(--s-3) - 4px) 50%, calc(100% - var(--s-3)) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat; }
::placeholder { color: var(--ink-2); opacity: 1; }

.form { max-width: var(--measure); }
.field { display: grid; gap: var(--s-1); margin: 0 0 var(--s-4); }
.field__name {
  color: var(--ink);
  font-weight: 500;
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
.field__note {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
}
.field .acts { margin-top: var(--s-1); }
.field__with { display: flex; gap: var(--s-2); align-items: center; }
.field__with input { flex: 1 1 auto; }

@media (min-width: 64rem) {
  .form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-4);
  }
}

/* --- notes --- */
.error {
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--pink);
  color: var(--ink);
  font-size: var(--f--0);
  line-height: var(--lh-body);
}
.error strong { font-weight: 600; color: var(--pink); }

.suggestion {
  margin: var(--s-2) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--s-2);
  background: var(--paper-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  max-width: var(--measure);
}
.suggestion > div {
  flex: 1 1 100%;
  white-space: pre-wrap;
  font-size: var(--f--0);
  line-height: var(--lh-body);
}

/* --- the board --- */
.page--board { max-width: none; }

.board {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--s-2) var(--gutter) var(--s-4);
}

.column {
  flex: 0 0 21rem;
  min-width: 0;
  min-height: 8.472rem;
  border-radius: var(--round);
  transition: background-color var(--t) var(--ease);
}
/* the drop target lights up as a ring growing outward, so nothing shifts while dragging */
.column.dragover { background: var(--paper-2); box-shadow: 0 0 0 var(--s-2) var(--paper-2); }

.column__head {
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-3);
}
.column__head .tag { background: color-mix(in srgb, var(--tone, var(--ink-2)) 16%, var(--card)); color: var(--ink); }

.column__name > .tip, .column__name > span:not(.tag) { flex: 1 1 auto; min-width: 0; }

.column__name {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--f-1);
  line-height: var(--lh-head);
  letter-spacing: var(--track-title);
}

.column__meta {
  margin: var(--s-2) 0 0;
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
}

.cards { display: grid; gap: var(--s-3); }

.tile {
  position: relative;
  isolation: isolate;
  padding: var(--s-4);
  border-radius: var(--round);
  background: var(--card);
  box-shadow: var(--lift);
  cursor: grab;
  transition: opacity var(--t) var(--ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
.tile:is(:hover, :focus-within)::after { opacity: 1; }
.tile.dragging { opacity: 0.4; cursor: grabbing; }

.tile .title {
  margin: 0;
  font-weight: 600;
  font-size: var(--f-0);
  line-height: var(--lh-head);
  letter-spacing: var(--track-title);
}
.tile .title a { text-decoration: none; transition: color var(--t) var(--ease); }
.tile .title a:hover, .tile .title a:focus-visible { color: var(--hover); }
.tile .title input { font-size: var(--f-0); line-height: var(--lh-ui); font-weight: 600; padding: var(--s-1) var(--s-2); }

.tile .customer {
  margin: var(--s-1) 0 0;
  max-width: var(--measure-s);
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}

.logo { flex: none; width: var(--s-4); height: var(--s-4); object-fit: contain; }
.logo--large { width: var(--s-5); height: var(--s-5); }
.tile .customer { display: flex; align-items: center; gap: var(--s-2); }
.tile .customer span { min-width: 0; }
.door-head__customer { display: flex; align-items: center; gap: var(--s-3); }
.door-head__customer a { text-decoration: none; transition: color var(--t) var(--ease); }
.door-head__customer a:hover, .door-head__customer a:focus-visible { color: var(--hover); }

.tile .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
}

.tile .who { display: inline-flex; align-items: center; }
.tile .who .avatar { width: var(--s-4); height: var(--s-4); }
.tile .who .avatar--init { background: none; font-size: var(--f--1); line-height: 1; }
.tile .count { display: inline-flex; align-items: center; gap: var(--s-1); font-variant-numeric: tabular-nums; }
.tile .value { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

.followup {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.15em 0.7em;
  border: 1px solid var(--rule-3);
  border-radius: var(--pill);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.followup:hover, .followup:focus-visible { border-color: var(--ink); color: var(--ink); }
.fu-overdue { color: var(--pink); border-color: var(--pink); }
.fu-today   { color: var(--orange); border-color: var(--orange); }
.followup-input { width: auto; padding: 0.15em var(--s-2); font-size: var(--f--1); line-height: var(--lh-ui); border-radius: var(--pill); }
.followup-edit { display: inline-flex; align-items: center; gap: var(--s-1); }
.followup-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.618rem;
  height: 1.618rem;
  padding: 0;
  border: 1px solid var(--rule-3);
  border-radius: var(--pill);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--f-0);
  line-height: 1;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.followup-clear:hover, .followup-clear:focus-visible { color: var(--pink); border-color: var(--pink); }

.tile .move { display: none; margin-top: var(--s-3); }

/* a phase's description, shown when its name is hovered or focused, as the website's standards chips do */
.tip { position: relative; display: inline-block; }
.tip__name { cursor: help; border-bottom: 1px dashed var(--rule-2); }
.tip__box {
  position: absolute;
  left: 0;
  top: calc(100% + var(--s-2));
  z-index: 5;
  width: max-content;
  max-width: var(--measure-s);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--s-2);
  background: var(--ink);
  color: var(--paper);
  font-weight: 400;
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-wrap: pretty;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease);
}
.tip:hover .tip__box,
.tip__name:focus-visible + .tip__box { opacity: 1; visibility: visible; }
@media (pointer: coarse) { .tip__box { position: static; display: block; opacity: 1; visibility: visible; margin-top: var(--s-1); padding: 0; background: none; color: var(--ink-2); width: auto; } }

/* --- facts, ruled rows, history --- */
.case__facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--s-5);
  max-width: var(--measure);
  font-size: var(--f-0);
  line-height: var(--lh-body);
}
.case__facts dt,
.case__facts dd {
  margin: 0;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--rule);
}
.case__facts dt { color: var(--ink-2); }
.case__facts dd { font-variant-numeric: tabular-nums; }
.case__facts dt:last-of-type, .case__facts dd:last-of-type { border-bottom: 1px solid var(--rule); }

.note-text {
  margin: var(--s-5) 0 0;
  max-width: var(--measure);
  white-space: pre-wrap;
}

.card-facts { max-width: none; }

@media (min-width: 64rem) {
  .card-body {
    display: grid;
    grid-template-columns: calc((100% - var(--s-6)) / (1 + var(--phi))) minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: start;
  }
  .card-body .note-text { margin-top: 0; }
  .card-facts { max-width: none; }
}

.rows { list-style: none; margin: 0; padding: 0; }
.row-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
}
.rows > .row-item:last-child, .rows--closed > .row-item:last-child { border-bottom: 1px solid var(--rule); }
.row-item__head { flex: 1 1 16rem; min-width: 0; }
.row-item__name {
  margin: 0;
  font-weight: 600;
  font-size: var(--f-0);
  line-height: var(--lh-head);
  letter-spacing: var(--track-title);
}
.row-item__name a { text-decoration: none; transition: color var(--t) var(--ease); }
.row-item__name a:hover, .row-item__name a:focus-visible { color: var(--hover); }
.row-item__teaser {
  margin: var(--s-1) 0 0;
  max-width: var(--measure-s);
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
.row-item__fact {
  flex: 0 1 12rem;
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
.row-item__fact strong { display: block; color: var(--ink); font-weight: 500; }
.row-item__when {
  flex: none;
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row-item--user { align-items: center; }
.row-item--removed { opacity: 0.6; }
.row-item--removed:hover, .row-item--removed:focus-within { opacity: 1; }
.row-item__name .tag { margin-left: var(--s-2); vertical-align: middle; }
.row-item__acts { flex: none; display: flex; gap: var(--s-2); margin-left: auto; }
.row-item__acts form { margin: 0; }
.row-item__no {
  flex: none;
  width: var(--s-5);
  color: var(--orange);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
}
.row-item .field { margin: 0; flex: 1 1 16rem; }
.row-item--form { flex-direction: column; align-items: stretch; }
.row-item__legend {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
}

.comment { padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.comments > .comment:last-child { border-bottom: 1px solid var(--rule); }
.comment__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
.comment__who strong { font-weight: 600; }
.comment__when { color: var(--ink-2); font-size: var(--f--1); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.comment__body { margin: var(--s-1) 0 0; max-width: var(--measure); }
.comment__manage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.comment__manage form { margin: 0; }
.comment__edit { flex: 1 1 100%; }
.comment__edit summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  transition: color var(--t) var(--ease);
}
.comment__edit summary::-webkit-details-marker { display: none; }
.comment__edit summary:hover { color: var(--hover); }
.comment__edit form { margin-top: var(--s-2); max-width: var(--measure-s); display: grid; gap: var(--s-2); justify-items: start; }
.comment__edit form textarea { width: 100%; }
.comment-form { margin: 0 0 var(--s-5); }
.acts--date { align-items: center; gap: var(--s-2) var(--s-3); }
.acts--date input[type=date] { width: auto; }
.timeline__item--comment .timeline__line { color: var(--ink); }
.timeline__item--comment .comment__body { margin-top: var(--s-1); color: var(--ink); font-size: var(--f-0); line-height: var(--lh-body); }
.timeline__item--comment .timeline__when { align-self: start; }
@media (min-width: 48rem) {
  .timeline__item--comment { align-items: start; }
  .timeline__item--comment .timeline__when { padding-top: 0.2em; }
}

/* the history is a timeline, as on a GitHub issue: a hairline running down, each event marked by its own icon in a disc, latest on top */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--s-5) minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  padding-bottom: var(--s-4);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-5) / 2);
  top: var(--s-5);
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.timeline__item:last-child::before { display: none; }

.timeline__mark {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-5);
  height: var(--s-5);
  border-radius: var(--pill);
  background: var(--paper-2);
  color: var(--ink-2);
}
.timeline__mark .ico { width: 1.1rem; height: 1.1rem; }
.timeline__mark { position: relative; overflow: visible; }
.timeline__face { width: var(--s-5); height: var(--s-5); }
.timeline__badge {
  position: absolute;
  right: calc(-1 * var(--s-1));
  bottom: calc(-1 * var(--s-1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-4);
  height: var(--s-4);
  border-radius: var(--pill);
  background: var(--paper-2);
  color: var(--ink-2);
  box-shadow: 0 0 0 2px var(--paper);
}
.timeline__badge .ico { width: 0.85rem; height: 0.85rem; }
.timeline__item:first-child .timeline__badge { background: var(--orange); color: var(--card); }

.timeline__when {
  margin: 0;
  align-self: center;
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timeline__item:first-child .timeline__when { color: var(--orange); }

.timeline__body { min-width: 0; }
.timeline--wide { max-width: none; }
.timeline__detail {
  margin: var(--s-1) 0 0;
  max-width: var(--measure);
  padding-left: var(--s-3);
  border-left: 2px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.timeline__act { margin: var(--s-2) 0 0; }
.timeline__ip { color: var(--ink-2); font-size: var(--f--1); }
.timeline__line a { text-underline-offset: 0.25em; transition: color var(--t) var(--ease); }
.timeline__line a:hover, .timeline__line a:focus-visible { color: var(--hover); }
.audit-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.audit-filter__who { margin: 0; }
.audit-filter__who select { width: auto; min-width: 12rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.pager__at { color: var(--ink-2); font-size: var(--f--1); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }

.timeline__line {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
.timeline__line strong { color: var(--ink); font-weight: 500; }

@media (min-width: 48rem) {
  .timeline__item {
    grid-template-columns: var(--s-5) var(--s-7) minmax(0, 1fr);
    column-gap: var(--s-4);
    align-items: center;
  }
  .timeline__mark { grid-row: auto; }
  .timeline__when { padding-left: var(--s-2); }
}

.empty { margin: 0; color: var(--ink-2); max-width: var(--measure); }

/* --- pipeline statistics: hairline rows, one bar each in the phase's tone, figures tabular --- */
.legend {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  color: var(--ink-2);
  font-size: var(--f--1);
  line-height: var(--lh-ui);
}
.legend__item { display: inline-flex; align-items: center; gap: var(--s-1); }
.legend__dot { width: var(--s-2); height: var(--s-2); border-radius: var(--pill); background: var(--tone, var(--rule-3)); }

.stats { display: grid; gap: var(--s-5); }

@media (min-width: 64rem) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--s-6);
    align-items: start;
  }
}

.stat-group__name {
  margin: 0 0 var(--s-2);
  font-weight: 600;
  font-size: var(--f-1);
  line-height: var(--lh-head);
  letter-spacing: var(--track-title);
}

.stat { list-style: none; margin: 0; padding: 0; }

.stat__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name value" "bar bar";
  align-items: baseline;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
.stat > .stat__row:last-child, .stat > .stat__item:last-child { border-bottom: 1px solid var(--rule); }

.stat__item { border-top: 1px solid var(--rule); }
.stat__item .stat__row { border-top: 0; }

.stat__more > summary { cursor: pointer; list-style: none; transition: color var(--t) var(--ease); }
.stat__more > summary::-webkit-details-marker { display: none; }
.stat__more > summary:hover { color: var(--hover); }
.stat__more .stat__name { display: flex; align-items: center; gap: var(--s-2); overflow: visible; white-space: normal; }
.stat__more .stat__name::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-slow) var(--ease);
}
.stat__more[open] .stat__name::before { transform: rotate(45deg); }
.stat__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo--small { width: var(--s-3); height: var(--s-3); }

.stat__cards { list-style: none; margin: 0; padding: 0 0 var(--s-3) var(--s-4); }
.stat__cards li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-1) 0;
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}
.stat__card { flex: 1 1 10rem; min-width: 0; text-decoration: none; transition: color var(--t) var(--ease); }
.stat__card:hover, .stat__card:focus-visible { color: var(--hover); }
.stat__phase { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-2); font-size: var(--f--1); }
.stat__amount { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }

.stat__name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat__by { display: block; color: var(--ink-2); font-size: var(--f--1); line-height: var(--lh-ui); overflow: hidden; text-overflow: ellipsis; }
.stat__n { color: var(--ink-2); font-size: var(--f--1); font-variant-numeric: tabular-nums; margin-left: var(--s-1); }
.stat__value { grid-area: value; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.stat__morelink {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  list-style: none;
  cursor: pointer;
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
  transition: color var(--t) var(--ease);
}
.stat__morelink::-webkit-details-marker { display: none; }
.stat__morelink:hover { color: var(--hover); }
.stat__morelink::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-slow) var(--ease);
}
.stat__rest[open] > .stat__morelink::before { transform: rotate(45deg); }
.stat--nested { border-top: 1px solid var(--rule); }
.stat__item--more > .stat__rest > .stat--nested > .stat__item:first-child { border-top: 0; }
.stat__no { color: var(--orange); font-variant-numeric: tabular-nums; font-weight: 600; margin-right: var(--s-1); }
.column__title { display: flex; align-items: baseline; }
.check { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); font-weight: 400; font-size: var(--f--0); line-height: var(--lh-ui); color: var(--ink-2); cursor: pointer; }
.check input { width: auto; flex: none; margin: 0.2em 0 0; accent-color: var(--accent); }
.row-item--phase { padding: var(--s-2) 0; }
.phase-row { display: grid; gap: var(--s-1) var(--s-3); width: 100%; }
.phase-row :is(input[type=text], textarea) { padding: var(--s-1) var(--s-2); font-size: var(--f--1); line-height: var(--lh-ui); border-radius: var(--s-1); }
.phase-row textarea { min-height: 0; field-sizing: content; resize: vertical; }
.phase-row__opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); }
.phase-row__opts .check { margin: 0; font-size: var(--f--1); }
.phase-row__meta { margin-left: auto; color: var(--ink-2); font-size: var(--f--1); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) {
  .phase-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .phase-row__opts { grid-column: 1 / -1; }
}
.stat__row--lost { color: var(--ink-2); }
.stat__row--lost .stat__value { color: var(--ink-2); }
.stat__row--idle { grid-template-areas: "name value"; color: var(--ink-2); }
.stat__row--idle .stat__name { padding-left: calc(0.45em + var(--s-2)); }
.stat__row--sum { grid-template-areas: "name value"; grid-template-columns: minmax(0, 1fr) auto; font-weight: 600; }
.stat__row--sum .stat__name { color: var(--ink); }
.stat__row--sum .stat__won { font-weight: 400; }
.stat__brought { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; }
.stat__brought .ico { width: 1em; height: 1em; }
.stat__won { display: block; color: var(--ink-2); font-size: var(--f--1); line-height: var(--lh-ui); }

.stat__bar {
  grid-area: bar;
  position: relative;
  display: flex;
  height: var(--s-2);
  width: calc(var(--share, 0) * 100%);
  min-width: 2px;
  border-radius: var(--pill);
  background: var(--tone, var(--accent));
  overflow: hidden;
}
.stat__bar--mix { background: var(--paper-2); }
.stat__seg {
  flex: 0 0 calc(var(--share, 0) * 100%);
  height: 100%;
  background: var(--tone, var(--accent));
}
.stat__bar:not(.stat__bar--mix) { background: var(--tone, var(--accent)); }

@media (min-width: 48rem) {
  .stat__row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
    grid-template-areas: "name bar value";
    align-items: center;
  }
}

/* the one place a tone class turns into a colour */
.tone--pink     { --tone: var(--pink); }
.tone--red      { --tone: var(--red); }
.tone--orange   { --tone: var(--orange); }
.tone--amber    { --tone: var(--amber); }
.tone--brown    { --tone: var(--brown); }
.tone--olive    { --tone: var(--olive); }
.tone--lime     { --tone: var(--lime); }
.tone--green    { --tone: var(--green); }
.tone--teal     { --tone: var(--teal); }
.tone--sky      { --tone: var(--sky); }
.tone--blue     { --tone: var(--blue); }
.tone--indigo   { --tone: var(--indigo); }
.tone--violet   { --tone: var(--violet); }
.tone--plum     { --tone: var(--plum); }
.tone--slate    { --tone: var(--slate); }
.tone--graphite { --tone: var(--graphite); }

/* the colour picker on the phases page: one small disc per tone, the chosen one ringed */
.tones { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.tones__opt {
  position: relative;
  width: var(--s-3);
  height: var(--s-3);
  border-radius: var(--pill);
  background: var(--tone);
  cursor: pointer;
}
.tones__opt--none { background: var(--paper-2); }
.tones__opt--none::before {
  content: "";
  position: absolute;
  inset: 40%;
  border-radius: var(--pill);
  background: var(--ink-2);
}
.tones__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tones__opt:has(input:checked) { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.tones__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (pointer: coarse) { .tones { gap: var(--s-2); } .tones__opt { width: var(--s-5); height: var(--s-5); } }

/* --- the foot --- */
.foot {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-5);
}
.page--board + .foot { max-width: none; }

.foot__inner {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  color: var(--ink-2);
  font-size: var(--f--0);
  line-height: var(--lh-ui);
}

.foot__who {
  color: var(--ink-2);
  letter-spacing: var(--track-title);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
.foot__who:hover, .foot__who:focus-visible { color: var(--hover); }

.foot__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.foot__links a { color: inherit; text-decoration: none; transition: color var(--t) var(--ease); }
.foot__links a:hover, .foot__links a:focus-visible { color: var(--hover); }
.foot__links a[aria-current] { color: var(--ink); }

/* --- the sign-in page --- */
.view-home { min-height: 100svh; }

@media (min-width: 64rem) {
  .view-home {
    background-position: right 9vw top 42%, 0 0, 0 0, 0 0;
    background-size: min(36vw, 600px), auto, auto, auto;
  }
}

.view-entry .entry {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--s-6) var(--gutter);
}

.entry__card {
  position: relative;
  isolation: isolate;
  width: min(100%, 26rem);
  padding: var(--s-6) var(--s-5);
  border-radius: var(--round);
  background: var(--card);
  box-shadow: var(--lift);
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
}
.entry__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
.entry__card:is(:hover, :focus-within)::after { opacity: 1; }

.entry__card .mark { width: var(--s-6); height: auto; }

.entry__card h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(var(--f-2), 5.32vw, var(--f-3));
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.entry__line {
  margin: 0;
  max-width: var(--measure-s);
  color: var(--ink-2);
  font-size: var(--f-0);
  line-height: var(--lh-body);
}

.entry__card .error { text-align: left; }

/* --- motion --- */
@media (prefers-reduced-motion: no-preference) {
  .page, .foot {
    animation: arrive var(--t-enter) var(--ease-arrive) both;
  }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(var(--s-2)); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- narrow --- */
@media (pointer: coarse) {
  .btn, .pick, .bar__link, .bar__help, .bar__home, .foot__links a, .followup, .comment__edit summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .bar__home { min-width: 44px; }
  .tile .move { display: block; }
  .tile { cursor: default; }
  .tile .move select { font-size: var(--f-0); }
}

@media (hover: hover) and (pointer: fine) {
  .tile .move { display: none; }
}

@media (max-width: 46rem) {
  .bar { row-gap: var(--s-3); }
  .bar__links {
    order: 1;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter) var(--s-5);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--s-5)), transparent);
  }
  .bar__links::-webkit-scrollbar { display: none; }
  .bar__link { white-space: nowrap; }
  .bar__me span { display: none; }

  .door-head__text { flex-basis: 100%; }
  .door-head .acts { width: 100%; }
  .door-head .acts .btn { width: 100%; }

  .board {
    gap: var(--s-4);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .column { flex: 0 0 calc(100vw - var(--gutter) * 2); scroll-snap-align: center; }
  .column__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
    padding-top: var(--s-2);
  }
  .tile .title { font-size: var(--f-1); }

  .row-item__acts { margin-left: 0; width: 100%; }
  .row-item__when { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}