/* EzCamp stylesheet (v3). The frame, scale and shapes follow replica/recon.md section 13.
   Every colour, type size, space, radius and shadow comes from tokens.css; a size that belongs to one
   component alone is written once, in that component's rule. Light and dark differ only in tokens. */

/* ---- base ---------------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Whatever is scrolled to, or reached with the keyboard, stops above the pinned bottom bar. */
  scroll-padding-bottom: calc(var(--size-bottombar) + var(--space-4));
  scroll-padding-top: calc(var(--size-tap) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-base);
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
.title {
  font-size: var(--text-xl);
  line-height: var(--line-xl);
  font-weight: 900;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-base);
  font-weight: 700;
}

a {
  color: var(--color-link);
  text-underline-offset: 0.15em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

.icon {
  flex: none;
}

.muted {
  color: var(--color-text-muted);
}

.small {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack-lg > * + * {
  margin-top: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: 100%;
}

.cluster > * {
  min-width: 0;
}

.cluster--end {
  justify-content: flex-end;
}

.cluster--center {
  justify-content: center;
}

/* ---- the frame: top bar, stage, bottom bar -------------------------------------------------- */

.app {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--size-bottombar);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-topbar);
  padding: var(--space-1) var(--space-4);
}

.topbar-home {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-1);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.topbar-home:hover,
.topbar-home[aria-current="page"] {
  background: var(--color-surface-3);
}

.topbar-side {
  justify-self: end;
}

/* The account name in the middle of the top bar opens the jump menu. */
.jump {
  position: relative;
}

.jump > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  max-width: min(60vw, 28rem);
  padding: 0 var(--space-3);
  list-style: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
}

.jump > summary::-webkit-details-marker {
  display: none;
}

.jump > summary:hover,
.jump[open] > summary {
  background: var(--color-surface-3);
}

.jump > summary img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
}

.jump-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jump-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--space-1));
  z-index: 40;
  width: min(var(--size-jump), calc(100vw - var(--space-5)));
  max-height: calc(100vh - var(--size-topbar) - var(--size-bottombar) - var(--space-4));
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
  transform: translateX(-50%);
}

.jump-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-3);
}

.jump-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 72px;
  padding: var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.jump-tile:hover,
.jump-tile[aria-current="page"] {
  background: var(--color-surface-3);
}

.jump-search {
  margin-top: var(--space-3);
}

.jump-label {
  margin: var(--space-4) var(--space-1) var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
}

.jump-list a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  text-decoration: none;
}

.jump-list a:hover,
.jump-list a:focus-visible {
  background: var(--color-surface-3);
}

.jump-empty {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.stage {
  flex: 1;
  width: 100%;
  padding: 0 var(--space-4) var(--space-6);
}

.stage:focus {
  outline: none;
}

/* A page is one white sheet in the middle of the frame, with a thin bar across its top. */
.sheet {
  width: 100%;
  max-width: var(--size-sheet);
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sheet);
}

.sheet--narrow {
  max-width: var(--size-narrow);
}

.sheet-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.sheet-bar a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.sheet-bar a:hover {
  text-decoration: underline;
}

.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: 36px;
  min-width: 0;
}

.path a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

.path-sep {
  color: var(--color-text-muted);
}

.path-here {
  color: var(--color-text-muted);
}

.sheet-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.sheet-body {
  padding: var(--space-7) var(--space-7) var(--space-8);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.page-head > div {
  min-width: 0;
}

.page-head p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

/* Section titles carry the accent colour, like the name above each tool on a project. */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-md);
  line-height: var(--line-md);
  font-weight: 700;
  letter-spacing: 0;
}

.section {
  margin-top: var(--space-7);
}

.section:first-child {
  margin-top: 0;
}

.section-foot {
  margin-top: var(--space-4);
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
}

.columns > * + * {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border);
}

.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-bottombar);
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.my-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-5);
  font-size: var(--text-sm);
}

.my-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap);
  color: var(--color-text);
  text-decoration: none;
}

.my-links a:hover {
  text-decoration: underline;
}

/* ---- menus (a <details> that opens a panel) ------------------------------------------------- */

.menu {
  position: relative;
}

.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  user-select: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu > summary {
  padding: 2px;
}

.account-menu > summary:hover,
.account-menu[open] > summary {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 40;
  min-width: 17rem;
  max-width: calc(100vw - var(--space-5));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  overflow: hidden;
}

/* The account menu sits in the bottom bar and opens upward. */
.menu-panel--up {
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + var(--space-2));
}

.menu-title {
  padding: var(--space-3) var(--space-4) 0;
  color: var(--color-accent);
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  font-weight: 800;
}

.menu-who {
  padding: 0 var(--space-4) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--size-tap);
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--color-surface-2);
}

.menu-item:focus-visible {
  outline-offset: -2px;
}

.menu-label {
  padding: var(--space-3) var(--space-4) var(--space-1);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-1);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  border-radius: var(--radius-chip);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sheet);
}

/* ---- avatars ------------------------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-avatar-1);
  color: var(--color-on-avatar-1);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar--lg {
  width: 96px;
  height: 96px;
  font-size: var(--text-xl);
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--text-xs);
}

.avatar--2 { background: var(--color-avatar-2); color: var(--color-on-avatar-2); }
.avatar--3 { background: var(--color-avatar-3); color: var(--color-on-avatar-3); }
.avatar--4 { background: var(--color-avatar-4); color: var(--color-on-avatar-4); }
.avatar--5 { background: var(--color-avatar-5); color: var(--color-on-avatar-5); }
.avatar--6 { background: var(--color-avatar-6); color: var(--color-on-avatar-6); }
.avatar--7 { background: var(--color-avatar-7); color: var(--color-on-avatar-7); }
.avatar--8 { background: var(--color-avatar-8); color: var(--color-on-avatar-8); }

/* ---- home ---------------------------------------------------------------------------------- */

.board {
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.board + .board {
  margin-top: var(--space-5);
}

.board-title {
  margin: 0 var(--space-1) var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-md);
  line-height: var(--line-md);
  font-weight: 700;
  letter-spacing: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow var(--motion-smooth) var(--motion-ease), border-color var(--motion-fast);
}

a.card:hover {
  border-color: var(--color-border-input);
  box-shadow: var(--shadow-raised);
}

.card h2,
.card h3 {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.card p {
  margin-top: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-base);
}

.card-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
}

.board-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

/* ---- buttons ------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-button);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.btn:hover {
  background: var(--color-surface-2);
}

.btn:active {
  box-shadow: none;
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn--danger {
  background: var(--color-surface);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn--danger:hover {
  background: var(--color-danger);
  color: var(--color-on-danger);
}

/* A grey filled button for a secondary step, such as "See all projects". */
.btn--quiet {
  background: var(--color-surface-3);
  border-color: transparent;
  box-shadow: none;
  font-weight: 500;
}

.btn--quiet:hover {
  background: var(--color-border);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: 48px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Small underlined actions under a row, such as "Manage". */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.row-actions a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ---- forms --------------------------------------------------------------------------------- */

.form {
  max-width: 36rem;
}

.form > * + * {
  margin-top: var(--space-4);
}

.field label,
.field-label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.input,
.select {
  display: block;
  width: 100%;
  min-height: var(--size-tap);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.input--lg {
  min-height: 52px;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
}

.input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.input:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 0;
  border-color: var(--color-link);
  border-radius: var(--radius-sm);
  background: var(--color-info-soft);
}

.input--lg:focus-visible {
  border-radius: var(--radius-md);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}

.hint {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  max-width: none;
}

.inline-form .field {
  flex: 1 1 14rem;
  min-width: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.choices {
  display: grid;
  gap: var(--space-2);
}

.choice {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
}

.choice:hover {
  background: var(--color-surface-2);
}

.choice:has(input:checked) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.choice input {
  position: relative;
  z-index: 1; /* above the stretched label, so the control itself can still be clicked */
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--color-accent);
}

.choice input:focus-visible {
  outline: none;
}

.choice label {
  margin: 0;
  font-weight: 700;
  cursor: pointer;
}

/* The label is stretched over the whole card, so a click anywhere on it picks the option. */
.choice label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.choice span {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-tap);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.check:hover {
  background: var(--color-surface-2);
}

.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-accent);
}

.check > span {
  min-width: 0;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 var(--space-3);
}

/* ---- messages ------------------------------------------------------------------------------ */

.flashes {
  width: 100%;
  max-width: calc(var(--size-sheet) + var(--space-4) * 2);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-3);
}

.gateway .flashes {
  padding: 0;
  margin-bottom: var(--space-4);
}

/* A quiet card: white, a thin edge, a coloured stripe at the start that says what kind it is. */
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sheet);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: opacity var(--motion-fast);
}
.flash p {
  margin: 0;
  padding: var(--space-1) 0;
}
.flash.is-leaving {
  opacity: 0;
}
.flash-close {
  flex: none;
  margin-left: auto;
}

.flash > .icon {
  margin-top: var(--space-1);
  color: var(--color-accent);
}

.flash--error {
  border-left-color: var(--color-danger);
}

.flash--error > .icon {
  color: var(--color-danger);
}

.flash + .flash {
  margin-top: var(--space-2);
}

.flash-body {
  flex: 1;
  min-width: 0;
}

.copy-field {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.copy-field .input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
}

/* A pale box that explains something. */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-info-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.note > .icon {
  margin-top: 3px;
}

.note--warning {
  background: var(--color-warning-soft);
}

/* A grey box with a question, an answer and the page's main button. */
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.callout > div {
  flex: 1 1 18rem;
  min-width: 0;
}

.callout h2,
.callout h3 {
  font-size: var(--text-base);
  line-height: var(--line-base);
  font-weight: 700;
  letter-spacing: 0;
}

/* ---- lists, rows, chips and pills ---------------------------------------------------------- */

.rows > li + li {
  border-top: 1px solid var(--color-border);
}

.rows--lined > li:first-child {
  border-top: 1px solid var(--color-border);
}

.rows--lined > li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-1);
  color: var(--color-text);
  text-decoration: none;
}

a.row:hover {
  background: var(--color-surface-2);
}

.row-main {
  flex: 1;
  min-width: 0;
}

.row-main strong {
  font-weight: 700;
}

.row-main > span {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

/* The first line of a row: the name, then what the person or thing is. */
.row-main > .row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-base);
  line-height: var(--line-base);
}

.row-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.row-side > * {
  min-width: 0;
}

.row-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-surface);
}

/* A chip: a small tinted rectangle that states a fact about the thing next to it. */
.badge {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  padding: 0 var(--space-2);
  background: var(--color-surface-3);
  border-radius: var(--radius-chip);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 22px;
  /* One line always; a very long name is cut with an ellipsis instead of widening the page. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.badge--accent {
  background: var(--color-accent-soft);
}

.badge--warning {
  background: var(--color-warning-soft);
}

.badge--away {
  background: var(--color-info-soft);
}

.badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* A pill: tiny, solid and fully round. Used for a role next to a name. */
.pill {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-role-admin);
  color: var(--color-on-role);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}

.pill--owner {
  background: var(--color-role-owner);
}

/* Classic tabs: the one you are on is a box that opens onto the page below it. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-5) calc(var(--space-7) * -1) var(--space-5);
  padding: 0 var(--space-7);
  border-bottom: 1px solid var(--color-border);
}

.tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text);
  text-decoration: none;
}

.tabs a:hover {
  background: var(--color-surface-2);
}

.tabs a[aria-current="page"] {
  background: var(--color-surface);
  border-color: var(--color-border);
  font-weight: 700;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.empty .row-icon {
  margin: 0 auto var(--space-3);
}

.empty h1,
.empty h2,
.empty h3 {
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

.profile > div {
  flex: 1 1 14rem;
  min-width: 0;
}

.profile p {
  margin-top: var(--space-1);
  font-size: var(--text-md);
}

.facts {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--space-2) var(--space-5);
}

.facts dt {
  font-weight: 700;
}

.table-wrap {
  position: relative;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table th {
  font-weight: 700;
  white-space: nowrap;
}

.table td.nowrap {
  white-space: nowrap;
}

.divider {
  height: 1px;
  margin: var(--space-6) 0;
  background: var(--color-border);
  border: 0;
}

/* ---- gateway (signed-out pages) and error pages -------------------------------------------- */

.gateway {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--space-7) var(--space-4);
}

.gateway-inner {
  width: 100%;
  max-width: var(--size-gateway);
}

.gateway-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.gateway-brand img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
}

.gateway-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sheet);
}

.gateway-card h1 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}

.gateway-card .lede {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.gateway-card .form {
  max-width: none;
}

.gateway-foot {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
}

/* ---- dialog -------------------------------------------------------------------------------- */

.dialog {
  width: min(28rem, calc(100vw - var(--space-6)));
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  color: var(--color-text);
}

.dialog::backdrop {
  background: var(--color-overlay-backdrop);
}

.dialog h2 {
  margin-bottom: var(--space-2);
}

.dialog .cluster {
  margin-top: var(--space-5);
}

/* ---- small screens ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .topbar {
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
  }

  .topbar-home,
  .jump > summary {
    min-height: var(--size-tap);
  }

  .topbar-home {
    min-width: var(--size-tap);
    justify-content: center;
  }

  .topbar-home span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .jump > summary {
    max-width: 64vw;
  }

  .stage {
    padding: 0 var(--space-2) var(--space-5);
  }

  .flashes {
    padding: 0 var(--space-2) var(--space-2);
  }

  .sheet-body {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .tabs {
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding: 0 var(--space-4);
  }

  h1,
  .title {
    font-size: var(--text-lg);
    line-height: var(--line-lg);
    font-weight: 900;
  }

  .board {
    padding: var(--space-3);
  }

  .card-grid,
  .card-grid--3,
  .columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .columns > * + * {
    padding-left: 0;
    padding-top: var(--space-5);
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .btn {
    min-height: var(--size-tap);
  }

  .row {
    flex-wrap: wrap;
  }

  /* On a phone the chips or the button of a row sit on a line of their own, under the text. */
  .row-side {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  /* Lined up under the text when the row starts with a picture. */
  .row:has(> .avatar, > .row-icon) > .row-side {
    padding-left: calc(40px + var(--space-3));
  }

  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .facts dd {
    margin-bottom: var(--space-3);
  }

  .gateway {
    padding-top: var(--space-5);
  }
}

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

/* ---- projects ------------------------------------------------------------------------------ */

/* A round button that holds only an icon: the people of a project, a menu, a move up or down. */
.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-input);
}

.icon-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* A chip that is also a link or a menu: "All-access", "Notifications on". */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: 0 var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.sheet-bar a.chip-btn {
  font-weight: 500;
}

.chip-btn:hover,
.menu[open] > summary.chip-btn {
  background: var(--color-surface-2);
  text-decoration: none;
}

.chip-btn--accent {
  background: var(--color-accent-soft);
}

/* A button that reads as a small underlined link: the quiet actions under a person's name. */
.text-btn {
  min-height: 24px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}

.text-btn:hover {
  color: var(--color-text);
}

.project-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.project-head > div {
  flex: 1;
  min-width: 0;
}

.project-head p {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  white-space: pre-line;
}

.star-form {
  flex: none;
}

.star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-border-input);
  cursor: pointer;
}

.star-btn:hover {
  background: var(--color-surface-2);
}

.star-btn[aria-pressed="true"] {
  color: var(--color-star);
}

.star-btn[aria-pressed="true"] .icon {
  fill: currentColor;
}

/* On a card the whole card opens the project; the star sits above that link, in the corner. */
.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

.card:has(.card-link:hover) {
  border-color: var(--color-border-input);
  box-shadow: var(--shadow-raised);
}

.card:has(.card-link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.card-link:focus-visible {
  outline: none;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.card-top > div {
  min-width: 0;
}

.card .star-form {
  position: relative;
  z-index: 1;
  margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) 0 0;
}

/* ---- folders on Home: each person's own ---- */
.card-tools {
  display: flex;
  flex: none;
  align-items: flex-start;
}

.card-folder {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--space-2) * -1);
}

.card-folder > summary {
  list-style: none;
  cursor: pointer;
}

.card-folder > summary::-webkit-details-marker {
  display: none;
}

.card-folder[open] > summary,
.card-folder > summary:hover {
  color: var(--color-text);
}

.card-folder-form {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  display: grid;
  gap: var(--space-2);
  width: 240px;
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}

.folder-card {
  background: var(--color-bg);
  border-style: dashed;
}

.folder-card-link,
.folder-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.folder-card.is-drop-target {
  border-color: var(--color-accent);
  border-style: solid;
  background: var(--color-accent-soft);
}

.card.is-dragging {
  opacity: 0.5;
}

.home-add-folder {
  position: relative;
}

.home-add-folder > summary {
  list-style: none;
  cursor: pointer;
}

.home-add-folder > summary::-webkit-details-marker {
  display: none;
}

.home-folder-form {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(100% + var(--space-1));
  display: grid;
  gap: var(--space-2);
  width: 260px;
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  text-align: left;
}

.folder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.folder-rename[open] .form {
  margin-top: var(--space-2);
}

.card p.clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The tools of a project: a title above each, then a card showing what is inside. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--size-tool-card)));
  gap: var(--space-6) var(--space-4);
  align-items: start;
}

.tool-block h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  line-height: var(--line-md);
  font-weight: 700;
  letter-spacing: 0;
}

.tool-block h2 a {
  color: var(--color-accent);
  text-decoration: none;
}

.tool-block h2 a:hover {
  text-decoration: underline;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 1;
  overflow: hidden;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}


.tool-card .row-icon {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}

/* The dashed square that adds a tool. */
.add-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px dashed var(--color-border-input);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
}

.add-tool:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.picker {
  max-width: 28rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.picker-title {
  margin-bottom: var(--space-1);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.picker .row {
  min-height: 52px;
  padding: var(--space-2) 0;
}

/* The A to Z list of projects: a letter in a narrow column, then the names. */
.letters > li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.letter {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.letter-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-height: 36px;
  padding: var(--space-1) 0;
}

.letter-list a {
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
}

.letter-list a:hover {
  text-decoration: underline;
}

.letter-list .gone a {
  color: var(--color-text-muted);
}

.find-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.find-row .input {
  max-width: 20rem;
}

.textarea {
  display: block;
  width: 100%;
  min-height: 7rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  resize: vertical;
}

.textarea:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 0;
  border-color: var(--color-link);
  background: var(--color-info-soft);
}

.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.tool-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  flex: 1;
  min-width: 0;
}

.tool-edit .field {
  flex: 1 1 12rem;
  min-width: 0;
}

.field--inline {
  flex: none;
}

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

  .tool-card {
    min-height: 120px;
  }

  .letters > li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .chip-btn,
  .icon-btn,
  .star-btn {
    min-height: var(--size-tap);
    min-width: var(--size-tap);
  }

  /* Small text actions still get a full finger's worth of height on a phone. */
  .text-btn {
    min-height: var(--size-tap);
    min-width: var(--size-tap);
  }
}

/* ---- messages, comments and the editor ------------------------------------------------------ */

.form--wide {
  max-width: none;
}

.input--title {
  min-height: 56px;
  border-color: transparent;
  border-bottom-color: var(--color-border);
  border-radius: 0;
  padding-left: 0;
  font-size: var(--text-xl);
  line-height: var(--line-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.select--short {
  max-width: 18rem;
}

.message-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.byline strong {
  color: var(--color-text);
}

/* Words people wrote: comfortable to read, and only the few styles the editor can make. */
.rich {
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.6;
}

.rich > * + * {
  margin-top: var(--space-3);
}

.rich h2 {
  font-size: var(--text-lg);
}

.rich ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.rich ol {
  padding-left: var(--space-5);
  list-style: decimal;
}

.rich blockquote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-border-input);
  color: var(--color-text-muted);
}

.rich pre,
.rich code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.rich pre {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
}

.rich hr {
  height: 1px;
  background: var(--color-border);
  border: 0;
}

.applause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.thread > li + li {
  border-top: 1px solid var(--color-border);
}

.comment {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-body > * + * {
  margin-top: var(--space-2);
}

.comment-edit > summary {
  display: inline-block;
  list-style: none;
}

.comment-edit > summary::-webkit-details-marker {
  display: none;
}

.comment-new {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 var(--space-2);
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
}

.muted-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  color: var(--color-text-muted);
}

.quote {
  display: block;
  margin-top: var(--space-1);
  font-style: italic;
}

.day-head {
  margin-top: var(--space-6);
}

.day-head:first-of-type {
  margin-top: 0;
}

.tool-card--filled {
  align-items: stretch;
  justify-content: flex-start;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
}

.tool-card--filled:hover {
  border-color: var(--color-border-input);
  box-shadow: var(--shadow-raised);
}

.preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.preview + .preview {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.preview strong,
.preview .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border-input);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-surface-2);
}

.editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  border-radius: var(--radius-chip);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.editor-btn:hover {
  background: var(--color-surface-3);
}

.editor-area {
  min-height: 9rem;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  outline: none;
}

.editor-area:focus-visible {
  border-color: var(--color-link);
  box-shadow: 0 0 0 1px var(--color-link);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.editor-area[aria-invalid="true"] {
  border-color: var(--color-danger);
}

/* ---- to-dos -------------------------------------------------------------------------------- */

.lists > * + * {
  margin-top: var(--space-6);
}

.todolist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

.todolist-head h2 {
  font-size: var(--text-lg);
}

.todolist-head h2 a {
  color: var(--color-text);
  text-decoration: none;
}

.todolist-head h2 a:hover {
  text-decoration: underline;
}

.progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.progress {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

.pie {
  flex: none;
  width: 16px;
  height: 16px;
}

.pie-track {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
}

.pie-fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 9;
}

.todos {
  margin-top: var(--space-2);
}

.todo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 6px 0;
}

.todo[draggable="true"] {
  cursor: grab;
}

.todo.is-dragging {
  opacity: 0.4;
}

.todo-main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  min-height: 28px;
}

.todo-title {
  color: var(--color-text);
  font-size: var(--text-md);
  text-decoration: none;
}

.todo-title:hover {
  text-decoration: underline;
}

.todo--done .todo-title,
.done-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.todo-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.todo-meta:empty {
  display: none;
}

.assignee {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.assignee .avatar--sm {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.todo-move {
  display: flex;
  gap: var(--space-1);
}

.icon-btn--small {
  width: 32px;
  height: 32px;
}

/* The round box that ticks a to-do off. */
.tick-form {
  flex: none;
}

.tick {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  padding: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border-input);
  border-radius: var(--radius-chip);
  color: transparent;
  cursor: pointer;
}

button.tick:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tick[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.tick--small {
  width: 20px;
  height: 20px;
}

.todo-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.todo-head .tick {
  width: 32px;
  height: 32px;
  margin-top: 6px;
}

.steps > li + li {
  border-top: 1px solid var(--color-border);
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-tap);
}

.step-title {
  flex: 1;
  min-width: 0;
}

.step--done .step-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.add-todo,
.edit-list {
  margin-top: var(--space-3);
}

.add-todo > summary,
.new-list > summary,
.edit-list > summary {
  list-style: none;
}

.add-todo > summary::-webkit-details-marker,
.new-list > summary::-webkit-details-marker,
.edit-list > summary::-webkit-details-marker {
  display: none;
}

.add-todo-form,
.new-list-form {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.new-list {
  position: relative;
}

.new-list[open] {
  flex-basis: 100%;
}

.input--date {
  max-width: 12rem;
}

.textarea--short {
  min-height: 4.5rem;
}

@media (max-width: 760px) {
  .tick {
    width: 32px;
    height: 32px;
  }

  .todo-move .icon-btn--small {
    width: var(--size-tap);
    height: var(--size-tap);
  }
}

/* ---- card boards --------------------------------------------------------------------------- */

/* A board uses the whole width of the frame; its columns scroll sideways inside it. */
.sheet--board {
  max-width: none;
}

.sheet--board .sheet-body {
  padding: var(--space-6) var(--space-5) var(--space-7);
}

.board-hint {
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
}

/* Positioned, so what is placed absolutely inside a column (screen-reader text) scrolls with the columns
   instead of widening the whole page. */
.lanes {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.lane {
  display: flex;
  flex: 0 0 17.5rem;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
}

.lane--incoming {
  border-top: 3px solid var(--color-accent);
}

.lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
}

.lane-head h2 {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
  line-height: var(--line-md);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.lane-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.lane-watch {
  display: inline-flex;
  color: var(--color-accent);
}

/* A column's menu opens inside the column, so the sideways scroll never cuts it off. */
.lane-menu[open] {
  flex-basis: 100%;
}

.lane-menu > summary {
  display: flex;
  width: fit-content;
  margin-left: auto;
}

.lane-menu .menu-panel {
  position: static;
  min-width: 0;
  max-width: none;
  margin-top: var(--space-2);
}

.menu-form {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-border);
}

.menu-form .menu-label {
  display: block;
  padding: 0 0 var(--space-1);
  border-top: 0;
}

.menu-form .cluster {
  flex-wrap: nowrap;
}

.menu-form .input {
  flex: 1;
  min-width: 0;
}

.menu-note {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.add-card > summary {
  list-style: none;
}

.add-card > summary::-webkit-details-marker {
  display: none;
}

.add-card-form {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lane-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-sm);
}

.lane-cards:empty {
  border: 1px dashed var(--color-border-input);
}

.lane-cards:empty::before {
  content: "No cards";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.lane-cards.is-target {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}

.lane-hold {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-input);
}

.lane-hold-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: 700;
}

.task-card {
  position: relative;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-button);
}

.lane-cards--hold .task-card {
  border-left: 3px solid var(--color-warning);
}

.task-card[draggable="true"] {
  cursor: grab;
}

.task-card.is-dragging {
  opacity: 0.4;
}

.task-card:has(.task-card-link:hover) {
  border-color: var(--color-border-input);
  box-shadow: var(--shadow-raised);
}

.task-card:has(.task-card-link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* The whole card opens it. */
.task-card-link {
  display: block;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.task-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.task-card-link:focus-visible {
  outline: none;
}

.task-card--done .task-card-link {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.task-card-meta .icon {
  vertical-align: -2px;
}

.task-card-people {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.task-card-people .avatar--sm {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

/* A folded column is a narrow strip with its name running down it. */
.lane--folded {
  flex: 0 0 auto;
  padding: 0;
}

.lane-unfold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 3rem;
  min-height: 12rem;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.lane-unfold:hover {
  background: var(--color-surface-3);
}

.lane-unfold-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* A card board in small on the project page: its columns side by side. */
.tool-card--lanes {
  flex-direction: row;
  gap: var(--space-1);
  padding: var(--space-2);
}

.mini-lane {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: var(--space-1);
  background: var(--color-surface-2);
  border-radius: var(--radius-chip);
}

.mini-lane strong {
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-card {
  height: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.mini-count {
  margin-top: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.card-place {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

@media (max-width: 760px) {
  .sheet--board .sheet-body {
    padding: var(--space-5) var(--space-3) var(--space-6);
  }

  .lane {
    flex-basis: min(85vw, 18rem);
  }
}


/* ---- project page, design pass 2 ------------------------------------------------------------ */

/* The green "Invite people" pill in the project's bar. */
.pill-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
}

.sheet-bar a.pill-link {
  font-weight: 500;
}

.pill-link:hover {
  text-decoration: underline;
}

.pill-link--plain {
  background: var(--color-surface-2);
}

.chip-btn--plain {
  font-weight: 500;
}

.avatar--xs {
  width: 20px;
  height: 20px;
  font-size: 9px;
  letter-spacing: 0;
}

/* "Active lately, the last change 5 minutes ago" under the project's name. */
.project-head p.active-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: normal;
}

/* An empty tool: a faint drawing of what it will hold; pointing at it shows the first step. */
.tool-card--empty {
  padding: 0;
}

.sketch {
  width: 100%;
  height: 100%;
  color: var(--color-surface-3);
  fill: currentColor;
  transition: opacity var(--motion-smooth) var(--motion-ease);
}

.sketch .sketch-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.tool-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--color-text);
  font-size: var(--text-base);
  opacity: 0;
  transition: opacity var(--motion-smooth) var(--motion-ease);
}

.tool-card--empty:hover,
.tool-card--empty:focus-within {
  border-color: var(--color-border-input);
}

.tool-card--empty:hover .tool-cta,
.tool-card--empty:focus-within .tool-cta {
  opacity: 1;
}

.tool-card--empty:hover .sketch,
.tool-card--empty:focus-within .sketch {
  opacity: 0.25;
}

/* With no pointer to hover, the first step is always shown. */
@media (hover: none) {
  .tool-cta {
    opacity: 1;
  }

  .tool-card--empty .sketch {
    opacity: 0.25;
  }
}

.tool-remove {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
}

.tool-card--link {
  color: var(--color-text-muted);
  text-decoration: none;
}

.link-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  color: var(--color-text);
}

.link-host {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A tool not built yet: its drawing, and a quiet tag saying it is on the way. */
.later-tag {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  transform: translateX(-50%);
}

.tool-card--later .sketch,
.tool-card--later:hover .sketch,
.tool-card--later:focus-within .sketch {
  opacity: 1;
}

.tool-card--link:hover {
  border-color: var(--color-border-input);
}

/* A message preview: the writer's face, the title and a line of it. */
.preview--message {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.preview-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.preview-text strong,
.preview-text .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A To-dos card: each list's name with a small pie of how far along it is, then its open to-dos. */
.todo-peek {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  font-size: var(--text-base);
  line-height: var(--line-base);
}

.todo-peek-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.todo-peek-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.todo-peek-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-peek-list .pie {
  width: 18px;
  height: 18px;
}

.todo-peek-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.todo-peek-row > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-peek-box {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-input);
  border-radius: 4px;
}

/* The + that adds a tool, and the list it opens in place. */
.tool-adder-cell {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: calc(var(--line-md) * var(--text-md) + var(--space-2));
}

.tool-grid--empty .tool-adder-cell {
  grid-column: 1 / -1;
  padding-top: 0;
}

.tool-adder {
  position: relative;
  z-index: 2;
}

/* With the list open, the note that points at the + steps aside, as the list takes its place. */
.tool-adder[open] ~ .start-note {
  visibility: hidden;
}

.tool-adder > summary {
  list-style: none;
  cursor: pointer;
}

.tool-adder > summary::-webkit-details-marker {
  display: none;
}

.tool-adder-panel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: min(22rem, calc(100vw - var(--space-6)));
  max-height: 26rem;
  padding: var(--space-3) var(--space-2) var(--space-2);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}

.tool-adder-title {
  margin: 0 var(--space-2) var(--space-2);
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.tool-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

a.tool-option:hover,
button.tool-option:hover,
button.tool-option:focus-visible {
  background: var(--color-surface-2);
}

.tool-option-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-text);
  border-radius: var(--radius-pill);
  color: var(--color-surface);
}

.tool-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--text-sm);
}

.tool-option-text span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.tool-option--later {
  cursor: default;
}

.tool-option--later .tool-option-icon {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}

/* An empty project: the + with a curved arrow and a dashed note beside it. */
.start-note {
  position: relative;
  max-width: 26rem;
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 2px dashed var(--color-highlight);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.start-note p + p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.start-arrow {
  position: absolute;
  top: calc(var(--space-7) * -1 - 4px);
  left: calc(var(--space-6) * -1 - 12px);
  width: 60px;
  height: 70px;
  fill: none;
  stroke: var(--color-highlight);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* A wavy line between the tools and what happened. */
.wave {
  height: 12px;
  margin-left: calc(var(--space-7) * -1);
  margin-right: calc(var(--space-7) * -1);
  background:
    radial-gradient(circle at 10px -2px, transparent 8px, var(--color-border) 9px, transparent 10px) 0 0 / 20px 12px repeat-x,
    radial-gradient(circle at 10px 14px, transparent 8px, var(--color-border) 9px, transparent 10px) 10px 0 / 20px 12px repeat-x;
}

.activity-block {
  margin-top: var(--space-6);
}

.activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.activity-head h2 {
  font-size: var(--text-xl);
  line-height: var(--line-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.activity-filter {
  max-width: 14rem;
}

/* What happened, by day. */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-day + .timeline-day {
  margin-top: var(--space-6);
}

.timeline-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.day-pill {
  flex: none;
  padding: var(--space-1) var(--space-3);
  background: var(--color-text);
  border-radius: var(--radius-sm);
  color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.day-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.day-people {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.avatar-stack {
  display: inline-flex;
}

.avatar-stack .avatar + .avatar {
  margin-left: -4px;
}

.timeline-entries {
  margin: 0;
  padding: 0 0 0 var(--space-2);
  border-left: 1px solid var(--color-border);
  list-style: none;
}

.timeline-entry {
  display: grid;
  grid-template-columns: 6.5rem auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.timeline-when {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  color: var(--color-warning);
  font-size: var(--text-sm);
}

.kind-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: calc(var(--space-2) * -1 - 5px);
  background: var(--color-text-muted);
  border-radius: var(--radius-pill);
}

.kind-dot--add { background: var(--color-accent); }
.kind-dot--done { background: var(--color-success); }
.kind-dot--talk { background: var(--color-link); }
.kind-dot--away { background: var(--color-danger); }
.kind-dot--start { background: var(--color-star); }

.timeline-what p {
  margin: 0;
  padding-top: var(--space-2);
}

.timeline-what p.quote {
  padding-top: var(--space-1);
}

.timeline-items {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.timeline-items li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
}

.item-mark {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-pill);
}

/* A new project is greeted with a short shower of colour. */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

.confetti span {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: confetti-fall 1.6s var(--motion-ease) forwards;
}

.confetti span:nth-child(3n) { background: var(--color-link); }
.confetti span:nth-child(3n + 1) { background: var(--color-highlight); }
.confetti span:nth-child(4n) { background: var(--color-unread); }
.confetti span:nth-child(1) { left: 6%; animation-delay: 0s; }
.confetti span:nth-child(2) { left: 12%; animation-delay: 0.1s; }
.confetti span:nth-child(3) { left: 18%; animation-delay: 0.05s; }
.confetti span:nth-child(4) { left: 24%; animation-delay: 0.2s; }
.confetti span:nth-child(5) { left: 30%; animation-delay: 0.12s; }
.confetti span:nth-child(6) { left: 36%; animation-delay: 0.3s; }
.confetti span:nth-child(7) { left: 42%; animation-delay: 0.08s; }
.confetti span:nth-child(8) { left: 48%; animation-delay: 0.22s; }
.confetti span:nth-child(9) { left: 54%; animation-delay: 0.15s; }
.confetti span:nth-child(10) { left: 60%; animation-delay: 0.27s; }
.confetti span:nth-child(11) { left: 66%; animation-delay: 0.04s; }
.confetti span:nth-child(12) { left: 72%; animation-delay: 0.18s; }
.confetti span:nth-child(13) { left: 78%; animation-delay: 0.1s; }
.confetti span:nth-child(14) { left: 84%; animation-delay: 0.25s; }
.confetti span:nth-child(15) { left: 90%; animation-delay: 0.02s; }
.confetti span:nth-child(16) { left: 94%; animation-delay: 0.2s; }
.confetti span:nth-child(17) { left: 40%; animation-delay: 0.35s; }
.confetti span:nth-child(18) { left: 64%; animation-delay: 0.32s; }

@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(60vh) rotate(320deg); }
}

@media (prefers-reduced-motion: reduce) {
  .confetti {
    display: none;
  }
}

/* A new project: one big borderless name, a borderless line, then the buttons. */
.compose-title {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xl);
  line-height: var(--line-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.compose-line {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-md);
}

.compose-title::placeholder,
.compose-line::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.compose-title:focus,
.compose-line:focus {
  outline: none;
}

.compose-title:focus-visible,
.compose-line:focus-visible {
  box-shadow: 0 2px 0 var(--color-accent);
}

.compose-title[aria-invalid="true"] {
  box-shadow: 0 2px 0 var(--color-danger);
}

.compose-actions {
  margin-top: var(--space-5);
}

.compose-next {
  max-width: 36rem;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

@media (max-width: 760px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-entry {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .timeline-when {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .day-people {
    display: none;
  }

  .wave {
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
  }
}

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

  .start-arrow {
    display: none;
  }
}

.activity-head h1 {
  font-size: var(--text-xl);
  line-height: var(--line-xl);
}

.activity-lede {
  margin: calc(var(--space-3) * -1) 0 var(--space-5);
}


/* ---- Home, two views ------------------------------------------------------------------------- */

/* The switch between them sits at the top right of the projects. */
.home-view {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.home-logo {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-2);
  border-radius: var(--radius-pill);
}

.home-logo--lg {
  width: 80px;
  height: 80px;
}

.home-mark {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
}

.home-mark--lg {
  font-size: var(--text-display);
  line-height: var(--line-display);
}

.jump-hint {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.jump-hint kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-chip);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
}

/* Light buttons with an icon: start a project, invite, people, admin. */
.home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.home-actions--stack {
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 0;
}

.home-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.home-chip .icon {
  color: var(--color-link);
}

.home-chip:hover {
  border-color: var(--color-border-input);
}

/* Compact: the projects alone, four to a row. */
.home-compact {
  position: relative;
  width: 100%;
  max-width: var(--size-home);
  margin: 0 auto;
  padding-top: var(--space-6);
}

.home-compact .home-view {
  top: 0;
  right: 0;
}

/* Wide: start on the left, projects in the middle, what happened on the right. */
.home-wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--size-home-wide);
  margin: 0 auto;
  padding-top: var(--space-5);
}

.home-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  padding-top: var(--space-8);
  text-align: right;
}

.home-side h1 {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
}

.home-panel {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  /* A shade of whatever colour the person chose for the page. */
  background: color-mix(in srgb, var(--color-bg), var(--color-text) 6%);
  border-radius: var(--radius-card);
}

.home-panel .board-foot {
  margin-top: var(--space-3);
}

.home-recent {
  padding-top: var(--space-8);
  font-size: var(--text-sm);
}

.home-recent h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--line-md);
}

.home-recent h2 a {
  font-size: var(--text-sm);
  font-weight: 500;
}

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

.recent-list li + li {
  margin-top: var(--space-3);
}

.recent-when {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.recent-when .kind-dot {
  margin-left: 0;
}

.recent-list p {
  margin: 2px 0 0 calc(10px + var(--space-2));
}

.recent-list .avatar--xs {
  vertical-align: -5px;
}

.recent-people {
  margin-top: var(--space-5);
}

.avatar-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.avatar-row > span + span .avatar {
  margin-left: -4px;
}

/* A project card: faces of the few people on it at the foot; a darker border under the pointer. */
.card-faces {
  display: flex;
  gap: 2px;
}

.card:has(.card-link:hover) {
  box-shadow: none;
}

@media (max-width: 1100px) {
  .home-wide {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--size-sheet);
  }

  .home-side,
  .home-recent {
    align-items: flex-start;
    padding-top: 0;
    text-align: left;
  }

  .home-actions--stack {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (max-width: 760px) {
  .card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-mark--lg {
    font-size: var(--text-xl);
    line-height: var(--line-xl);
  }
}

@media (max-width: 480px) {
  .card-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Home's cards: a smaller name, at most two lines of it, and one line of description. */
.card-grid--2 .card,
.card-grid--4 .card {
  min-height: 144px;
  padding: var(--space-4);
}

.card-grid--2 .card h3,
.card-grid--4 .card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--text-md);
  line-height: var(--line-md);
  font-weight: 800;
}

.card-grid--4 .card p.clamp {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  font-size: var(--text-sm);
}

/* ---- To-dos, design pass 2 ------------------------------------------------------------------ */

.btn--small {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.todos-head h1 {
  margin-bottom: var(--space-3);
}

.todos-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-6);
}

.todos-toolbar .new-list[open] {
  flex-basis: 100%;
  order: 3;
}

.todos-filter {
  max-width: 13rem;
  min-height: 36px;
}

.view-switch {
  display: inline-flex;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.view-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  color: var(--color-text-muted);
}

.view-switch a + a {
  border-left: 1px solid var(--color-border-input);
}

.view-switch a[aria-current="page"] {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.showing {
  margin: calc(var(--space-4) * -1) 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.todo-board > * + * {
  margin-top: var(--space-6);
}

.todo-board--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.todo-board--grid > * + * {
  margin-top: 0;
}

.todo-board--grid .todo-group--loose {
  grid-column: 1 / -1;
}

.todo-board--grid .todolist {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* A to-do's row: a handle to drag it by, the tick, the name and its chips. */
.todo {
  position: relative;
}

.drag-handle {
  position: absolute;
  left: calc(var(--space-5) * -1);
  top: var(--space-2);
  display: inline-flex;
  color: var(--color-text-muted);
  opacity: 0;
  transform: rotate(90deg);
}

.todo:hover .drag-handle {
  opacity: 1;
}

.todo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 22px;
  padding: 0 var(--space-2) 0 2px;
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-xs);
}

.todo-chip .icon {
  margin-left: var(--space-1);
  color: var(--color-text-muted);
}

.todo-chip--icon {
  padding: 0 var(--space-1);
}

.todo-chip--late {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.todo-chip--late .icon {
  color: var(--color-danger);
}

/* A to-do just added flashes once, so the eye finds it. */
.todo--new {
  animation: just-added 2.4s var(--motion-ease);
}

@keyframes just-added {
  0%,
  40% {
    background: var(--color-warning-soft);
  }

  100% {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .todo--new {
    animation: none;
    background: var(--color-warning-soft);
  }
}

/* The add form, in place. */
.todo-compose {
  margin-top: var(--space-2);
}

.todo-compose-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
  color: var(--color-link);
  font-size: var(--text-md);
  text-decoration: underline;
  list-style: none;
  cursor: pointer;
}

.todo-compose-summary::-webkit-details-marker {
  display: none;
}

.todo-compose[open] > .todo-compose-summary {
  display: none;
}

.tick--ghost {
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-color: var(--color-border);
}

.compose-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.compose-todo-title {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--color-border-input);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-md);
}

.compose-todo-title::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.compose-todo-title:focus {
  outline: none;
  border-bottom: 2px solid var(--color-accent);
}

/* Label on the left, the field on the right: the add form and a to-do's own page. */
.form-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-4) calc(22px + var(--space-3));
}

.form-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.form-row-label {
  padding-top: var(--space-2);
  font-weight: 700;
  text-align: right;
}

.compose-buttons {
  margin-left: calc(22px + var(--space-3) + 7rem + var(--space-3));
}

/* The people picker: chips and a name box; the tick boxes are kept for when there is no script. */
.people-picker {
  position: relative;
  min-width: 0;
}

.picker-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: var(--space-1) 0;
  border-bottom: 1px dotted var(--color-border-input);
  cursor: text;
}

.picker-chips {
  display: contents;
}

.picker-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 26px;
  padding: 0 var(--space-1) 0 var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}

.picker-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  cursor: pointer;
}

.picker-chip-x:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.picker-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
}

.picker-input:focus {
  outline: none;
}

.picker-box:focus-within {
  border-bottom: 2px solid var(--color-accent);
}

.picker-options {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  min-width: 14rem;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-menu);
  list-style: none;
}

.picker-options li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-chip);
  cursor: pointer;
}

.picker-options li.is-active,
.picker-options li:hover {
  background: var(--color-link);
  color: var(--color-on-accent);
}

.picker-options li.picker-none {
  color: var(--color-text-muted);
  cursor: default;
}

/* When a to-do is due. */
.date-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.date-choices .check {
  min-height: 32px;
}

.date-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

.date-fields .field {
  margin: 0;
}

/* Subtasks in the add form. */
.subtask-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.subtask-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.subtask-title {
  flex: 1 1 14rem;
}

.subtask-who {
  flex: 0 1 12rem;
}

.step-mark {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-pill);
}

/* A to-do's own page. */
.todo-page-title {
  margin-bottom: var(--space-3);
}

.todo-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.complete-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4) 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-md);
  cursor: pointer;
}

.complete-btn:hover {
  border-color: var(--color-accent);
}

.complete-btn .tick {
  margin-top: 0;
}

.tick--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.tick--round {
  border-radius: var(--radius-pill);
}

.added-by {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.added-by .avatar--xs {
  margin-left: var(--space-1);
}

.form-rows--page {
  margin-left: 0;
  font-size: var(--text-md);
}

.form-rows--page .form-row {
  grid-template-columns: 8rem minmax(0, 1fr);
}

.inline-edit > summary {
  list-style: none;
  cursor: pointer;
}

.inline-edit > summary::-webkit-details-marker {
  display: none;
}

.inline-value {
  display: block;
  min-height: 40px;
  padding: var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
}

.inline-edit > summary.inline-value:hover {
  background: var(--color-surface-2);
}

.inline-edit[open] > summary.inline-value {
  display: none;
}

.placeholder {
  color: var(--color-text-muted);
}

.inline-form-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.subtasks .steps {
  margin-bottom: var(--space-2);
}

.step .todo-chip {
  flex: none;
}

.step-remove {
  margin-left: auto;
}

/* With a pointer, a subtask's bin shows only on the row it points at, or when reached by keyboard. */
@media (hover: hover) {
  .step-remove {
    opacity: 0;
  }

  .step:hover .step-remove,
  .step-remove:focus-within {
    opacity: 1;
  }
}

.step-add > summary {
  list-style: none;
  cursor: pointer;
}

.step-add > summary::-webkit-details-marker {
  display: none;
}

.add-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--color-text-muted);
}

.add-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.step-add[open] > .add-link {
  display: none;
}

.subtask-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.subtask-form .field {
  flex: 1 1 14rem;
  margin: 0;
}

.subtask-form .field--inline {
  flex: 0 1 auto;
}

/* Comments: the name, title and time; a menu for changing or deleting; a small box to start one. */
.discussion {
  margin: var(--space-7) calc(var(--space-7) * -1) 0;
  padding: var(--space-5) var(--space-7) 0;
  border-top: 1px solid var(--color-border);
}

.message .rich,
.comment .rich,
.form-rows--page {
  max-width: 50rem;
}

.byline {
  justify-content: space-between;
}

.comment-menu {
  flex: none;
}

.comment-edit {
  display: none;
}

.comment-edit:target {
  display: block;
}

.composer {
  margin-top: var(--space-4);
}

.composer-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  list-style: none;
  cursor: text;
}

.composer-summary::-webkit-details-marker {
  display: none;
}

.composer-hint {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.composer[open] .composer-hint {
  display: none;
}

.composer-form {
  margin-left: calc(40px + var(--space-3));
}

.composer-form .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Who is told: a sentence, faces and two pills. */
.notify-line {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.notify-pills {
  align-items: center;
  margin-top: var(--space-2);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
}

.pill-btn:hover {
  background: var(--color-surface-2);
}

/* The who-is-told page. */
.notify-page {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-6);
}

.notify-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.notify-card .tick {
  margin-top: 0;
}

.notify-main h1 {
  font-size: var(--text-xl);
  line-height: var(--line-xl);
}

.notify-quick {
  margin: var(--space-2) 0 var(--space-4);
}

.text-btn--link {
  color: var(--color-link);
  font-size: var(--text-sm);
}

.notify-group {
  margin-top: var(--space-4);
}

.notify-group legend {
  margin-bottom: var(--space-2);
  font-weight: 800;
}

.notify-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.notify-person input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}

@media (max-width: 760px) {
  .form-rows {
    margin-left: 0;
  }

  .form-row,
  .form-rows--page .form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .form-row-label {
    padding-top: 0;
    text-align: left;
  }

  .compose-buttons {
    margin-left: 0;
  }

  .todo-board--grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .notify-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer-form {
    margin-left: 0;
  }

  .discussion {
    margin: var(--space-6) calc(var(--space-4) * -1) 0;
    padding: var(--space-4) var(--space-4) 0;
  }

  .drag-handle {
    display: none;
  }
}

/* On a phone every control of design pass 2 is a full finger's worth too. */
@media (max-width: 760px) {
  .btn--small,
  .todo-compose-summary,
  .add-link,
  .pill-btn,
  .todos-filter,
  .composer-summary,
  .inline-value {
    min-height: var(--size-tap);
  }

  .icon-btn--small {
    width: var(--size-tap);
    height: var(--size-tap);
  }

  .view-switch a {
    width: var(--size-tap);
    height: var(--size-tap);
  }

  .picker-input,
  .subtask-row .input,
  .subtask-row .select {
    min-height: var(--size-tap);
  }
}


/* ---- the frame, design pass 2 ---------------------------------------------------------------- */

/* The sheet's bar stays in reach while the page scrolls. */
.sheet-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--color-surface);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.due-link {
  font-weight: 700;
}

.to-top {
  position: fixed;
  left: var(--space-4);
  bottom: calc(var(--size-bottombar) + var(--space-3));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: var(--shadow-button);
}

.to-top[hidden] {
  display: none;
}

.to-top:hover {
  background: var(--color-surface-3);
}

@media (max-width: 760px) {
  .to-top {
    min-height: var(--size-tap);
  }
}

/* ---- writing a message, design pass 2 -------------------------------------------------------- */

.compose--message .compose-title {
  margin-top: var(--space-3);
}

.select--pill {
  width: auto;
  min-height: 36px;
  padding-right: var(--space-6);
  font-size: var(--text-sm);
}

/* A bare editor: its toolbar runs across the sheet between two lines, the writing area has no box. */
.editor--bare {
  margin-top: var(--space-4);
}

.editor--bare .editor-bar {
  margin: 0 calc(var(--space-7) * -1);
  padding: var(--space-2) var(--space-7);
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.editor--bare .editor-area {
  min-height: 16rem;
  padding: var(--space-4) 0;
  border: 0;
  box-shadow: none;
}

.editor--bare .editor-area:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.compose--message fieldset {
  margin-top: var(--space-5);
}

.compose-foot {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

@media (max-width: 760px) {
  .editor--bare .editor-bar {
    margin: 0 calc(var(--space-4) * -1);
    padding: var(--space-2) var(--space-4);
  }

  .select--pill {
    min-height: var(--size-tap);
  }
}

.editor-area[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
}

/* ---- Card Board, polish (design pass 2) ------------------------------------------------------ */

.board-head h1 {
  margin-bottom: var(--space-5);
}

.lanes {
  gap: var(--space-4);
  min-height: 26rem;
}

.lane {
  flex: 1 0 14.5rem;
  max-width: 22rem;
  gap: var(--space-2);
  min-height: 24rem;
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 0;
  border-radius: var(--radius-md);
}

.lane--incoming {
  border-top: 0;
  box-shadow: inset 0 3px 0 var(--color-accent);
}

.lane--done {
  box-shadow: inset 0 3px 0 var(--color-success);
}

.lane--not-now {
  box-shadow: inset 0 3px 0 var(--color-border-input);
}

.lane-head {
  min-height: 32px;
  gap: var(--space-1);
}

.lane-head h2 {
  flex: 0 1 auto;
  font-size: var(--text-base);
  line-height: var(--line-base);
}

.lane-head .lane-count {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.lane-head .lane-count::before {
  content: "(";
}

.lane-head .lane-count::after {
  content: ")";
}

.lane-head .lane-menu {
  margin-left: auto;
}

.lane-head .lane-menu > summary.icon-btn {
  background: none;
  border-color: transparent;
}

.lane-head .lane-menu > summary.icon-btn:hover {
  background: var(--color-surface-3);
}

.lane-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.lane-add::-webkit-details-marker {
  display: none;
}

.lane-add:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.add-card[open] > .lane-add,
.lane--add details[open] > .lane-add {
  display: none;
}

.add-card-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 0;
  box-shadow: var(--shadow-raised);
}

.add-card-form .field {
  margin: 0;
}

/* An empty column is just room: no box, no words. It lights up when a card is dragged over it. */
.lane-cards {
  min-height: 4rem;
}

.lane-cards:empty {
  border: 0;
}

.lane-cards:empty::before {
  content: none;
}

.task-card {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-button);
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.task-card-link {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--line-sm);
}

.task-card-meta {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.task-card-meta .badge {
  font-size: var(--text-xs);
}

.lane-hold {
  margin-top: auto;
  border-top: 1px dashed var(--color-border);
}

.lane.lane--folded {
  flex: 0 0 auto;
  padding: 0;
}

/* The last lane adds a column. */
.lane--add {
  flex: 0 0 11rem;
  min-height: 0;
  padding: var(--space-2);
  background: none;
  border: 1px dashed var(--color-border-input);
}

.lane--add .lane-add {
  justify-content: center;
}

.move-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.move-row .select {
  width: auto;
  min-width: 12rem;
}

@media (max-width: 760px) {
  .lane-add,
  .move-row .btn {
    min-height: var(--size-tap);
  }
}

/* A closed column menu keeps nothing laid out inside it. */
.lane-menu:not([open]) > .menu-panel {
  display: none;
}

.lane--incoming {
  box-shadow: inset 0 3px 0 var(--color-highlight);
}

.lane-hold-title .lane-count {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
}

.lane-hold-title .lane-count::before {
  content: "(";
}

.lane-hold-title .lane-count::after {
  content: ")";
}

/* The arrows that move a to-do show when it is pointed at or reached with the keyboard. */
@media (hover: hover) {
  .todo-move {
    opacity: 0;
    transition: opacity var(--motion-fast);
  }

  .todo:hover .todo-move,
  .todo:focus-within .todo-move {
    opacity: 1;
  }
}

/* Renaming a list opens from its menu. */
.list-edit {
  display: none;
  margin-bottom: var(--space-5);
}

.list-edit:target {
  display: block;
}

/* The message board: a menu to pick what to show, and each message as a title over one line. */
.board-filter > summary {
  min-height: 36px;
  list-style: none;
}

.board-filter > summary::-webkit-details-marker {
  display: none;
}

.board-filter .menu-panel {
  left: 0;
  right: auto;
}

.todos-toolbar .pill-btn {
  min-height: 36px;
}

.todos-toolbar .pill-btn[aria-current="page"] {
  background: var(--color-surface-3);
}

.message-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-who {
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .board-filter > summary,
  .todos-toolbar .pill-btn {
    min-height: var(--size-tap);
  }

  .message-line {
    white-space: normal;
  }
}

/* ---- Chat and pings (Phase 6) --------------------------------------------------------------------- */

.pings-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-3);
  background: var(--color-warning-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.pings-icon {
  display: none;
}

.pings-link:hover,
.pings-link[aria-current="page"] {
  box-shadow: inset 0 0 0 2px var(--color-highlight);
}

.unread-dot {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 var(--space-1);
  background: var(--color-unread);
  border-radius: var(--radius-pill);
}

.sheet--chat .sheet-body {
  padding-bottom: 0;
}

.chat {
  display: flex;
  flex-direction: column;
  max-width: 52rem;
  margin: 0 auto;
}

.chat-header {
  margin-bottom: var(--space-4);
  text-align: center;
}

.chat-here {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.chat-here-faces {
  display: inline-flex;
}

.chat-here-faces > span + span .avatar {
  margin-left: -4px;
}

.chat-older {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  text-align: center;
}

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

.chat-day {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-day::before,
.chat-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.chat-line {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.chat-line--more {
  margin-top: 0;
}

.chat-line:hover,
.chat-line:focus-within {
  background: var(--color-surface-2);
}

.chat-line:target {
  background: var(--color-warning-soft);
}

.chat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.chat-time {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.chat-text {
  font-size: var(--text-md);
  line-height: var(--line-base);
  overflow-wrap: anywhere;
}

.chat-text--gone {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.chat-edited {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.chat-quote {
  display: block;
  margin: 2px 0;
  padding: 2px var(--space-2);
  border-left: 3px solid var(--color-border-input);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.chat-quote:hover {
  color: var(--color-text);
}

.chat-edit {
  display: none;
  margin-top: var(--space-2);
}

.chat-edit:target {
  display: block;
}

.chat-edit form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat-menu .menu-panel {
  min-width: 12rem;
}

@media (hover: hover) {
  .chat-menu {
    opacity: 0;
  }

  .chat-line:hover .chat-menu,
  .chat-menu:focus-within,
  .chat-menu[open] {
    opacity: 1;
  }
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  text-align: center;
}

.chat-typing {
  min-height: 20px;
  margin: var(--space-2) 0 0 calc(40px + var(--space-5));
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* The box to write in stays at the bottom of the screen while the lines scroll above it. */
.chat-composer {
  position: sticky;
  bottom: var(--size-bottombar);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) calc(var(--space-7) * -1) 0;
  padding: var(--space-3) var(--space-7) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.chat-composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.chat-input {
  flex: 1;
  min-width: 0;
  min-height: var(--size-tap);
  max-height: 12rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-md);
  line-height: var(--line-base);
  resize: none;
}

.chat-input:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 0;
}

.chat-replying {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}

.chat-replying[hidden] {
  display: none;
}

.chat-replying-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
}

.chat-hint {
  margin: 0;
}

/* A Chat card on the project page: the last few lines. */
.chat-peek {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-sm);
}

.chat-peek-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ping-start {
  margin-bottom: var(--space-5);
}

.ping-start > summary {
  list-style: none;
}

.ping-start > summary::-webkit-details-marker {
  display: none;
}

.ping-start[open] > summary {
  margin-bottom: var(--space-3);
}

.ping-start-form {
  max-width: 34rem;
}

@media (max-width: 760px) {
  .chat-composer {
    margin: var(--space-2) calc(var(--space-4) * -1) 0;
    padding: var(--space-3) var(--space-4);
  }

  .chat-line {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 0 var(--space-2);
  }

  .chat-line .avatar {
    width: 32px;
    height: 32px;
  }

  .chat-typing {
    margin-left: 0;
  }

  .pings-link {
    justify-content: center;
    min-width: var(--size-tap);
    min-height: var(--size-tap);
    padding: 0 var(--space-2);
  }

  .pings-icon {
    display: inline-flex;
  }

  .pings-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .pings-plus {
    display: none;
  }
}

/* The drop beside Home's buttons: light, dark or the device's choice. */
.home-look {
  position: relative;
  align-self: center;
}

.home-look > summary {
  list-style: none;
  color: var(--color-text-muted);
}

.home-look > summary::-webkit-details-marker {
  display: none;
}

.home-look .menu-panel {
  min-width: 15rem;
  padding-bottom: var(--space-3);
}

.home-look .segmented {
  margin: 0 var(--space-3);
}

.home-actions--stack .home-look {
  align-self: flex-end;
}

.home-look .menu-title {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

/* The colour behind the page, as each person chose it (cookie, set from the drop on Home). The quiet
   surfaces and the lines follow it, so no corner keeps another tint. */
:root[data-tint="neutral"] {
  --color-bg: var(--color-bg-neutral);
  --color-surface: var(--color-surface-neutral);
  --color-surface-2: var(--color-surface-2-neutral);
  --color-surface-3: var(--color-surface-3-neutral);
  --color-border: var(--color-border-neutral);
}
:root[data-tint="lavender"] {
  --color-bg: var(--color-bg-lavender);
  --color-surface: var(--color-surface-lavender);
  --color-surface-2: var(--color-surface-2-lavender);
  --color-surface-3: var(--color-surface-3-lavender);
  --color-border: var(--color-border-lavender);
}
:root[data-tint="cream"] {
  --color-bg: var(--color-bg-cream);
  --color-surface: var(--color-surface-cream);
  --color-surface-2: var(--color-surface-2-cream);
  --color-surface-3: var(--color-surface-3-cream);
  --color-border: var(--color-border-cream);
}
:root[data-tint="mint"] {
  --color-bg: var(--color-bg-mint);
  --color-surface: var(--color-surface-mint);
  --color-surface-2: var(--color-surface-2-mint);
  --color-surface-3: var(--color-surface-3-mint);
  --color-border: var(--color-border-mint);
}

.tint-switch {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-4) 0;
}

.home-look .tint-switch {
  margin: var(--space-2) var(--space-3) 0;
}

.tint-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
}

.tint-swatch:hover,
.tint-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.tint-swatch--mint { background: var(--color-bg-mint); }
.tint-swatch--neutral { background: var(--color-bg-neutral); }
.tint-swatch--lavender { background: var(--color-bg-lavender); }
.tint-swatch--cream { background: var(--color-bg-cream); }

@media (max-width: 760px) {
  .tint-swatch {
    width: var(--size-tap);
    height: var(--size-tap);
  }
}

.tint-swatch .icon {
  visibility: hidden;
}

.tint-swatch[aria-pressed="true"] .icon {
  visibility: visible;
}

/* ---- New for you and mentions (Phase 7) --------------------------------------------------------- */

.topbar-side {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hey {
  position: relative;
}

.hey > summary {
  list-style: none;
  cursor: pointer;
}

.hey > summary::-webkit-details-marker {
  display: none;
}

.hey-panel {
  width: min(26rem, calc(100vw - var(--space-5)));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding-bottom: var(--space-2);
}

.hey-tray-tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.hey-filter {
  flex: 1;
  min-height: 36px;
}

.hey-quiet {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-1) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hey-heading {
  margin: var(--space-3) var(--space-3) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#hey-page-list .hey-heading {
  margin-left: 0;
}

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

.hey-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}

.hey-link:hover,
.hey-link:focus-visible {
  background: var(--color-surface-2);
}

.hey-item--new .hey-link {
  background: var(--color-accent-soft);
}

.hey-item--new .hey-link:hover {
  background: var(--color-surface-2);
}

.hey-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--text-sm);
}

.hey-words {
  overflow-wrap: anywhere;
}

.hey-excerpt {
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hey-meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.hey-item .unread-dot {
  margin-top: var(--space-2);
}

.hey-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3);
  color: var(--color-text-muted);
}

.hey-tray-foot {
  margin: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-sm);
}

/* A person named with @, in rich text and in chat. */
.mention {
  padding: 0 var(--space-1);
  background: var(--color-info-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
}

.mention-options {
  position: absolute;
  z-index: 60;
  min-width: 14rem;
  margin: 0;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  list-style: none;
}

.mention-options li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mention-options li[aria-selected="true"],
.mention-options li:hover {
  background: var(--color-surface-3);
}

.mention-about {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.day-picks {
  margin-bottom: var(--space-3);
}

.day-pick {
  min-width: 4rem;
}

@media (max-width: 760px) {
  .topbar-side {
    gap: var(--space-1);
  }

  .hey-filter {
    min-height: var(--size-tap);
  }
}

/* Pings and New for you share one pale pill at the top right, as two buttons inside it. */
.topbar-side {
  justify-self: end;
  gap: 0;
  padding: 2px;
  background: var(--color-warning-soft);
  border-radius: var(--radius-sm);
}

.topbar-side .pings-link {
  background: none;
  border-radius: var(--radius-sm);
}

.hey-summary.pings-link {
  border-radius: var(--radius-sm);
}

/* ---- Sign-in pages: what the app is on the left, the form on the right (2026-10-16) -------------- */

.gateway {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(24rem, 1fr);
  align-items: stretch;
  min-height: 100vh;
  padding: 0;
}

.gateway-show {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  overflow: hidden;
  padding: var(--space-7) var(--space-7) var(--space-7) var(--space-8);
  background: var(--color-accent-soft);
}

.gateway-shot {
  width: min(100%, 44rem);
  transform: perspective(1600px) rotateY(9deg) rotateX(3deg);
  transform-origin: left center;
}

.gateway-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 6px solid var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
}

.gateway-pitch {
  max-width: 34rem;
}

.gateway-headline {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: var(--text-display);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.gateway-sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.gateway-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface);
}

.gateway-inner {
  width: 100%;
  max-width: 26rem;
}

.gateway-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: var(--space-6);
}

.gateway-brand img {
  width: 56px;
  height: 56px;
  border-radius: 0;
}

.gateway-card {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.gateway-card h1 {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: left;
}

.gateway-card .lede {
  margin: 0 0 var(--space-5);
  font-size: var(--text-md);
  text-align: left;
}

.gateway-foot {
  text-align: left;
  font-size: var(--text-base);
}

.gateway-foot a {
  font-weight: 700;
}

.input-with-icon {
  position: relative;
  display: block;
}

.input-with-icon .input {
  padding-right: calc(var(--space-6) + var(--space-2));
}

.input-icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  display: inline-flex;
  color: var(--color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.label-link {
  font-size: var(--text-sm);
}

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

  .gateway-show {
    display: none;
  }

  .gateway-side {
    align-items: flex-start;
    padding: var(--space-6) var(--space-4);
  }
}

/* New for you: the heading with Mark all read beside it, the filter and snooze at the foot. */
.hey-tray-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) var(--space-3) var(--space-1);
}

.hey-tray-head .hey-heading {
  margin: 0;
  color: var(--color-warning);
  font-size: var(--text-md);
  letter-spacing: 0;
  text-transform: none;
}

.hey-tray-head form {
  margin: 0;
}

.hey-tray .hey-tray-tools {
  position: sticky;
  bottom: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.field--with-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.field--with-link > label {
  grid-row: 1;
  grid-column: 1;
}

.field--with-link > .label-link {
  grid-row: 1;
  grid-column: 2;
}

.field--with-link > .input-with-icon {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* ---- The side panel: pings and New for you (as in the reference, 2026-10-16) ---------------------- */

.tray-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--color-warning-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.tray-pill:hover,
.tray-pill[aria-expanded="true"] {
  box-shadow: inset 0 0 0 2px var(--color-highlight);
}

.tray-pill-part {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.topbar-side {
  padding: 0;
  background: none;
}

.side-tray {
  position: fixed;
  top: var(--size-topbar);
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: min(26rem, 100vw);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
}

.side-tray[hidden] {
  display: none;
}

.side-tray-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2) 0;
}

.side-tray-close {
  margin-left: auto;
}

.side-tray-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.side-tray .hey-tray {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.side-tray .hey-tray-tools {
  margin-top: auto;
  background: var(--color-bg);
}

/* On a wide screen the page makes room for the panel; on a narrow one the panel covers it. */
@media (min-width: 1100px) {
  body.tray-open .stage,
  body.tray-open .flashes {
    padding-right: calc(26rem + var(--space-4));
  }
}

.tray-heading,
.tray-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 700;
}

.tray-title {
  font-size: var(--text-lg);
}

.tray-link {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.tray-link:hover {
  text-decoration: underline;
}

.tray-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) var(--space-3) var(--space-3);
  padding: 0;
  list-style: none;
}

.tray-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 3.5rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.tray-person:hover {
  color: var(--color-text);
}

.tray-person-face {
  position: relative;
}

.tray-person-face .unread-dot {
  position: absolute;
  top: 0;
  right: -2px;
  margin: 0;
}

.tray-new-ping {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px dashed var(--color-link);
  border-radius: var(--radius-pill);
  color: var(--color-link);
}

.tray-person:first-child span:last-child {
  color: var(--color-link);
}

.hey-heading--accent {
  color: var(--color-warning);
  font-size: var(--text-md);
  letter-spacing: 0;
  text-transform: none;
}

.hey-heading--quiet {
  margin-top: var(--space-4);
}

.hey-face {
  position: relative;
  flex: none;
}

.hey-face-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
}

.hey-kind {
  position: absolute;
  right: -4px;
  top: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
}

.hey-kind--reminder,
.hey-kind--mention {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.hey-words {
  font-weight: 700;
}

.hey-item--new .hey-link {
  background: none;
}

.hey-item .hey-link:hover {
  background: var(--color-surface-2);
}

.snooze-menu > summary {
  min-height: 36px;
  white-space: nowrap;
}

.menu-panel--right {
  right: 0;
  left: auto;
}

@media (max-width: 760px) {
  .snooze-menu > summary {
    min-height: var(--size-tap);
  }

  .tray-pill {
    gap: var(--space-2);
    min-height: var(--size-tap);
    padding: 0 var(--space-2);
  }

  .side-tray {
    width: 100vw;
  }
}

/* The name beside the fire logo: "Ez" in the fire's amber, "Camp" in the page's ink. On a dark page the
   colours are the logo's own, yellow and cream. */
.gateway-brand {
  gap: var(--space-2);
  text-decoration: none;
}

.brand-word {
  color: var(--color-brand-camp);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.brand-ez {
  color: var(--color-brand-ez);
}

.jump > summary img,
.home-logo {
  border-radius: 0;
}

/* Sign-in pages wear the app's own first look: the page's ground (the colour each person picked, mint
   to start), and the form on a white sheet like every page inside. */
.gateway-page {
  background: var(--color-bg);
}

.gateway-show {
  background: none;
}

.gateway-side {
  background: none;
}

.gateway-inner {
  max-width: 28rem;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sheet);
}

@media (max-width: 960px) {
  .gateway-inner {
    padding: var(--space-5) var(--space-4);
  }
}

/* ---- Chat fills the screen; only its lines scroll (2026-10-21) ------------------------------------ */

/* The sheet runs from under the top bar to just above the bottom bar, at any amount of talk. */
.sheet--chat {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--size-topbar) - var(--size-bottombar) - var(--space-4));
  min-height: 24rem;
}

.sheet--chat .sheet-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding-top: var(--space-5);
  padding-bottom: 0;
}

.sheet--chat .chat {
  flex: 1;
  width: 100%;
  min-height: 0;
}

.chat-header {
  flex: none;
  margin-bottom: var(--space-3);
}

.chat-scroll {
  flex: 1;
  min-height: 0;
  margin: 0 calc(var(--space-3) * -1);
  padding: 0 var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.chat-scroll::-webkit-scrollbar {
  width: 6px;
}

.chat-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.chat-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* An empty room puts its note in the middle of the space. */
.chat-scroll:has(.chat-empty) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chat-typing {
  flex: none;
  min-height: 20px;
  margin-top: var(--space-1);
}

.sheet--chat .chat-composer {
  position: static;
  flex: none;
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .sheet--chat {
    height: calc(100dvh - var(--size-topbar) - var(--size-bottombar) - var(--space-2));
  }

  .sheet--chat .sheet-body {
    padding-top: var(--space-3);
  }
}

.stage:has(.sheet--chat) {
  padding-bottom: var(--space-4);
}

@media (max-width: 760px) {
  .stage:has(.sheet--chat) {
    padding-bottom: var(--space-2);
  }
}

/* ---- Outbox (development only): what the app would have emailed ---------------------------------- */
.outbox {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.outbox-row {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}
.outbox-row summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  cursor: pointer;
}
.outbox-subject {
  min-width: 0;
  overflow-wrap: anywhere;
}
.outbox-status {
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.outbox-status--sent {
  color: var(--color-success);
}
.outbox-status--failed,
.outbox-status--bounced {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.outbox-text {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Clients: what the team sees about what clients see ------------------------------------------ */
.client-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}
.client-bar > span {
  flex: 1 1 16rem;
  min-width: 0;
}
.client-bar--open {
  background: var(--color-info-soft);
  border-color: transparent;
}
.client-bar form {
  margin: 0;
}
.badge--client {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-info-soft);
}
.client-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ---- Calendar: a project's Schedule and the calendar across projects ----------------------------- */
.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
}
.cal-head h1 {
  margin: 0;
}
.cal-range {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}
.cal-actions,
.cal-move,
.cal-filter {
  gap: var(--space-2);
  align-items: center;
}
.cal-filter {
  margin-bottom: var(--space-4);
}
.seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
}
.seg a {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}
.seg a[aria-current="page"] {
  background: var(--color-surface);
  box-shadow: var(--shadow-menu);
  font-weight: 700;
}
.cal-scroll {
  /* Positioned, so the hidden labels inside the grid stay inside its scrolling, not past the page. */
  position: relative;
  overflow-x: auto;
}
.cal-grid {
  width: 100%;
  min-width: 42rem;
  table-layout: fixed;
  border-collapse: collapse;
}
.cal-grid th {
  padding: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
}
.cal-day {
  height: 7.5rem;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  vertical-align: top;
}
.cal-day--other {
  background: var(--color-surface-2);
}
.cal-day--other .cal-date {
  color: var(--color-text-muted);
}
.cal-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}
.cal-date {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
}
.cal-day--today .cal-date {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.cal-add {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  opacity: 0;
}
.cal-day:hover .cal-add,
.cal-add:focus-visible {
  opacity: 1;
}
.cal-add:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.cal-entries,
.agenda-entries {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-entries li + li {
  margin-top: 2px;
}
.cal-entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--text-xs);
  line-height: var(--line-sm);
  text-decoration: none;
}
.cal-entry:hover {
  outline: 1px solid var(--color-accent);
}
.cal-entry--todo,
.cal-entry--card {
  background: transparent;
}
.cal-entry--done .cal-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.cal-entry--continued {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.cal-entries .cal-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-time {
  flex: none;
  color: var(--color-text-muted);
}
.cal-check {
  flex: none;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-border-input);
  border-radius: 3px;
}
.cal-entry--done .cal-check {
  border-color: var(--color-success);
  color: var(--color-success);
}
.cal-check .icon {
  width: 10px;
  height: 10px;
}
.cal-entry:not(.cal-entry--done) .cal-check .icon {
  visibility: hidden;
}
.cal-project {
  margin-left: auto;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cal-entries .cal-project {
  display: none;
}
.cal-more {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--text-xs);
}
.agenda {
  margin: 0;
  padding: 0;
  list-style: none;
}
.agenda-day {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.agenda-date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
}
.agenda-num {
  font-size: var(--text-xl);
  font-weight: 700;
}
.agenda-dow,
.agenda-month {
  color: var(--color-text-muted);
}
.agenda-entries li + li {
  margin-top: var(--space-1);
}
.agenda-entries .cal-entry {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}
@media (max-width: 640px) {
  .agenda-day {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}
.event-when {
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.event-when-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-md);
}
.event-people {
  margin: var(--space-5) 0;
}
.avatar-names {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--space-2) var(--space-4);
}
.avatar-names li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.schedule-peek {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  width: 100%;
  align-content: start;
}
.schedule-peek-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  text-align: left;
}
.schedule-peek-day {
  display: grid;
  flex: none;
  justify-items: center;
  width: 2.5rem;
  padding: 2px 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  line-height: 1.1;
}
.schedule-peek-day strong {
  font-size: var(--text-md);
}
.cal-filter .select {
  width: auto;
  max-width: 100%;
}

/* ---- Files: photos, logos, attachments, drop zones ------------------------------------------------ */
.avatar--photo {
  object-fit: cover;
  background: var(--color-surface-2);
}
.project-logo {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: var(--space-2);
  border-radius: var(--radius-sm);
  object-fit: cover;
  vertical-align: -0.15em;
}
.project-logo--lg {
  width: 72px;
  height: 72px;
  margin: 0;
}
.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.attachment--picture img {
  display: block;
  max-width: min(100%, 320px);
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}
.file-chip:hover {
  border-color: var(--color-accent);
}
.file-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 2.5rem;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
}
.file-badge--big {
  min-width: 4rem;
  padding: var(--space-2);
  font-size: var(--text-md);
}
.file-badge--huge {
  min-width: 7rem;
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-xl);
}
.attach-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-input);
  border-radius: var(--radius-sm);
}
.attach-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
}
.attach-input {
  max-width: 100%;
  font-size: var(--text-sm);
}
.drop-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 2px dashed var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.drop-zone.is-over,
.attach-field.is-over {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.drop-input {
  max-width: 100%;
  font-size: var(--text-sm);
}
.chat-attach {
  cursor: pointer;
}
.chat-file-names {
  margin: var(--space-1) 0 0;
}
.attached-now {
  margin-top: var(--space-3);
}

/* ---- Docs & Files --------------------------------------------------------------------------------- */
.vault-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.vault-head h1 {
  margin: 0;
  overflow-wrap: anywhere;
}
.vault-actions {
  gap: var(--space-2);
  align-items: center;
}
.menu-panel--wide {
  min-width: 20rem;
}
.menu-form {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.vault-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vault-items--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-4);
}
.vault-item {
  position: relative;
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.vault-tile {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}
.vault-face {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.vault-tile:hover .vault-face {
  border-color: var(--color-accent);
}
.vault-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vault-item--folder .vault-face {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.vault-item--document .vault-face {
  place-items: start;
  padding: var(--space-3);
  background: var(--color-surface);
  text-align: left;
}
.vault-doc-lines {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--line-sm);
  overflow-wrap: anywhere;
}
.vault-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.vault-tile:hover .vault-name {
  color: var(--color-link);
  text-decoration: underline;
}
.vault-items--list .vault-item {
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.vault-items--list .vault-tile {
  grid-column: 1 / 3;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 0;
}
.vault-items--list .vault-face {
  grid-row: 1 / 3;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}
.vault-items--list .vault-face .icon {
  width: 24px;
  height: 24px;
}
.vault-items--list .vault-doc-lines {
  display: none;
}
.vault-items--list .file-badge--big {
  min-width: 0;
  padding: 2px;
  font-size: var(--text-xs);
}
.upload-preview {
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.upload-preview img {
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}
.replace-form {
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.versions summary {
  cursor: pointer;
  list-style: revert;
}
.versions summary h2 {
  display: inline;
}
.logo-section {
  margin-bottom: var(--space-5);
}

/* ---- Docs & Files, in the shape the team knows ------------------------------------------------------ */
.vault-title {
  margin: 0 0 var(--space-4);
  overflow-wrap: anywhere;
}
.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}
.vault-layout {
  gap: var(--space-1);
  margin-left: auto;
}
.vault-layout a[aria-current="page"] {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.vault-filter {
  width: 12rem;
  max-width: 100%;
}
.vault-sort {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}
.vault-new-menu {
  left: 0;
  right: auto;
  max-height: 70vh;
  overflow-y: auto;
}
.service-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
}
.service-mark--big {
  width: 40px;
  height: 40px;
  margin-right: var(--space-2);
  font-size: var(--text-lg);
  vertical-align: middle;
}
.vault-upload {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.vault-page.is-over {
  outline: 2px dashed var(--color-accent);
  outline-offset: var(--space-2);
  border-radius: var(--radius-md);
}
.vault-items--grid .vault-tile {
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  align-content: start;
}
.vault-items--grid .vault-tile:hover {
  border-color: var(--color-accent);
}
.vault-items--grid .vault-tile:hover .vault-face {
  border-color: var(--color-border);
}
.vault-who {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-xs);
}
.vault-who-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vault-items--grid .vault-meta {
  display: none;
}
.vault-items--grid .vault-face {
  aspect-ratio: 16 / 10;
}
.vault-doc-page {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
}
.vault-doc-file {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.vault-count {
  font-size: var(--text-xs);
  font-weight: 700;
}
.vault-item--folder .vault-face {
  gap: var(--space-1);
}
.vault-items--list .vault-who {
  display: none;
}
.vault-items--list .vault-tile {
  grid-template-columns: 3rem 1fr;
  grid-template-areas: "face name" "face meta";
}
.vault-items--list .vault-face {
  grid-area: face;
}
.vault-items--list .vault-name {
  grid-area: name;
}
.vault-items--list .vault-meta {
  grid-area: meta;
}
.vault-items--list .vault-doc-lines,
.vault-items--list .vault-count {
  display: none;
}
.doc-byline {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}
.doc-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.doc-main {
  min-width: 0;
}
@media (max-width: 640px) {
  .doc-body {
    grid-template-columns: 1fr;
  }
  .doc-face {
    display: none;
  }
  .vault-layout {
    margin-left: 0;
  }
}
.attachment--card {
  flex-basis: 100%;
}
.file-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 32rem;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.file-card-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--color-link);
}
.file-card-ext {
  position: absolute;
  bottom: 2px;
  padding: 0 2px;
  border-radius: 2px;
  background: var(--color-link);
  color: var(--color-on-accent);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.file-card-text {
  display: grid;
  min-width: 0;
}
.file-card-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.compose-foot--boxed {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.select--small,
.input--small {
  min-height: 32px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  font-size: var(--text-sm);
}
.vault-when {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}
.vault-doc-icon {
  display: none;
  color: var(--color-link);
}
.vault-items--list .vault-doc-icon {
  display: inline-grid;
}
.vault-items--list .vault-doc-page {
  display: none;
}

/* ---- File icons: a page tinted with its kind's colour, the corner folded, a band with its extension --- */
.file-icon {
  position: relative;
  display: inline-grid;
  justify-items: center;
  flex: none;
  width: 40px;
  color: var(--color-file-other);
}
/* The kind's colour is the icon's own colour (currentColor) for every part below. */
.file-icon--doc { color: var(--color-file-doc); }
.file-icon--sheet { color: var(--color-file-sheet); }
.file-icon--slides { color: var(--color-file-slides); }
.file-icon--pdf { color: var(--color-file-pdf); }
.file-icon--image { color: var(--color-file-image); }
.file-icon--media { color: var(--color-file-media); }
.file-icon--archive { color: var(--color-file-archive); }
.file-icon-page {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.file-icon-page path:first-child {
  fill: color-mix(in srgb, currentColor 14%, var(--color-surface));
  stroke: color-mix(in srgb, currentColor 55%, var(--color-surface));
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.file-icon-fold {
  fill: color-mix(in srgb, currentColor 35%, var(--color-surface));
  stroke: color-mix(in srgb, currentColor 55%, var(--color-surface));
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.file-icon-mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.file-icon--media .file-icon-mark {
  fill: currentColor;
}
.file-icon-band {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 82%;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--color-file-other);
  color: var(--color-on-file);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.3;
  text-align: center;
}
.file-icon--sm {
  width: 28px;
}
.file-icon--sm .file-icon-band {
  font-size: 0.4375rem;
  padding: 0 2px;
}
.file-icon--lg {
  width: 72px;
}
.file-icon--lg .file-icon-band {
  font-size: var(--text-sm);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}
.file-icon--xl {
  width: 120px;
}
.file-icon--xl .file-icon-band {
  font-size: var(--text-lg);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* ---- Docs & Files tiles: one joined grid, files as big icons, documents and folders framed ---------- */
.vault-items--grid {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.vault-items--grid .vault-item {
  position: relative;
  min-height: 16rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.vault-items--grid .vault-tile {
  height: 100%;
  padding: var(--space-4);
  border: 0;
  border-radius: 0;
  background: none;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}
.vault-items--grid .vault-tile:hover {
  background: var(--color-surface-2);
}
.vault-items--grid .vault-tile:hover .vault-name {
  color: var(--color-text);
  text-decoration: none;
}
.vault-items--grid .vault-tile--framed {
  align-content: start;
  justify-items: stretch;
  text-align: left;
}
.vault-items--grid .vault-face {
  aspect-ratio: auto;
  min-height: 7rem;
  border: 0;
  background: none;
}
.vault-items--grid .vault-item--upload .vault-face img {
  width: 100%;
  max-height: 11rem;
  object-fit: contain;
}
.vault-items--grid .vault-tile--framed .vault-face {
  min-height: 6rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.vault-items--grid .vault-item--folder .vault-face {
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--color-accent);
}
.vault-items--grid .vault-doc-page {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-2);
}
.vault-items--grid .vault-doc-lines {
  flex-basis: 100%;
}
.vault-name--under {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vault-items--grid .vault-meta {
  display: block;
  color: var(--color-text-muted);
}
.vault-items--grid .vault-tile--framed .vault-meta,
.vault-items--grid .vault-meta-more {
  display: none;
}
.vault-who {
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.vault-who-text {
  display: grid;
  min-width: 0;
  line-height: var(--line-sm);
}
.vault-discuss {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-weight: 700;
}
.vault-show {
  align-items: center;
}
.vault-kinds > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
}
.vault-kinds > summary::-webkit-details-marker {
  display: none;
}
.vault-kinds > summary[aria-current="page"] {
  background: var(--color-surface);
  box-shadow: var(--shadow-menu);
  font-weight: 700;
}
.vault-kinds .menu-panel {
  left: 0;
  right: auto;
  min-width: 12rem;
}
.vault-items--list .vault-name--under {
  grid-area: name;
  font-weight: 700;
  text-align: left;
}
.vault-items--list .vault-tile {
  grid-template-areas: "face name" "face meta";
}
.vault-items--list .file-icon {
  width: 30px;
}
.vault-items--list .vault-discuss {
  position: static;
  align-self: center;
}
.file-icon--doc .file-icon-band { background: var(--color-file-doc); }
.file-icon--sheet .file-icon-band { background: var(--color-file-sheet); }
.file-icon--slides .file-icon-band { background: var(--color-file-slides); }
.file-icon--pdf .file-icon-band { background: var(--color-file-pdf); }
.file-icon--image .file-icon-band { background: var(--color-file-image); }
.file-icon--media .file-icon-band { background: var(--color-file-media); }
.file-icon--archive .file-icon-band { background: var(--color-file-archive); }
.mini-files {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  align-self: start;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.mini-file {
  display: grid;
  place-items: center;
  align-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-xs);
}
.mini-file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-file--document {
  place-items: start;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-2);
  text-align: left;
  color: var(--color-text-muted);
}
.mini-file--document strong {
  color: var(--color-text);
}
.mini-file .file-icon {
  width: 40px;
}
.mini-file--upload:has(img) {
  display: block;
}

/* A bar for how much of something is used, in steps of a tenth (no inline styles). */
.meter {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
}
.meter-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
}
.meter-fill--0 { width: 2%; }
.meter-fill--10 { width: 10%; }
.meter-fill--20 { width: 20%; }
.meter-fill--30 { width: 30%; }
.meter-fill--40 { width: 40%; }
.meter-fill--50 { width: 50%; }
.meter-fill--60 { width: 60%; }
.meter-fill--70 { width: 70%; }
.meter-fill--80 { width: 80%; }
.meter-fill--90 { width: 90%; }
.meter-fill--100 { width: 100%; }

/* ---- Services' own marks, in their own colours (from the tokens) -------------------------------- */
.brand-icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.brand-badge {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  vertical-align: middle;
}
.brand-icon--googledrive { color: var(--color-brand-googledrive); }
.brand-icon--googledocs { color: var(--color-brand-googledocs); }
.brand-icon--dropbox { color: var(--color-brand-dropbox); }
.brand-icon--icloud { color: var(--color-brand-icloud); }
.brand-icon--box { color: var(--color-brand-box); }
.brand-icon--notion { color: var(--color-brand-notion); }
.brand-icon--figma { color: var(--color-brand-figma); }
.brand-icon--airtable { color: var(--color-brand-airtable); }
.brand-icon--miro { color: var(--color-brand-miro); }
.brand-icon--zoho { color: var(--color-brand-zoho); }
.brand-icon--other { color: var(--color-brand-other); }
.vault-new-menu .menu-title {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

/* ---- Check-ins ------------------------------------------------------------------------------------ */
.checkins-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.checkins-head h1 {
  margin: 0;
}
.checkins-lede {
  margin: var(--space-2) 0 var(--space-5);
}
.question-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.question-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.question-row:hover {
  background: var(--color-surface-2);
}
.question-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.question-icon--small {
  width: 28px;
  height: 28px;
}
.question-main {
  display: grid;
  flex: 1 1 16rem;
  min-width: 0;
  gap: var(--space-1);
}
.question-title {
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}
.question-last {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
}
.question-head h1 {
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}
.question-asked {
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.answer-day {
  margin-top: var(--space-6);
}
.answer-date {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.answers {
  margin: 0;
  padding: 0;
  list-style: none;
}
.answer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.answer-body {
  min-width: 0;
}
.answer-discuss {
  display: inline-block;
  margin-top: var(--space-2);
}
.answer-question {
  margin-bottom: var(--space-1);
}

/* The Admin area: a block for owners and one for administrators. Each starts with a heading that runs into
   a rule, the faces of the people who hold it, then what they can do, one power per line behind a round
   tinted icon. People who do not hold a power read it without a link. */
.admin-block {
  margin-bottom: var(--space-8);
}

.ruled-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  font-weight: 900;
}

.ruled-title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

.admin-faces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  list-style: none;
}

.admin-faces a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-md);
  text-decoration: none;
}

.admin-faces a:hover span:last-child {
  text-decoration: underline;
}

.power-lede {
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--line-md);
  font-weight: 800;
}

.powers {
  display: grid;
  gap: var(--space-1);
  list-style: none;
}

.power {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}

a.power:hover,
summary.power:hover {
  background: var(--color-surface-2);
}

.power-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.power--theirs .power-icon {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.power-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: var(--space-1);
}

.power-main strong {
  font-size: var(--text-md);
  font-weight: 500;
}

a.power .power-main strong {
  color: var(--color-link);
}

.power-main .meter {
  max-width: 320px;
  margin-top: var(--space-1);
}

.power-details > summary {
  cursor: pointer;
  list-style: none;
}

.power-details > summary::-webkit-details-marker {
  display: none;
}

.power-details > summary .power-main strong {
  color: var(--color-link);
}

.power-form {
  margin: var(--space-2) 0 var(--space-3) calc(40px + var(--space-3) + var(--space-2));
}

/* A value shown in a form that this person may not change, behind a small lock. */
.locked-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* One person's projects: each row is a whole checkbox with the project's name and kind under it. */
.access-list {
  margin: var(--space-3) 0 var(--space-4);
}

.access-check {
  flex: 1;
  min-width: 0;
}

.access-check .row-main {
  display: grid;
  gap: 2px;
}

.access-check input:disabled + .row-main {
  color: var(--color-text-muted);
}

/* Merging people: the profile that goes, an arrow, the profile kept; then what moves, counted. */
.merge-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.merge-side {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.merge-side > span {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

.merge-arrow {
  color: var(--color-text-muted);
}

.merge-moves {
  margin-bottom: var(--space-3);
}

/* A pale box that warns: something cannot be undone, or could not be done. */
.note--danger {
  background: var(--color-danger-soft);
}

/* Tool names: each tool's own name, with its icon, over the box for the account's name for it. */
.field--tool-name label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tool-name-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}

/* How long pings and chats are kept: the five choices side by side, wrapping on a phone. */
.history-choice {
  margin-bottom: var(--space-5);
}

.choices--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choices--row .choice {
  flex: 0 1 auto;
}

.choices--row .choice label {
  white-space: nowrap;
}

/* The largest files: the size stands out at the end of each row. */
.meter--page {
  display: block;
  max-width: 420px;
  margin-bottom: var(--space-5);
}

.big-file-size {
  font-variant-numeric: tabular-nums;
}

/* Your accounts, in the jump menu: the one open now ticked, the others a click away. */
.jump-account-list {
  display: grid;
  gap: 2px;
  list-style: none;
}

.jump-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.jump-account:hover,
button.jump-account:focus-visible {
  background: var(--color-surface-3);
}

.jump-account--here {
  font-weight: 700;
  cursor: default;
}

.jump-account-all {
  display: inline-block;
  margin: var(--space-1) var(--space-3) 0;
  font-size: var(--text-sm);
}

/* The Launchpad: every account a person is on, as big buttons with the logo and the name. */
.launchpad-head {
  margin-bottom: var(--space-5);
  text-align: center;
}

.launchpad-head p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.launchpad-list {
  display: grid;
  gap: var(--space-3);
  max-width: 420px;
  margin: 0 auto var(--space-5);
  list-style: none;
}

.launchpad-account {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.launchpad-account:hover,
.launchpad-account:focus-visible {
  border-color: var(--color-accent);
}

.launchpad-account--here {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.launchpad-logo {
  grid-row: span 2;
}

.launchpad-name {
  font-size: var(--text-md);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.launchpad-account--invited {
  border-style: dashed;
}

/* An account's own logo keeps its shape, however wide it is, and is never cut. */
.account-logo {
  object-fit: contain;
}

.brand-logo.account-logo {
  width: auto;
  max-width: 96px;
  height: 28px;
}

.home-logo.account-logo {
  width: auto;
  max-width: 220px;
  height: 52px;
}

.home-logo--lg.account-logo {
  max-width: 280px;
  height: 80px;
}

.launchpad-logo.account-logo {
  width: 48px;
  height: 48px;
}

.jump-account-logo {
  flex: none;
  width: 20px;
  height: 20px;
}

.jump-account--here svg {
  margin-left: auto;
}

.row-account-logo {
  width: 24px;
  height: 24px;
}

.power-logo {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.power-logo-picture {
  height: 64px;
}

.power-logo-picture.account-logo {
  width: auto;
  max-width: 220px;
}

/* Invitations waiting, and starting another account: under the accounts, as wide as their list. */
.launchpad-section {
  max-width: 420px;
  margin: 0 auto var(--space-5);
}

.launchpad-section .launchpad-list {
  margin-bottom: var(--space-2);
}

.launchpad-start {
  margin-top: var(--space-3);
}

.launchpad-links {
  text-align: center;
}

.launchpad .hint {
  text-align: center;
}

/* ---- reports ---- */
.report-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.report-tile {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  height: 100%;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.report-tile:hover,
.report-tile:focus-visible {
  border-color: var(--color-border-input);
  box-shadow: var(--shadow-raised);
}

.report-tile > span:last-child {
  display: grid;
  gap: var(--space-1);
}

.report-tile-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
}

.report-rows {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.report-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.report-kind {
  display: inline-flex;
  flex: none;
  margin-top: 3px;
  color: var(--color-text-muted);
}

.report-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-4) 0 var(--space-5);
}

.report-picker .input {
  width: auto;
  min-width: 220px;
  max-width: 100%;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.report-table td {
  width: 40%;
}

.report-bar {
  display: inline-block;
  height: 10px;
  margin-right: var(--space-2);
  vertical-align: middle;
  border-radius: var(--radius-pill);
}

.report-bar--added {
  background: var(--color-info-soft);
  border: 1px solid var(--color-link);
}

.report-bar--done {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
}

.report-bar[data-share="0"] { width: 2%; }
.report-bar[data-share="1"] { width: 10%; }
.report-bar[data-share="2"] { width: 20%; }
.report-bar[data-share="3"] { width: 30%; }
.report-bar[data-share="4"] { width: 40%; }
.report-bar[data-share="5"] { width: 50%; }
.report-bar[data-share="6"] { width: 60%; }
.report-bar[data-share="7"] { width: 70%; }
.report-bar[data-share="8"] { width: 80%; }
.report-bar[data-share="9"] { width: 90%; }
.report-bar[data-share="10"] { width: 100%; }

.span-chart {
  overflow-x: auto;
}

.span-chart-weeks,
.span-chart-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(560px, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.span-chart-weeks {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.span-chart-track {
  position: relative;
  display: flex;
  min-height: 22px;
}

.span-chart-week {
  flex: 1;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-1);
}

.span-chart-bar {
  position: absolute;
  top: 3px;
  height: 16px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.span-chart-name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .report-hub {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- find ---- */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-4) 0 var(--space-5);
}

.search-form .input--lg {
  flex: 1 1 260px;
  min-width: 0;
}

.search-form select.input {
  width: auto;
}

.jump-find {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-link);
  font: inherit;
  text-align: left;
  background: none;
  border: 1px dashed var(--color-border-input);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.jump-find:hover,
.jump-find:focus-visible {
  background: var(--color-surface);
}

.jump-find[hidden] {
  display: none;
}

/* ---- timesheets ---- */
.time-log {
  margin: var(--space-3) 0;
}

.time-log > summary {
  list-style: none;
  cursor: pointer;
}

.time-log > summary::-webkit-details-marker {
  display: none;
}

.time-log-form {
  max-width: 560px;
  margin-top: var(--space-3);
}

.time-log-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.time-log-fields .field {
  flex: 1 1 140px;
}

.time-total {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

.time-amount {
  flex: none;
  min-width: 52px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.time-row {
  align-items: center;
}

.time-edit {
  position: relative;
  flex: none;
}

.time-edit > summary {
  list-style: none;
  cursor: pointer;
}

.time-edit > summary::-webkit-details-marker {
  display: none;
}

.time-edit-panel {
  position: absolute;
  z-index: 3;
  right: 0;
  top: calc(100% + var(--space-1));
  display: grid;
  gap: var(--space-2);
  width: 260px;
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}

.time-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .time-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- two-factor sign-in ---- */
.two-factor-steps {
  display: grid;
  gap: var(--space-5);
  padding-left: var(--space-5);
}

.qr-code {
  display: inline-block;
  width: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.qr-code svg {
  display: block;
  width: 100%;
  height: auto;
}

.setup-key {
  word-break: break-all;
  font-size: var(--text-sm);
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-lg);
}

/* Mark one notification read or unread: beside its row, never inside the link. */
.hey-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.hey-item > .hey-link {
  flex: 1;
  min-width: 0;
}

.hey-mark {
  flex: none;
  opacity: 0.6;
}

.hey-item:hover .hey-mark,
.hey-mark:focus-within {
  opacity: 1;
}

/* The week: one row of the month grid, taller, every entry shown. */
.cal-grid--week .cal-day {
  height: 320px;
  vertical-align: top;
}

.profile-bio {
  max-width: 60ch;
  white-space: pre-line;
}


/* Applause with a few words, on an item and on each comment. */
.applause-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.applause-form .input {
  width: 12rem;
  max-width: 100%;
}

.comment-applause {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-1);
}

.text-btn--on {
  color: var(--color-accent);
}

/* Filters above a report: each label over its box, on one line where there is room. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin: var(--space-4) 0 var(--space-5);
}

.filter-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 160px;
  max-width: 260px;
}

/* A column's own colour, from the account's soft tints: the whole column, so its cards sit on it. */
.lane.lane--tint-1 {
  background: var(--color-avatar-1);
}

.lane.lane--tint-2 {
  background: var(--color-avatar-2);
}

.lane.lane--tint-3 {
  background: var(--color-avatar-3);
}

.lane.lane--tint-4 {
  background: var(--color-avatar-4);
}

.lane.lane--tint-5 {
  background: var(--color-avatar-5);
}

.lane.lane--tint-6 {
  background: var(--color-avatar-6);
}

.lane.lane--tint-7 {
  background: var(--color-avatar-7);
}

.lane.lane--tint-8 {
  background: var(--color-avatar-8);
}


/* Groups inside a to-do list: a heading with its own to-dos and its own add form. */
.todo-group-head {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.todo-group-add > summary {
  list-style: none;
  cursor: pointer;
}

.todo-group-add > summary::-webkit-details-marker {
  display: none;
}

.todo-group-add[open] > form {
  margin-top: var(--space-3);
}

/* Who applauded: faces in a row, with their names and notes in a small panel. */
.cheers {
  position: relative;
  display: inline-block;
}

.cheers-faces {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.cheers-faces::-webkit-details-marker {
  display: none;
}

.cheers-faces .avatar + .avatar {
  margin-left: calc(var(--space-1) * -1);
}

.cheers-count {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.cheers-panel {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(100% + var(--space-1));
  width: 260px;
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}

.cheers-panel ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cheers-panel li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Files kept with a to-do, beside its notes. */
.todo-files-form {
  margin-top: var(--space-2);
}

.todo-files-remove ul {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* A card's name in the Card Table preview on the project page. */
.mini-card.mini-card--named {
  height: auto;
  padding: 2px var(--space-1);
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The project's spotlight: up to six things pinned above the tools, as quiet tiles. */
.spotlight {
  margin-bottom: var(--space-5);
}

.spotlight-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.spotlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.spotlight-item:hover {
  border-color: var(--color-accent);
}

.spotlight-item > svg {
  flex: none;
  margin-top: var(--space-1);
  color: var(--color-accent);
}

.spotlight-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* "Start from" on the new project page: a blank project or a copy of another. */
.compose-source {
  margin-top: var(--space-5);
  max-width: 36rem;
}

/* What a copy and a move each take, on the copy-or-move page. */
.check-list.move-notes {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.move-notes .check {
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
}

.move-notes .check input {
  flex: none;
  margin-top: var(--space-1);
}

.move-notes .check span {
  color: var(--color-text-muted);
  font-weight: 400;
}

.move-notes .check strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Tick rows inside a form field (projects on the invite page, email only): the box beside its words. */
.field .access-list .access-check,
.email-only-field .check {
  display: flex;
  margin-bottom: 0;
  font-weight: 400;
}

/* Set up tools: the handle a tool is dragged by. The up and down buttons do the same without a mouse. */
.tool-handle {
  display: inline-flex;
  flex: none;
  align-self: center;
  color: var(--color-text-muted);
  cursor: grab;
  transform: rotate(90deg);
  touch-action: none;
}

.tool-handle:hover {
  color: var(--color-text);
}

[data-sortable] > .is-dragging {
  opacity: 0.6;
}

/* Written words: highlighted, bigger or smaller, and tables. */
.rich mark {
  padding: 0 2px;
  color: var(--color-text);
  background: var(--color-warning-soft);
  border-radius: 2px;
}

.rich .text-lg {
  font-size: var(--text-lg);
  line-height: 1.35;
}

.rich .text-sm {
  font-size: var(--text-sm);
}

.rich table {
  display: block;
  max-width: 100%;
  margin: var(--space-3) 0;
  overflow-x: auto;
  border-collapse: collapse;
}

.rich th,
.rich td {
  min-width: 6rem;
  padding: var(--space-1) var(--space-2);
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--color-border);
}

.rich th {
  font-weight: 700;
  background: var(--color-surface-2);
}

.editor-btn mark {
  padding: 0 2px;
  color: inherit;
  background: var(--color-warning-soft);
}

/* A project's gauge: a half circle filled as far as the team says it is, with a needle. */
.gauge-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.gauge-line p {
  margin: 0;
  font-size: var(--text-sm);
}

.gauge {
  flex: none;
  width: 4.5rem;
  height: auto;
}

.gauge-track,
.gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.gauge-track {
  stroke: var(--color-surface-3);
}

.gauge-fill {
  stroke: var(--color-accent);
}

.gauge-needle {
  stroke: var(--color-text);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.gauge-hub {
  fill: var(--color-text);
}

/* Wallpapers: quiet patterns behind a project's page, drawn in the theme's own border colour. */
.wallpaper--dots {
  background-image: radial-gradient(circle, var(--color-border) 0.09rem, transparent 0.1rem);
  background-size: 1.25rem 1.25rem;
}

.wallpaper--lines {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 0.75rem,
    var(--color-border) 0.75rem 0.82rem
  );
}

.wallpaper--grid {
  background-image:
    linear-gradient(var(--color-border) 0.06rem, transparent 0.06rem),
    linear-gradient(90deg, var(--color-border) 0.06rem, transparent 0.06rem);
  background-size: 1.5rem 1.5rem;
}

.wallpaper--waves {
  background-image: radial-gradient(
    circle at 50% 100%,
    transparent 0.85rem,
    var(--color-border) 0.9rem,
    transparent 0.97rem
  );
  background-size: 2rem 1rem;
}

.wallpaper-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.wallpaper-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  cursor: pointer;
}

.wallpaper-choice input {
  position: absolute;
  opacity: 0;
}

.wallpaper-swatch {
  width: 4rem;
  height: 2.75rem;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.wallpaper-choice input:checked + .wallpaper-swatch {
  border-color: var(--color-accent);
}

.wallpaper-choice input:focus-visible + .wallpaper-swatch {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.input--number {
  max-width: 7rem;
}

.hook-url {
  overflow-wrap: anywhere;
}

/* Bringing projects from Basecamp: numbered steps, a plain list of what does not come, people to match. */
.steps-list,
.plain-list {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.steps-list {
  list-style: decimal;
}

.plain-list {
  list-style: disc;
}

.person-match .select {
  flex: none;
  max-width: 16rem;
}