/**
 * YuVa on the web — the v2 design, as classes.
 *
 * The prototype carried every rule in a `style=""` attribute, which is how a
 * prototype should be written and not how a page should ship. Every value below
 * is the prototype's, moved to a class and otherwise untouched: the palette, the
 * radii, the font sizes to the half-pixel, the tints.
 *
 * The thesis is in the linking screen and it decides the rest: *your phone stays
 * the one that listens; the browser is for the four things a small screen makes
 * hard.* So this is not the app mirrored. It is four modes — **Plan, Listen,
 * Ideate, Reflect** — and a panel down the right that is either a conversation
 * or whatever you last clicked on.
 *
 * Four colours carry that, one per mode, and they are used for nothing else.
 */

/* ---------------------------------------------------------------- the faces */

/**
 * Inter, self-hosted at two subsets.
 *
 * The files are the prototype's own, lifted from its bundle rather than fetched
 * from Google: the API container is the only thing serving this page and a
 * webfont that needs the open internet is a page that renders in Times on a
 * train. One variable file per subset covers 400–600.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- the tokens */

:root {
  --font-body: 'Inter', system-ui, sans-serif;

  --ground: #fbfaf9;
  --card: #ffffff;
  --line: #e6e3e0;
  --ink: #201e1d;
  --ink-2: #5d5956;
  --ink-3: #8b8683;

  /* One per mode, and used for nothing else. */
  --plan: #2f6fd0;
  --plan-t: #eef4fd;
  --listen: #1f8a58;
  --listen-t: #edf7f1;
  --ideate: #6d4fd6;
  --ideate-t: #f2effd;
  --reflect: #c9421f;
  --reflect-t: #fdf0ec;

  /* The tinted edges that go with each tint. */
  --plan-e: #d5e3f8;
  --listen-e: #d5ebdf;
  --listen-e2: #cfe6d9;
  --ideate-e: #e0d8fa;
  --ideate-e2: #ddd4f7;
  --reflect-e: #f3d3c9;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ground);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  color: var(--plan);
  text-decoration: none;
}
a:hover {
  color: var(--ideate);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--plan);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb {
  background: #dcd8d4;
  border-radius: 9px;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: 500 12px/1 var(--font-body);
}

/* --------------------------------------------------------- shared furniture */

/** The small uppercase line that titles almost every block in this design. */
.kicker {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.kicker.tight {
  margin-bottom: 7px;
}
.kicker.plan {
  color: var(--plan);
}
.kicker.listen {
  color: var(--listen);
}
.kicker.ideate {
  color: var(--ideate);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.card.pad {
  padding: 18px;
}
.card.flush {
  overflow: hidden;
}

.h1 {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 5px;
}
.sub {
  font: 400 12.5px/1 var(--font-body);
  color: var(--ink-3);
}

.mode-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: rise 0.3s ease both;
  /**
   * Centred in the column, not pinned to its left edge.
   *
   * Every mode caps its width for readability, which left a wide window showing
   * a narrow strip of content hard against one side and a field of empty ground
   * beside it — and the wider the screen, the further the reading drifted from
   * where anybody is looking. The cap still does its job; it is just centred on
   * the space it was given.
   */
  margin-inline: auto;
}
.mode-view.wide {
  max-width: 880px;
}
.mode-view.medium {
  max-width: 760px;
}
.mode-view.narrow {
  max-width: 620px;
}

.head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

/** A pill: the filters, the ranges, the speeds, the setting toggles. */
.pill {
  font: 500 11px/1 var(--font-body);
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.pill[aria-pressed='true'] {
  border-color: var(--ink-3);
  color: var(--ink);
}
.pill.range {
  font-size: 11.5px;
  padding: 9px 12px;
}
.pill.range[aria-pressed='true'] {
  background: var(--reflect-t);
  border-color: var(--reflect);
  color: var(--reflect);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

/** The dark button that ends a step: "Keep it", "Send", "Save the change". */
.ink-btn {
  font: 500 13px/1 var(--font-body);
  padding: 12px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.ink-btn:hover {
  background: #35312f;
}
.ink-btn:disabled {
  background: var(--ink-3);
  cursor: default;
}

.quiet-btn {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  padding: 7px 10px;
  font: 500 11px/1 var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
}
.quiet-btn:hover {
  border-color: var(--ink-3);
}

.field {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--ground);
  padding: 11px 12px;
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--ink);
  outline: none;
  resize: vertical;
  font-family: var(--font-body);
}
.field.small {
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 13px;
  line-height: 1.55;
}

.empty-note {
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--ink-3);
  margin: 0;
  text-wrap: pretty;
}

.error {
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--reflect);
  background: var(--reflect-t);
  border: 1px solid var(--reflect-e);
  border-radius: 11px;
  padding: 11px 13px;
  margin: 0 0 12px;
}

.skeleton {
  display: block;
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(90deg, #f0edea, #e6e3e0, #f0edea);
  background-size: 200% 100%;
  animation: sweep 1.3s linear infinite;
  margin-bottom: 10px;
}
.skeleton:nth-child(2) {
  width: 72%;
}
.skeleton:nth-child(3) {
  width: 48%;
}
@keyframes sweep {
  to {
    background-position: -200% 0;
  }
}

/* ------------------------------------------------------------- the linking */

.pair-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.pair-card {
  width: 100%;
  max-width: 880px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(32, 30, 29, 0.07);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pair-left {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pair-right {
  padding: 40px 36px;
  background: linear-gradient(180deg, #f7f5fd, #fbfaf9);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Both ways in can be longer than the card on a short window. */
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand .mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--plan), var(--ideate));
  display: block;
  flex: 0 0 auto;
}
.brand .name {
  font: 600 14px/1 var(--font-body);
  letter-spacing: -0.01em;
}
.brand .badge {
  font: 600 9px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
}

.pair-left h1 {
  font-weight: 600;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.pair-left .lede {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 40ch;
  text-wrap: pretty;
}
.blurbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blurbs .row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.blurbs .label {
  font: 500 13px/1.4 var(--font-body);
}
.blurbs .what {
  font: 400 13px/1.4 var(--font-body);
  color: var(--ink-3);
}
.pair-foot {
  margin-top: auto;
  font: 400 12px/1.6 var(--font-body);
  color: var(--ink-3);
}

.step-line {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pair-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: rise 0.35s ease both;
}
.qr-frame {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(32, 30, 29, 0.05);
}
.qr-frame svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}
.code-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.code-block .code {
  font: 600 22px/1 var(--font-body);
  letter-spacing: 0.2em;
}
.code-block .hint {
  font: 400 12px/1.5 var(--font-body);
  color: var(--ink-3);
}
.pair-dots {
  display: flex;
  gap: 6px;
}
.pair-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: breathe 1.1s ease-in-out infinite;
}
.pair-dots span:nth-child(1) {
  background: var(--plan);
}
.pair-dots span:nth-child(2) {
  background: var(--listen);
  animation-delay: 0.15s;
}
.pair-dots span:nth-child(3) {
  background: var(--ideate);
  animation-delay: 0.3s;
}
.pair-step h2 {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}
/**
 * Two ways in, stacked, with a rule between them.
 *
 * Linking first because the phone approves it and can end it, and a divider that
 * says "or" rather than a gap — two blocks with air between them read as one
 * thing that scrolled, and somebody who has decided the QR is no use to them
 * needs to see that there is another door without hunting for it.
 */
.way {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.way h2 {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
}
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-3);
}
.or::before,
.or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.or span {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/** Google draws its own button; this only gives it somewhere to land. */
.gsi {
  min-height: 44px;
}
.pair-step .hint.quiet {
  color: var(--ink-3);
  opacity: 0.85;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.pair-step .hint em {
  font-style: normal;
  font-weight: 600;
}
.pair-step .hint {
  font: 400 12px/1.6 var(--font-body);
  color: var(--ink-3);
  margin: 0;
  max-width: 40ch;
}
.pair-step .hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 4px;
}

.pair-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 32ch;
}
.asking {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.asking .who {
  font: 500 14px/1.4 var(--font-body);
  margin-bottom: 6px;
}
.asking .when {
  font: 400 12px/1.5 var(--font-body);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- the shell */

.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar .mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--plan), var(--ideate));
  display: block;
  flex: 0 0 auto;
}
.topbar .name {
  font: 600 13px/1 var(--font-body);
  letter-spacing: -0.01em;
}
.topbar .today {
  font: 400 12px/1 var(--font-body);
  color: var(--ink-3);
}
/**
 * Which server this page is reading from, when it is not the one serving it.
 *
 * Amber and always present, because the single worst thing this feature can do
 * is let somebody act on the real day while believing they are on a local copy.
 * Absent entirely when the two are the same, which is the normal case.
 */
.elsewhere {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a10;
  background: #fdf3e2;
  border: 1px solid #f0dcb8;
  border-radius: 20px;
  padding: 5px 9px;
  white-space: nowrap;
}

.search {
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  max-width: 340px;
  background: var(--ground);
}
.search input {
  border: 0;
  background: transparent;
  outline: none;
  font: 400 12.5px/1 var(--font-body);
  color: var(--ink);
  width: 100%;
}
.topbar .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/**
 * The page's own code has moved on. Said, never acted on.
 *
 * Reloading somebody mid-sentence in a sitting to deliver a CSS fix would be a
 * worse bug than whatever it fixed.
 */
.fresh {
  border: 1px solid #f0dcb8;
  border-radius: 20px;
  background: #fdf3e2;
  color: #8a5a10;
  padding: 6px 11px;
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.fresh:hover {
  background: #fbe9cd;
}

.linked {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 11px/1 var(--font-body);
  color: var(--ink-2);
}
.linked .dot {
  width: 6px;
  height: 6px;
  background: var(--listen);
}
.unlink:hover {
  border-color: var(--reflect);
  color: var(--reflect);
}

/** The four modes, as one row of tiles with a 1px grid showing through. */
.modes {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.mode {
  text-align: left;
  border: 0;
  border-top: 3px solid transparent;
  background: var(--card);
  padding: 14px 16px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background 0.15s ease;
  color: var(--ink);
}
.mode:hover {
  background: var(--ground);
}
.mode .top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode .label {
  font: 600 13.5px/1 var(--font-body);
}
.mode .what {
  font: 400 11.5px/1.35 var(--font-body);
  color: var(--ink-3);
}
.mode .meta {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mode[aria-current='page'] .what {
  color: var(--ink-3);
}
.mode[data-mode='plan'][aria-current='page'] {
  border-top-color: var(--plan);
  background: var(--plan-t);
  color: var(--plan);
}
.mode[data-mode='listen'][aria-current='page'] {
  border-top-color: var(--listen);
  background: var(--listen-t);
  color: var(--listen);
}
.mode[data-mode='ideate'][aria-current='page'] {
  border-top-color: var(--ideate);
  background: var(--ideate-t);
  color: var(--ideate);
}
.mode[data-mode='reflect'][aria-current='page'] {
  border-top-color: var(--reflect);
  background: var(--reflect-t);
  color: var(--reflect);
}
.mode[aria-current='page']:hover {
  filter: brightness(0.99);
}
.mode[aria-current='page'] .meta {
  color: inherit;
}

/**
 * The stage: whatever the mode draws, and the panel beside it.
 *
 * Named rather than called `.body`, which it was — and which also named the
 * paragraph inside an agent card. A two-column grid with a 300px minimum was
 * therefore being applied inside a 280px card, and an agent's promise came out
 * one word per line.
 */
.stage {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) minmax(300px, 400px);
  min-height: 0;
}
main {
  overflow-y: auto;
  min-width: 0;
  padding: 22px 24px 40px;
  position: relative;
}
aside {
  border-left: 1px solid var(--line);
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/**
 * The agents rail, down the left of every screen.
 *
 * On the left and not in a mode, because a list you come back to needs somewhere
 * to come back to. Quieter ground than the panel on the right: that one answers
 * what you clicked, this one is always the same list.
 */
aside.left {
  border-left: 0;
  border-right: 1px solid var(--line);
  background: var(--ground);
  padding: 22px 20px;
  overflow-y: auto;
}
.rail-col .kicker {
  margin-bottom: 12px;
}
.rail-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  margin-bottom: 14px;
}
.rail-tabs .seg {
  flex: 1;
  border: 0;
  border-radius: 20px;
  background: transparent;
  padding: 7px 8px;
  font: 500 11px/1 var(--font-body);
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.rail-tabs .seg[aria-pressed='true'] {
  background: var(--ground);
  color: var(--ink);
}

aside.left .rail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/**
 * A row that opens a sitting, and a row that explains one. Different shapes on
 * purpose — they do different things, and looking alike would be a promise the
 * catalogue half cannot keep.
 */
.agent-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: 12px;
  background: var(--card);
  padding: 12px 14px;
  color: inherit;
  cursor: pointer;
}
.agent-row[data-band='plan'] {
  border-left-color: var(--plan);
}
.agent-row[data-band='listen'] {
  border-left-color: var(--listen);
}
.agent-row[data-band='ideate'] {
  border-left-color: var(--ideate);
}
.agent-row:hover {
  background: var(--ground);
}
.agent-row .name {
  display: block;
  font: 600 13.5px/1.3 var(--font-body);
  margin-bottom: 3px;
}
.agent-row .what {
  display: block;
  font: 400 11.5px/1.45 var(--font-body);
  color: var(--ink-3);
  text-wrap: pretty;
}
.agent-row .go {
  display: block;
  font: 500 11px/1 var(--font-body);
  color: var(--plan);
  margin-top: 9px;
}
.agent-row[data-band='listen'] .go {
  color: var(--listen);
}
.agent-row[data-band='ideate'] .go {
  color: var(--ideate);
}

/** The catalogue half: a disclosure, not a link. */
.agent-row.read {
  padding: 0;
  cursor: default;
}
.agent-row.read .head {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  cursor: pointer;
  color: inherit;
}
.agent-row.read.open {
  background: var(--card);
}
.agent-row .more {
  padding: 0 14px 14px;
}
.agent-row .more p {
  font: 400 12px/1.55 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 9px;
  text-wrap: pretty;
}
.agent-row .more ul {
  margin: 0 0 9px;
  padding-left: 16px;
  font: 400 11.5px/1.6 var(--font-body);
  color: var(--ink-2);
}
.agent-row .more .where {
  font-size: 11px;
  color: var(--ink-3);
  margin: 0;
}


/* ------------------------------------------------------------------- plan */

.tray {
  background: var(--plan-t);
  border: 1px solid var(--plan-e);
  border-radius: 16px;
  padding: 20px;
}
.tray .items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tray-item {
  border: 1px solid var(--plan-e);
  border-radius: 11px;
  background: var(--card);
  padding: 10px 12px;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 290px;
}
.tray-item[data-dragging='true'] {
  border-color: var(--plan);
  background: var(--plan-t);
}
.tray-item .bar {
  width: 6px;
  height: 26px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.tray-item .title {
  display: block;
  font: 500 12.5px/1.3 var(--font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.tray-item .mins {
  display: block;
  font: 400 11px/1.3 var(--font-body);
  color: var(--ink-3);
}

.day {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.day-empty {
  padding: 22px 16px;
}

/**
 * The day as a list — dense, top to bottom, and how it opens.
 *
 * `day-event` and `day-gap`, not `event` and `gap`. The grid's rows are `slot
 * event` and `slot gap`, and while the two shared names these rules reshaped the
 * grid from underneath: a four-column layout put each title in a 50px column, so
 * "Morning routine" came out "Morni…". Distinct names, and it cannot happen
 * again.
 */
.day-gap {
  margin: 9px 12px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  background: var(--ground);
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease;
}
.day-gap .label {
  font: 500 11.5px/1 var(--font-body);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.day-gap .hint {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.day-gap[data-hot='true'] {
  border-color: var(--plan);
  border-style: solid;
  background: var(--plan-t);
}
.day-gap[data-hot='true'] .label,
.day-gap[data-hot='true'] .hint {
  color: var(--plan);
}

.day-event {
  display: grid;
  grid-template-columns: 50px 6px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.day-event:hover,
.day-event[aria-current='true'] {
  background: var(--ground);
}
.day-event.placed {
  background: var(--plan-t);
}
.day-event .time {
  font: 500 12px/1.3 var(--font-body);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.day-event .bar {
  align-self: stretch;
  min-height: 30px;
  border-radius: 3px;
}
.day-event .title {
  display: block;
  font: 500 13.5px/1.35 var(--font-body);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-event.ro .title {
  color: var(--ink-2);
}
.day-event .source {
  display: block;
  font: 400 11.5px/1.4 var(--font-body);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/** List or calendar. Two answers to two questions, neither replacing the other. */
.shape {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.shape .seg {
  border: 0;
  border-radius: 20px;
  background: transparent;
  padding: 6px 12px;
  font: 500 11px/1 var(--font-body);
  color: var(--ink-3);
  cursor: pointer;
}
.shape .seg[aria-pressed='true'] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(32, 30, 29, 0.08);
}

/**
 * The day, drawn against time rather than listed.
 *
 * Everything inside is absolutely positioned on one minute scale, which is the
 * point: a block's height *is* its length, and the space between two blocks *is*
 * the gap. A list can only assert both.
 */
.grid {
  position: relative;
  margin: 8px 12px 14px 0;
}
.hours .hour {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hours span {
  width: 46px;
  flex: 0 0 auto;
  text-align: right;
  font: 500 11px/1 var(--font-body);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hours i {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/** Blocks and gaps share a left edge, so the column reads as one thing. */
.slot {
  position: absolute;
  left: 56px;
  right: 0;
  border-radius: 10px;
  padding: 7px 10px;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.slot .title {
  font: 500 13px/1.3 var(--font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot .source {
  font: 400 11px/1.3 var(--font-body);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/** Too short to hold two lines; the time is in the title's tooltip instead. */
.slot.short {
  padding: 4px 10px;
}
.slot.short .source {
  display: none;
}
.slot .chip {
  position: absolute;
  top: 6px;
  right: 8px;
}

.slot.event {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  cursor: pointer;
  color: inherit;
  box-shadow: 0 1px 2px rgba(32, 30, 29, 0.05);
}
.slot.event:hover {
  background: var(--ground);
}
.slot.event[aria-current='true'] {
  border-color: var(--plan);
  background: var(--plan-t);
}
.slot.event.ro {
  background: repeating-linear-gradient(
    45deg,
    var(--ground),
    var(--ground) 6px,
    #f4f2f0 6px,
    #f4f2f0 12px
  );
}
.slot.event.ro .title {
  color: var(--ink-2);
}
.slot.event.placed {
  background: var(--plan-t);
}

.slot.gap {
  border: 1px dashed var(--line);
  background: transparent;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s ease;
}
.slot.gap .label {
  font: 500 11.5px/1 var(--font-body);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.slot.gap .hint {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.slot.gap[data-hot='true'] {
  border-color: var(--plan);
  border-style: solid;
  background: var(--plan-t);
}
.slot.gap[data-hot='true'] .label,
.slot.gap[data-hot='true'] .hint {
  color: var(--plan);
}

/** Said when the clock is outside the hours the grid draws, not left blank. */
.outside-hours {
  font: 400 12px/1.6 var(--font-body);
  color: var(--ink-3);
  margin: 12px 12px 0 56px;
  text-wrap: pretty;
}

/**
 * A proposal, lying where it would go.
 *
 * Dotted rather than dashed, and lighter than the gap it sits in: a gap is a
 * fact about the day, a suggestion is a question about it, and the two must not
 * read as the same kind of thing. It sits above the gap and below the events,
 * because nothing real is ever obscured by something that has not happened.
 */
.slot.suggest {
  border: 1.5px dotted var(--ink-3);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  cursor: pointer;
  z-index: 1;
  left: 64px;
  right: 8px;
  /* Across, not down: the height is whatever the gap is, and the gap is often 27px. */
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.slot.suggest .mins {
  font: 400 11px/1 var(--font-body);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/** The affordance, and the first thing to go when the row runs out of room. */
.slot.suggest .take {
  margin-left: auto;
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.slot.suggest:hover .take {
  color: var(--ink);
}
@media (max-width: 1500px) {
  .slot.suggest .mins {
    display: none;
  }
}
.slot.suggest:hover {
  background: var(--card);
  border-style: solid;
}
.slot.suggest .title {
  font-weight: 600;
}


/** A gap with something lying in it states the remainder, quietly. */
.slot.gap.has-suggestion .label,
.slot.gap.has-suggestion .hint {
  opacity: 0.55;
}

/** Where you are in the day. The one red thing on this screen. */
.now-line {
  position: absolute;
  left: 46px;
  right: 0;
  height: 1px;
  background: var(--reflect);
  pointer-events: none;
}
.now-line span {
  position: absolute;
  left: -46px;
  top: -6px;
  width: 44px;
  text-align: right;
  font: 600 10px/1 var(--font-body);
  color: var(--reflect);
  font-variant-numeric: tabular-nums;
}
.chip {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 20px;
  background: #eceae8;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip.did {
  background: #e8f4ee;
  color: var(--listen);
}
.chip.new {
  background: #dfeafb;
  color: var(--plan);
}

/* ----------------------------------------------------------------- listen */

.now {
  background: var(--listen-t);
  border: 1px solid var(--listen-e);
  border-radius: 16px;
  padding: 20px;
}
.now .title {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 6px;
  text-wrap: pretty;
}
.now .meta {
  font: 400 12.5px/1 var(--font-body);
  color: var(--ink-2);
  margin-bottom: 16px;
}
.track {
  height: 5px;
  border-radius: 5px;
  background: var(--listen-e);
  margin-bottom: 9px;
  overflow: hidden;
}
.track i {
  display: block;
  height: 5px;
  border-radius: 5px;
  background: var(--listen);
  transition: width 0.25s linear;
}
.times {
  display: flex;
  justify-content: space-between;
  font: 400 11px/1 var(--font-body);
  color: var(--ink-3);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.play {
  font: 500 13px/1 var(--font-body);
  padding: 12px 18px;
  border: 0;
  border-radius: 11px;
  background: var(--listen);
  color: #fff;
  cursor: pointer;
}
.play:hover {
  background: #19714a;
}
.next {
  font: 500 12px/1 var(--font-body);
  padding: 11px 13px;
  border: 1px solid var(--listen-e2);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}
.next:hover {
  border-color: var(--listen);
}
.speed {
  font: 500 11.5px/1 var(--font-body);
  padding: 10px 11px;
  border: 1px solid var(--listen-e2);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}
.speed[aria-pressed='true'] {
  background: var(--listen);
  border-color: var(--listen);
  color: #fff;
}

.keep {
  font: 500 12px/1 var(--font-body);
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.keep:hover {
  background: #35312f;
}
.tag {
  font: 500 11.5px/1 var(--font-body);
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}
.tag:hover {
  border-color: var(--ideate);
  color: var(--ideate);
}
.after-field {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  flex-wrap: wrap;
}

.queue-row {
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 13px 16px;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: inherit;
}
.queue-row:hover {
  background: var(--ground);
}
.queue-row[aria-current='true'] {
  background: var(--listen-t);
}
.queue-row .title {
  display: block;
  font: 500 13px/1.35 var(--font-body);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-row .meta {
  display: block;
  font: 400 11.5px/1.3 var(--font-body);
  color: var(--ink-3);
}
.queue-row .state {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.queue-row[aria-current='true'] .state {
  color: var(--listen);
}

/* ----------------------------------------------------------------- ideate */

.ambition {
  background: var(--ideate-t);
  border: 1px solid var(--ideate-e);
  border-radius: 16px;
  padding: 20px;
}
.ambition textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ideate-e2);
  background: transparent;
  padding: 0 0 12px;
  font: 500 17px/1.4 var(--font-body);
  color: var(--ink);
  outline: none;
  resize: none;
  margin-bottom: 13px;
}
.ambition p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: 48ch;
}
.ambition .row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.ideate-go {
  font: 500 13px/1 var(--font-body);
  padding: 12px 16px;
  border: 0;
  border-radius: 11px;
  background: var(--ideate);
  color: #fff;
  cursor: pointer;
}
.ideate-go:hover {
  background: #5c3fc4;
}
.ideate-go:disabled {
  background: var(--ink-3);
  cursor: default;
}
.ideate-alt {
  font: 500 12.5px/1 var(--font-body);
  padding: 11px 14px;
  border: 1px solid var(--ideate-e2);
  border-radius: 10px;
  background: var(--card);
  color: var(--ideate);
  cursor: pointer;
}
.ideate-alt:hover {
  border-color: var(--ideate);
}

/** The question, and the answers that have already been given. */
.ask-q {
  font: 500 14px/1.45 var(--font-body);
  margin: 0 0 6px;
  text-wrap: pretty;
}
.ask-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ask-own {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ask-own input {
  flex: 1 1 auto;
}
.answered {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.answered p {
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 6px;
}
.answered span {
  color: var(--ink-3);
}

/** The draft. A list of sessions, and nothing booked. */
.sessions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.session .bar {
  width: 6px;
  height: 26px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.session .grow {
  flex: 1;
  min-width: 0;
}
.session .title {
  display: block;
  font: 500 13px/1.3 var(--font-body);
}
.session .when {
  display: block;
  font: 400 11.5px/1.3 var(--font-body);
  color: var(--ink-3);
}
/** Keep it, and — separately — book it. Two decisions, two buttons. */
.plan-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/** What actually happened, block by block. Never a summary that hides a failure. */
.placed {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.placed p {
  font: 400 12.5px/1.6 var(--font-body);
  margin: 0 0 4px;
}
.placed .did {
  color: var(--ink-2);
}
.placed .did::before {
  content: '·';
  color: var(--listen);
  font-weight: 700;
  margin-right: 7px;
}
.placed .didnt {
  color: var(--reflect);
}
.placed .didnt::before {
  content: '·';
  font-weight: 700;
  margin-right: 7px;
}
.placed .empty-note {
  margin-top: 8px;
}

.caution {
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--reflect);
  background: var(--reflect-t);
  border: 1px solid var(--reflect-e);
  border-radius: 11px;
  padding: 11px 13px;
  margin: 14px 0 0;
}

.agents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 11px;
}
.agent {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.agent .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.agent .name {
  font: 600 14px/1.3 var(--font-body);
}
.agent .cat {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 5px 8px;
  white-space: nowrap;
  background: #e7effb;
  color: var(--plan);
}
.agent .cat[data-band='P'] {
  background: #e8f4ee;
  color: var(--listen);
}
.agent .cat[data-band='E'] {
  background: #efeafc;
  color: var(--ideate);
}
.agent .says {
  font: 400 12.5px/1.55 var(--font-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.agent .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.agent .status {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.agent .act {
  font: 500 11.5px/1 var(--font-body);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--plan);
  cursor: pointer;
}
.agent .act[data-band='P'] {
  color: var(--listen);
}
.agent .act[data-band='E'] {
  color: var(--ideate);
}
.agent .act:hover {
  border-color: currentColor;
}

.dropzone {
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 22px;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  display: block;
}
.dropzone[data-hot='true'] {
  border-color: var(--ideate);
  background: var(--ideate-t);
}
.dropzone .title {
  font: 500 13.5px/1.3 var(--font-body);
  margin-bottom: 5px;
}
.dropzone .what {
  font: 400 12.5px/1.55 var(--font-body);
  color: var(--ink-3);
}
.dropzone .docs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.doc {
  font: 500 11px/1 var(--font-body);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  padding: 8px 11px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- sitting */

/**
 * The agent, introduced, in the agent's own band colour.
 *
 * Same shape as Listen's now-playing and Ideate's ambition box — tinted ground,
 * tinted edge, 16px, 20px of padding — so a sitting reads as another room in the
 * same building rather than a door out of it.
 */
.sit-hero {
  border-radius: 16px;
  padding: 20px;
}
.sit-hero[data-band='plan'] {
  background: var(--plan-t);
  border: 1px solid var(--plan-e);
}
.sit-hero[data-band='listen'] {
  background: var(--listen-t);
  border: 1px solid var(--listen-e);
}
.sit-hero[data-band='ideate'] {
  background: var(--ideate-t);
  border: 1px solid var(--ideate-e);
}
.sit-hero .promise {
  font: 400 15px/1.6 var(--font-body);
  color: var(--ink);
  margin: 0;
  max-width: 54ch;
  text-wrap: pretty;
}
/** What it was told and what it may do. Consent was given once; this is now. */
.sit-hero .terms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.sit-hero .terms span {
  font: 400 11px/1.3 var(--font-body);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 9px;
  color: var(--ink-2);
}

/**
 * A sitting takes the middle of the screen and nothing else.
 *
 * The shell stays — you can still see what else is on today — because a sitting
 * is something you are doing *in* the day rather than a place you have gone.
 */
.sitting .blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sit-prose {
  font: 400 15px/1.65 var(--font-body);
  margin: 0;
  text-wrap: pretty;
}
.sit-turn {
  max-width: 88%;
  font-size: 14px;
}
.sit-figure {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.sit-figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.sit-math {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  overflow-x: auto;
  font: 400 15px/1.65 var(--font-body);
  text-wrap: pretty;
}

/**
 * Display maths inside a sentence must not steal the whole line.
 *
 * KaTeX's display mode centres and adds a margin, which is right for a formula
 * standing alone and wrong for one sitting inside a problem statement. Inline
 * maths is left exactly as KaTeX sets it.
 */
.has-math .katex-display {
  margin: 10px 0;
  text-align: left;
}
.has-math .katex {
  font-size: 1.05em;
}
/** Until KaTeX arrives, and instead of it if it never does: the source, readable. */
.has-math {
  overflow-wrap: anywhere;
}
.sit-audio {
  margin: 0;
}
.sit-audio audio {
  width: 100%;
}
.sit-audio figcaption {
  font: 400 12px/1.5 var(--font-body);
  color: var(--ink-3);
  margin-top: 6px;
}
.sit-progress .top {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1 var(--font-body);
  margin-bottom: 6px;
}
.sit-progress .days {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sit-progress .meter {
  height: 6px;
  border-radius: 6px;
  background: var(--ground);
  overflow: hidden;
}
.sit-progress .meter i {
  display: block;
  height: 6px;
  border-radius: 6px;
}

/** The agent's question, drawn with this page's components rather than its own. */
.sit-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pick {
  text-align: left;
  font: 500 14px/1.4 var(--font-body);
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.pick:hover:not(:disabled) {
  border-color: var(--ideate);
  background: var(--ideate-t);
}
.pick:disabled {
  color: var(--ink-3);
  cursor: default;
}
.sit-answer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.sit-answer .field {
  flex: 1 1 auto;
  resize: none;
}
.sit-end {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* ---------------------------------------------------------------- reflect */

.reflect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.donut-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.donut {
  position: relative;
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
}
.donut svg {
  display: block;
  transform: rotate(-90deg);
}
.donut .middle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut .total {
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.donut .unit {
  font: 500 9px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.legend {
  flex: 1 1 150px;
  min-width: 0;
}
.legend .row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.legend .row .dot {
  width: 8px;
  height: 8px;
}
.legend .name {
  font: 500 12px/1.3 var(--font-body);
}
.legend .mins {
  font: 600 12.5px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.freq-note {
  font: 400 12px/1.55 var(--font-body);
  color: var(--ink-2);
  margin: -4px 0 14px;
}
.freq {
  margin-bottom: 13px;
}
.freq .top {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1 var(--font-body);
  margin-bottom: 6px;
}
.freq .days {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.freq .meter {
  height: 6px;
  border-radius: 6px;
  background: var(--ground);
  overflow: hidden;
}
.freq .meter i {
  display: block;
  height: 6px;
  border-radius: 6px;
}

.by-day {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  height: 150px;
}
.by-day .col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 2px;
}
.by-day .col i {
  display: block;
}
.by-day .col .e {
  border-radius: 4px 4px 0 0;
  background: var(--ideate);
}
.by-day .col .i {
  background: var(--plan);
}
.by-day .col .p {
  border-radius: 0 0 4px 4px;
  background: var(--listen);
}
.by-day-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  margin-top: 8px;
}
.by-day-labels div {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

.snaps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 11px;
}
.snap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  color: inherit;
  display: block;
}
.snap .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.snap .day {
  font: 600 14px/1 var(--font-body);
}
.snap .meta {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.snap .mins {
  display: flex;
  gap: 11px;
  margin-bottom: 11px;
}
.snap .mins span {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 11.5px/1 var(--font-body);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.snap .quote {
  font: 400 13px/1.55 var(--font-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- settings */

.privacy {
  background: var(--listen-t);
  border: 1px solid var(--listen-e);
  border-radius: 14px;
  padding: 16px;
}
.privacy .says {
  font: 400 13px/1.6 var(--font-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.set-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.set-row .name {
  display: block;
  font: 500 13.5px/1.3 var(--font-body);
  margin-bottom: 3px;
}
.set-row .detail {
  display: block;
  font: 400 12px/1.45 var(--font-body);
  color: var(--ink-3);
}
.set-row .pill {
  padding: 9px 11px;
}
.set-row .pill[data-on='plan'] {
  background: var(--plan-t);
  border-color: var(--plan-e);
  color: var(--plan);
}
.set-row .pill[data-on='listen'] {
  background: var(--listen-t);
  border-color: var(--listen-e2);
  color: var(--listen);
}
.set-row .pill[data-on='ideate'] {
  background: var(--ideate-t);
  border-color: var(--ideate-e2);
  color: var(--ideate);
}
.set-row .pill[data-on='reflect'] {
  background: var(--reflect-t);
  border-color: var(--reflect-e);
  color: var(--reflect);
}
.version {
  font: 400 11.5px/1.7 var(--font-body);
  color: var(--ink-3);
}

/* ------------------------------------------------------------- the panel */

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.panel-head {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.panel-head.chat {
  padding: 13px 16px;
  justify-content: flex-start;
  gap: 9px;
}
.panel-head .who {
  font: 600 12.5px/1 var(--font-body);
}
.panel-head .dot {
  width: 8px;
  height: 8px;
  background: var(--listen);
}
.panel-head .count {
  font: 400 11px/1 var(--font-body);
  color: var(--ink-3);
  margin-left: auto;
}
.panel-head .close {
  border: 0;
  background: transparent;
  font: 500 11px/1 var(--font-body);
  color: var(--ink-3);
  cursor: pointer;
}
.panel-head .close:hover {
  color: var(--ink);
}
.panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 7px;
  text-wrap: pretty;
}
.detail-range {
  font: 400 12.5px/1 var(--font-body);
  color: var(--ink-3);
}

.brief {
  background: var(--plan-t);
  border: 1px solid var(--plan-e);
  border-radius: 12px;
  padding: 13px 14px;
}
.brief .top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}
.brief .top .dot {
  width: 6px;
  height: 6px;
  background: var(--plan);
}
.brief .line {
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.brief .people {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--plan-e);
}
.brief .person {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.brief .initial {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--plan-e);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px/1 var(--font-body);
  color: var(--plan);
}
.brief .pname {
  display: block;
  font: 500 12.5px/1.3 var(--font-body);
  margin-bottom: 2px;
}
.brief .prole {
  display: block;
  font: 400 11.5px/1.4 var(--font-body);
  color: var(--ink-3);
}
.brief .pnote {
  display: block;
  font: 400 11.5px/1.45 var(--font-body);
  color: var(--ink-2);
  margin-top: 3px;
  text-wrap: pretty;
}
.brief .from {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--plan-e);
}
.brief .from .kicker {
  font-size: 9px;
  letter-spacing: 0.14em;
  margin-bottom: 7px;
}
.brief .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brief .chips span {
  font: 400 11px/1.3 var(--font-body);
  background: var(--card);
  border: 1px solid var(--plan-e);
  border-radius: 20px;
  padding: 6px 9px;
  color: var(--ink-2);
}

/** The fields that change a block. Start and length sit together; they move together. */
.edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.edit input[type='time'],
.edit input[type='number'] {
  font-variant-numeric: tabular-nums;
}

.club {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.club-row {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
}
.club-row .bar {
  width: 6px;
  height: 20px;
  border-radius: 3px;
}
.club-row .title {
  display: block;
  font: 500 12px/1.3 var(--font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-row button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: var(--ink-2);
}
.club-row button:hover {
  border-color: var(--plan);
  color: var(--plan);
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-actions .listen-btn {
  background: var(--listen);
}
.detail-actions .listen-btn:hover {
  background: #19714a;
}
.detail-actions .remove {
  border: 0;
  background: transparent;
  font: 500 11px/1 var(--font-body);
  color: var(--ink-3);
  cursor: pointer;
  text-align: left;
  padding: 4px 0;
}
.detail-actions .remove:hover {
  color: var(--reflect);
}

.panel-hint {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--ground);
  padding: 12px 13px;
}
.panel-hint .what {
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.panel-body.thread {
  padding: 14px 16px;
  gap: 10px;
}
.bubble {
  max-width: 92%;
  border: 1px solid var(--line);
  border-radius: 13px 13px 13px 4px;
  background: var(--ground);
  color: var(--ink);
  padding: 11px 12px;
  align-self: flex-start;
  font: 400 13px/1.55 var(--font-body);
  text-wrap: pretty;
}
.bubble.you {
  align-self: flex-end;
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  border-radius: 13px 13px 4px 13px;
}
.bubble.waiting {
  color: var(--ink-3);
}
.panel-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.asks {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.ask {
  font: 500 11px/1 var(--font-body);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}
.ask:hover {
  border-color: var(--plan);
  color: var(--plan);
}
.compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.compose textarea {
  flex: 1 1 auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--ground);
  padding: 10px 11px;
  font: 400 13px/1.5 var(--font-body);
  color: var(--ink);
  outline: none;
  resize: none;
}
.send {
  border: 0;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  padding: 12px 13px;
  font: 500 12px/1 var(--font-body);
  cursor: pointer;
}
.send:hover {
  background: #35312f;
}

/* ------------------------------------------------------------- the narrow */

/**
 * The panel is the second half of this design, not a sidebar — so it does not
 * collapse into a drawer. Under 1000px it goes below the day instead, which
 * keeps both halves and costs a scroll.
 */
/**
 * Below 1360px the agents rail lies down above the day rather than squeezing it.
 *
 * A 300px column plus a 300px panel plus a readable middle does not fit, and the
 * first thing to give would be the middle — which is the part somebody came for.
 * Laid out sideways the rows become a row of cards, which is the same list read
 * left to right; the catalogue's disclosures still open under them.
 */
@media (max-width: 1360px) {
  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  }
  aside.left {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 20px;
    overflow: visible;
  }
  .rail-col {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
  }
  .rail-col .kicker {
    margin: 6px 0 0;
    flex: 0 0 auto;
  }
  .rail-tabs {
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  aside.left .rail-list {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 auto;
  }
  .agent-row {
    max-width: 280px;
  }
  .agent-row .what {
    display: none;
  }
  .agent-row.open .what,
  .agent-row .more p {
    display: block;
  }
  aside.left .empty-note {
    flex: 1 1 auto;
  }
}

@media (max-width: 1000px) {
  .shell {
    height: auto;
    min-height: 100vh;
  }
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }
  main {
    overflow: visible;
  }
  aside {
    border-left: 0;
    border-top: 1px solid var(--line);
    min-height: 60vh;
  }
  .panel-body {
    max-height: 50vh;
  }
}