/*
 * Today, warm editorial. Leather rail, paper page, a serif for the greeting
 * and the names, a brick ribbon used sparingly, and "From memory" as an
 * italic margin note.
 *
 * Motion is tied to an action and stays under 300ms: cards lift, the filter
 * glider moves, the person panel slides in. prefers-reduced-motion turns
 * those off. The flag and the owner preview decide whether any of this applies;
 * without body.is-today-redesign these rules match nothing.
 *
 * Direction: warm editorial blackbook. Dials: variety 5, motion 3, density 4.
 */

body.is-today-redesign {
  background: var(--ds-book-paper);
  color: var(--ds-book-ink);
}
body.is-today-redesign .board-main,
body.is-today-redesign .board-content {
  background: var(--ds-book-paper);
}

/* The rail. Real nav items, leather ground, ribbon on the active one
   instead of the violet mark. */
body.is-today-redesign .sidebar {
  background-color: var(--ds-book-leather);
  background-image: radial-gradient(120% 60% at 0 0, var(--ds-book-leather-glow) 0, transparent 60%);
  color: var(--ds-book-nav-ink);
  border-right: 0;
}
body.is-today-redesign .rail-brand { color: var(--ds-book-on-leather); }
body.is-today-redesign .rail-brand span { color: var(--ds-book-nav-muted); }
body.is-today-redesign .rail-brand::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ds-book-ribbon);
  margin-left: 6px;
}
body.is-today-redesign .nav-item { color: var(--ds-book-nav-ink); transition: transform .18s, opacity .18s; }
body.is-today-redesign .nav-item .nav-n { color: var(--ds-book-nav-muted); }
body.is-today-redesign .nav-item:hover { background: var(--ds-book-leather-2); color: var(--ds-book-on-leather); }
body.is-today-redesign .nav-item.is-active {
  background: var(--ds-book-leather-2);
  color: var(--ds-book-on-leather);
  box-shadow: inset 3px 0 0 var(--ds-book-ribbon);
  border-radius: 0 var(--ds-radius) var(--ds-radius) 0;
}
body.is-today-redesign .nav-item.is-active .nav-n { color: var(--ds-book-ribbon-soft); }
html.is-book-motion body.is-today-redesign .nav-item.is-active { box-shadow: none; }
body.is-today-redesign .rail-sep { background: var(--ds-book-leather-line); }
body.is-today-redesign .td-me {
  margin-top: auto;
  display: flex; gap: 8px; align-items: center;
  padding: 12px 8px 4px;
}
body.is-today-redesign .td-me-name { font-weight: 600; color: var(--ds-book-on-leather); font-size: 0.875rem; }
body.is-today-redesign .td-me-sub { color: var(--ds-book-nav-muted); font-size: 0.75rem; }
body.is-today-redesign .td-me-copy { min-width: 0; flex: 1; }
body.is-today-redesign .td-logout {
  border: 0; background: transparent; color: var(--ds-book-nav-muted);
  font: inherit; font-size: 0.75rem; min-height: 44px; cursor: pointer;
}
body.is-today-redesign .sidebar .td-av { background: var(--ds-book-leather-line); color: var(--ds-book-on-leather); }

/* Desktop hides the old topbar; the greeting is the header. On a phone the
   topbar stays so the drawer toggle and log out remain reachable. */
body.is-today-redesign .topbar { display: none; }
body.is-today-redesign .topbar .bb-tour-btn { display: none; }
body.is-today-redesign .td-tour {
  background: transparent;
  color: var(--ds-book-ink);
  border-color: var(--ds-book-line);
}
body.is-today-redesign .td-tour:hover { background: var(--ds-book-ribbon-soft); }
@media (max-width: 768px) {
  body.is-today-redesign .topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--ds-book-paper);
    border-bottom-color: var(--ds-book-line);
  }
  body.is-today-redesign .topbar .topbar-head,
  body.is-today-redesign .topbar .search-input,
  body.is-today-redesign .topbar .avatar { display: none; }
  body.is-today-redesign .board-content {
    padding: 16px 14px calc(28px + env(safe-area-inset-bottom));
  }
}

.td-top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding-bottom: 18px; border-bottom: 2px solid var(--ds-book-ink);
}
.td-date {
  font-family: var(--ds-font-label); font-weight: 600; font-size: calc(0.68rem * 1.2); letter-spacing: 0.14em;
  text-transform: lowercase; color: var(--ds-book-muted);
}
.td-greet {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500; font-size: clamp(2.1rem, 5vw, 3.125rem);
  letter-spacing: -0.02em; line-height: 1.08; margin: 12px 0 4px;
  text-wrap: balance;
  color: var(--ds-book-ink);
}
.td-greet em { font-style: italic; color: var(--ds-book-ribbon); }

.td-setup {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--ds-book-line);
  border-left: 3px solid var(--ds-book-ink);
  background: transparent;
}

.td-setup p { margin: 0; }

.td-setup a {
  color: var(--ds-book-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.td-sub { color: var(--ds-book-muted); font-size: 0.95rem; max-width: 68ch; }
.td-top-copy { min-width: 0; max-width: 100%; }
.td-why-only,
.why-only {
  margin: 4px 0 0;
  width: 100%;
  max-width: 40rem;
}
.td-why-only summary,
.why-only summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  color: var(--ds-book-ink);
  font-size: 0.95rem;
  line-height: 1.3;
}
/* The disclosure triangle alone did not say it opens. */
.td-why-only summary:focus-visible,
.why-only summary:focus-visible {
  outline: 2px solid var(--ds-book-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.td-why-only summary::after,
.why-only summary::after {
  content: " · Show the reason";
  content: " · Show the reason" / "";
  color: var(--ds-book-muted);
  font-size: 0.875rem;
}
.td-why-only[open] summary::after,
.why-only[open] summary::after { content: " · Hide"; content: " · Hide" / ""; }
.td-why-only p,
.why-only p {
  margin: 0 0 12px;
  color: var(--ds-book-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.td-top-side { display: flex; align-items: center; gap: 12px; flex: none; }
.td-togo { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.td-togo b { display: block; font-weight: 600; }
.td-togo span { color: var(--ds-book-muted); font-size: 0.8rem; }

.td-window { margin-top: 16px; }
.td-window-kicker {
  font-family: var(--ds-font-label); font-weight: 600; font-size: calc(0.68rem * 1.2); letter-spacing: 0.12em;
  text-transform: lowercase; color: var(--ds-book-ribbon);
}
.td-window-account {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem; font-weight: 500; margin-top: 2px;
}
.td-window-why { color: var(--ds-book-muted); font-size: 0.875rem; }

.td-cols { display: flex; gap: 28px; align-items: flex-start; margin-top: 18px; }
.td-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.td-rail { width: 240px; flex: none; }
.td-tabsrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.td-filters {
  position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto;
  background: var(--ds-book-ribbon-soft); border-radius: var(--ds-radius); padding: 3px;
}
.td-glide {
  position: absolute; top: 3px; bottom: 3px; left: 0;
  background: var(--ds-book-card); border-radius: calc(var(--ds-radius) - 2px);
  box-shadow: var(--ds-book-lift);
  transition: transform var(--ds-motion-base, 280ms) var(--ds-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  will-change: transform;
}
.td-filter {
  position: relative; z-index: 1;
  border: 0; background: transparent; color: var(--ds-book-ink);
  font-size: 0.75rem; font-weight: 500; padding: 6px 13px;
  white-space: nowrap; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--ds-motion-fast, 180ms) var(--ds-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.td-filter.is-on { color: var(--ds-book-ink); font-weight: 600; }
.td-signals-jump {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ds-book-muted); font: inherit; font-size: 0.8rem;
  white-space: nowrap;
}
.td-signals-jump:hover { color: var(--ds-book-ink); }
.td-signals-jump.is-on {
  font-weight: 600;
  color: var(--ds-book-ink);
  background: var(--ds-book-card);
  box-shadow: var(--ds-book-lift);
}
#td-signals-heading:focus { outline: 2px solid var(--ds-book-ribbon); outline-offset: 4px; }

.td-card {
  position: relative;
  background: var(--ds-book-card);
  border: 1px solid var(--ds-book-line);
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
  box-shadow: var(--ds-contact-shadow);
  transition: transform var(--ds-motion-fast, 180ms) var(--ds-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}
#td-cards { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 100%; }
#td-cards .td-card {
  display: block;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--ds-book-line);
}
.td-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-book-lift);
  border-color: var(--ds-book-line-strong);
}
.td-card.is-leaving,
.td-card.is-leaving:hover,
.taskrow.is-leaving,
.taskrow.is-leaving:hover {
  pointer-events: none;
  cursor: default;
  transition: none;
  will-change: transform, opacity;
}
.td-card.is-settling,
.td-card.is-settling:hover,
.taskrow.is-settling,
.taskrow.is-settling:hover,
.kit-card.is-settling,
.kit-card.is-settling:hover {
  transition: none;
  will-change: transform;
}
.td-card .is-quiet,
.taskrow .is-quiet {
  opacity: 0;
  pointer-events: none;
}
#td-cards .taskrow:focus,
#td-cards .taskrow:focus-visible {
  outline: 2px solid var(--ds-book-ribbon);
  outline-offset: 2px;
}
.td-leave-shell { min-width: 0; max-width: 100%; overflow: hidden; }
.td-card-error {
  flex: 1 1 100%;
  margin: 8px 0 0;
  color: var(--ds-text-negative);
  font-size: 0.8rem;
  line-height: 1.4;
}
.td-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.td-card.is-due::after {
  content: "";
  position: absolute; top: 0; right: 12px;
  width: 10px; height: 28px;
  background: var(--ds-book-ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  pointer-events: none;
}
.td-card.is-due .td-card-h { padding-right: 28px; }
.td-card-h { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.td-card-h > div { flex: 1; min-width: 0; }
/* Contact cards only. The headline is its own grid item so a phone can
   pull it out from beside the avatar. Post cards and accepted-connection
   cards keep the flex header. */
.td-card-h.td-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  grid-template-areas: "av name action";
}
.td-card-h.td-head.has-person {
  grid-template-areas:
    "av name action"
    "av person .";
}
.td-card-h.td-head > .td-av { grid-area: av; }
.td-card-h.td-head > .td-id { grid-area: name; min-width: 0; }
.td-card-h.td-head > .td-kick { grid-area: action; min-width: min-content; justify-self: end; }
.td-card-h.td-head .td-action { overflow-wrap: normal; word-break: normal; }
.td-card-h.td-head > .td-person { grid-area: person; min-width: 0; margin-top: 0; }
.td-av,
.td-card-h > .td-av {
  width: 40px; height: 40px; flex: 0 0 40px; aspect-ratio: 1;
  border-radius: 50%; box-sizing: border-box; overflow: hidden;
  display: grid; place-items: center; position: relative;
  background: var(--ds-book-ribbon-soft); color: var(--ds-book-ribbon);
  font-size: 0.7rem; font-weight: 600;
}
.td-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600; font-size: 1.0625rem;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.td-person { color: var(--ds-book-muted); font-size: 0.8rem; margin-top: 2px; }
.td-person:focus-visible { outline: 2px solid var(--ds-book-ribbon); outline-offset: 2px; }
.td-action {
  font-family: var(--ds-font-label); font-weight: 600; font-size: calc(0.62rem * 1.2); letter-spacing: 0.12em;
  text-transform: lowercase; color: var(--ds-book-muted);
  white-space: normal; text-align: right; overflow-wrap: anywhere;
}
.td-card.is-due .td-action { margin-right: 0; }
.td-due { color: var(--ds-book-ribbon); font-size: 0.75rem; font-weight: 600; }
.td-mem, .td-why { margin: 8px 0 0 52px; font-size: 0.84rem; }
.td-sent { font: inherit; color: inherit; }
.td-sent-tip {
  position: fixed;
  z-index: 80;
  max-width: 240px;
  padding: 6px 8px;
  background: var(--ds-book-card, #f4efe8);
  color: var(--ds-book-ink, #1d1a17);
  border: 1px solid var(--ds-book-line, #d9cfc3);
  font-size: 0.75rem;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(29, 26, 23, 0.12);
  pointer-events: none;
}
.td-sent-tip[hidden] { display: none; }
.td-pitch {
  margin: 8px 0 0 52px;
  color: #5c5148;
  font-size: 0.84rem;
}
button.btn-link.td-vendor-link,
button.tl-link.td-vendor-link,
button.btn-link.td-not-now {
  color: #5c5148;
  background: transparent;
  text-decoration: underline;
  min-height: 44px;
  font-weight: 450;
}
body.is-today-redesign button.btn-link.td-vendor-link:hover,
body.is-today-redesign button.btn-link.td-vendor-link:focus-visible,
body.is-today-redesign button.tl-link.td-vendor-link:hover,
body.is-today-redesign button.tl-link.td-vendor-link:focus-visible,
body.is-today-redesign button.btn-link.td-not-now:hover,
body.is-today-redesign button.btn-link.td-not-now:focus-visible,
button.tl-link.td-vendor-link:hover,
button.tl-link.td-vendor-link:focus-visible,
button.btn-link.td-not-now:hover,
button.btn-link.td-not-now:focus-visible {
  color: #5c5148;
  background: transparent;
  text-decoration: underline;
}
.td-mem {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-size: 0.9rem; line-height: 1.4;
  color: var(--ds-book-ink);
  border-left: 1px solid var(--ds-book-line-strong);
  padding-left: 10px;
}
.td-k {
  font-family: var(--ds-font-label); font-style: normal; font-weight: 600;
  font-size: calc(0.62rem * 1.2); letter-spacing: 0.12em; text-transform: lowercase;
  color: var(--ds-book-muted); margin-right: 8px;
}
.td-mark {
  display: inline-block; border: 1px solid var(--ds-book-line); border-radius: 12px;
  padding: 1px 8px; font-family: var(--ds-font-sans); font-style: normal;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ds-book-ribbon); background: var(--ds-book-ribbon-soft);
}
.td-draftrow {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  margin: 12px 0 0 52px; min-width: 0; max-width: 100%;
}
.td-draft {
  flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  background: var(--ds-book-draft);
  border-left: 1px solid var(--ds-book-ribbon);
  padding: 10px 12px; font-size: 0.84rem; line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
textarea.td-draft {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  resize: vertical; overflow: auto;
}
.td-actions {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  flex: 1 1 100%; max-width: 100%;
}
.td-act-btn { min-height: 44px; }
.td-ask, .td-consent-email { width: 100%; margin-top: 8px; }
.td-more { color: var(--ds-book-muted); font-size: 0.8rem; }
.td-more:empty { display: none; }

.td-rail .td-k { display: block; margin: 0 0 8px; }
.td-up { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-book-line); font-size: 0.84rem; }
.td-up i { font-style: normal; color: var(--ds-book-muted); width: 72px; flex: none; font-size: 0.75rem; }
.td-up span { display: block; color: var(--ds-book-muted); font-size: 0.75rem; }
#td-signal-feed {
  max-height: 280px;
  overflow-x: clip;
  overflow-y: auto;
}
#td-signal-block,
#td-signal-feed,
#td-signal-feed .feedrow,
#td-signal-feed .feedrow-body {
  min-width: 0;
  max-width: 100%;
}
#td-signal-feed .feedrow-tl,
#td-signal-feed .feedrow-desc,
#td-signal-feed .feedrow-nm {
  overflow-wrap: anywhere;
}
body.is-today-redesign .fscore { color: var(--ds-book-ribbon); }
body.is-today-redesign #td-cards .whos-new-card,
body.is-today-redesign #td-cards .nc-batch,
body.is-today-redesign #td-launch .taskrow {
  background: var(--ds-book-card);
  border: 1px solid var(--ds-book-line);
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: var(--ds-contact-shadow);
}
body.is-today-redesign #td-cards .nc-batch {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body.is-today-redesign .nc-batch .nc-field { color: var(--ds-book-muted); }
body.is-today-redesign .nc-batch .nc-field input {
  background: var(--ds-book-paper);
  border-color: var(--ds-book-line);
  color: var(--ds-book-ink);
}

/* Accepted LinkedIn connections. Same ledger slip as a Your post card:
   crème surface, Playfair name, full-width fields on paper (not the draft
   salmon).    Save and Send use the shared Today ribbon button (.btn-primary.td-ribbon),
   the same primary a comment or message card uses. Save sits under the
   fields. Send sits in the action row with Not now.
   The small notch is the card mark, same as a post card. */
.oi-card {
  position: relative;
  display: block;
  background: var(--ds-book-card);
  border: 1px solid var(--ds-book-line);
  border-radius: 4px;
  padding: 16px;
  margin: 0 0 12px;
  color: var(--ds-book-ink);
  box-shadow: var(--ds-contact-shadow);
  cursor: default;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.oi-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  width: 10px;
  height: 28px;
  background: var(--ds-book-ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  pointer-events: none;
}
.oi-card:hover {
  background: var(--ds-book-card);
  transform: none;
}
.oi-card .td-card-h { padding-right: 28px; }
.oi-card .td-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ds-book-ink);
}
.oi-card .td-why,
.oi-card textarea.oi-draft { margin-left: 0; }
.oi-card .nc-ask {
  margin-top: 12px;
  color: var(--ds-book-ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.oi-card .nc-note-label {
  display: block;
  margin-top: 10px;
  color: var(--ds-book-muted);
  font-size: 0.85rem;
}
.oi-card .oi-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}
.oi-card select.nc-know,
.oi-card textarea.oi-note {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 8px;
  background-color: var(--ds-book-paper);
  border: 1px solid var(--ds-book-line);
  border-radius: 4px;
  color: var(--ds-book-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  padding: 10px 12px;
}
.oi-card textarea.oi-note {
  min-height: 44px;
  resize: vertical;
}
.oi-card textarea.oi-draft {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}
.oi-error {
  margin: 8px 0 0;
  color: var(--ds-text-negative);
  font-size: 0.9rem;
  line-height: 1.45;
}
.oi-error[hidden] { display: none; }
.td-empty { display: none; }

/* Person panel. It is the existing composer. The slide is an animation so it
   runs when the dialog is inserted already open, and it stays under 300ms.
   The scrim itself is a shared overlay, so it is restyled in design-system.css. */
body.is-today-redesign .cm-composer {
  width: min(960px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  max-height: none;
  height: 100%;
  margin: 0;
  border-radius: 4px;
  background: var(--ds-book-paper);
  box-shadow: var(--ds-book-panel-shadow);
  animation: td-panel-in var(--ds-motion-base, 280ms) var(--ds-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  will-change: transform;
}
body.is-today-redesign .cm-main,
body.is-today-redesign .cm-body,
body.is-today-redesign .chan,
body.is-today-redesign .chan-screen {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
body.is-today-redesign .chan-actions {
  flex-wrap: wrap;
  max-width: 100%;
}
body.is-today-redesign .ledger {
  width: min(260px, 34%);
  flex: 0 1 260px;
  min-width: 0;
  box-sizing: border-box;
}
@keyframes td-panel-in {
  from { transform: translateX(105%); }
  to { transform: translateX(0); }
}
body.is-today-redesign .cm-who {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem; font-weight: 500;
}
body.is-today-redesign .cm-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.is-today-redesign .cm-nav { display: flex; align-items: center; gap: 6px; color: var(--ds-book-nav-muted); font-size: 0.8rem; }
body.is-today-redesign .ledger {
  background: var(--ds-book-draft);
  border-left-color: var(--ds-book-line);
}
body.is-today-redesign .cm-post {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-size: 1.05rem; line-height: 1.45;
}
body.is-today-redesign .chan [contenteditable]:focus {
  outline: 2px solid var(--ds-book-ribbon);
}
.td-booklink { display: inline-block; margin-top: 12px; color: var(--ds-book-muted); font-size: 0.8rem; }

/* After the queue is clear. The sentence is the moment. The rest is optional
   and only painted when its source arrived. Nothing here asks for another post. */
.td-done { display: flex; flex-direction: column; gap: 16px; max-width: 40rem; }
.td-done-line {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 0;
  color: var(--ds-book-ink);
}
.td-done-streak {
  margin: 8px 0 0;
  color: var(--ds-book-muted);
  font-size: 0.9rem;
}
.td-done-block {
  background: var(--ds-book-card);
  border: 1px solid var(--ds-book-line);
  border-radius: 4px;
  padding: 16px;
}
.td-done-prompt {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 8px 0 0;
  color: var(--ds-book-ink);
}
.td-done-note {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  margin-top: 12px;
  border: 1px solid var(--ds-book-line);
  border-radius: 4px;
  background: var(--ds-book-paper);
  color: var(--ds-book-ink);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 10px 12px;
  resize: vertical;
}
.td-done-actions { margin-top: 10px; }
.td-done-status { margin: 8px 0 0; color: var(--ds-book-muted); font-size: 0.84rem; min-height: 1.2em; }
.td-done-link { color: var(--ds-book-ribbon); }
.td-done-meta { margin: 4px 0 0; color: var(--ds-book-muted); font-size: 0.8rem; }
.td-done-people {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ds-book-ink);
  font-size: 0.9rem;
  line-height: 1.45;
}
.td-done-people li { margin-top: 4px; }
.td-done-people .td-mark { margin-left: 6px; }

/* After the queue is clear, Today is one column. The meet card used to be
   the whole page column, Add intel and This week sat in the queue column
   (about half, and capped at 40rem), and Coming up was the 240px rail with
   no card chrome. Same width, 16px padding, 8px radius. */
body.is-today-redesign .td-cols:has(#td-done) {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
body.is-today-redesign .td-cols:has(#td-done) .td-main,
body.is-today-redesign .td-cols:has(#td-done) .td-rail,
body.is-today-redesign .td-cols:has(#td-done) .td-done {
  width: 100%;
  max-width: none;
  min-width: 0;
}
body.is-today-redesign .td-cols:has(#td-done) .td-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.is-today-redesign .qr-meet,
body.is-today-redesign .td-done-block,
body.is-today-redesign #td-upcoming:not(.td-empty) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: var(--ds-book-card);
  border: 1px solid var(--ds-book-line);
  border-radius: var(--ds-card-radius, 8px);
  padding: var(--ds-card-padding, 16px);
  box-shadow: var(--ds-contact-shadow);
}
body.is-today-redesign .qr-meet { margin: 0 0 12px; }
body.is-today-redesign .qr-meet h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ds-book-ink);
}
body.is-today-redesign .td-done {
  gap: 12px;
  max-width: none;
}

@media (max-width: 768px) {
  .td-done-line { font-size: 1.35rem; }
}

/* A daily-touch Edit on a phone. The sheet fills the visible viewport, the
   message has room, and the action bar stays at the bottom of that viewport
   so the keyboard does not cover Send. */
@media (max-width: 768px) {
  body.is-today-redesign .cm-composer.cm-phone {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    animation: none;
  }
  body.is-today-redesign .cm-sheet {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
  body.is-today-redesign .cm-sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0 16px 12px;
  }
  body.is-today-redesign .cm-sheet-draft {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 38vh;
  }
  body.is-today-redesign .cm-sheet .textarea,
  body.is-today-redesign .cm-sheet .input,
  body.is-today-redesign .cm-sheet select.nc-know {
    font-size: 16px;
  }
  body.is-today-redesign .cm-sheet-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--ds-book-paper);
    border-top: 1px solid var(--ds-book-line);
  }
  body.is-today-redesign .cm-sheet-bar .sp { flex: 1; }
  /* Keyboard up: the Message box shrinks to fit above the bar and keeps a
     margin so centering never tucks it under the bar. */
  body.is-today-redesign .cm-sheet-scroll { scroll-padding-bottom: 16px; }
  body.is-today-redesign .cm-sheet-draft { scroll-margin: 16px 0; }
  body.is-today-redesign .cm-sheet.is-keyboard .cm-sheet-draft { min-height: 96px; }
  body.is-today-redesign .cm-sheet.is-keyboard .cm-sheet-bar { padding-bottom: 10px; }
  body.is-today-redesign .cm-k {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--ds-book-muted);
  }
  body.is-today-redesign .cm-know-status,
  body.is-today-redesign .cm-redraft-offer {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--ds-book-ink);
  }
}

@media (max-width: 900px) {
  /* Column flex with align-items:flex-start sizes the queue to the filter
     row's max-content. That row does not wrap, so at 390px the page grows
     past the viewport and Safari can scroll the Signals block off the left. */
  .td-cols {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .td-main,
  .td-rail,
  .td-tabsrow,
  #td-cards,
  #td-cards .td-card {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  .td-rail { width: 100%; }
  .td-filters {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .td-top { flex-direction: column; align-items: flex-start; }
  .td-top-copy { width: 100%; }
  .td-mem, .td-why, .td-pitch, .td-draftrow { margin-left: 0; }
  /* The headline was a column beside the avatar, so a long LinkedIn line
     wrapped into a stack of short lines. On a phone it sits under the
     name row and lines up with the card padding, two lines, then an ellipsis. */
  .td-card-h.td-head.has-person {
    grid-template-areas:
      "av name action"
      "person person person";
    row-gap: 8px;
  }
  .td-card-h.td-head.has-person > .td-person {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .td-card-h.td-head.has-person > .td-person.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  body.is-today-redesign .cm-composer { flex-direction: column; width: 100%; }
  body.is-today-redesign .ledger { width: auto; border-left: 0; border-top: 1px solid var(--ds-book-line); }
}

/* The product tour, when someone starts it from the rail. Brick and leather,
   and the spotlight follows the editorial anchors. */
body.is-today-redesign .bb-tour-cut {
  border-color: var(--ds-book-ribbon);
  box-shadow: 0 0 0 9999px var(--ds-book-scrim);
}
body.is-today-redesign .bb-tour-tip {
  background: var(--ds-book-paper);
  color: var(--ds-book-ink);
  border-color: var(--ds-book-line);
}
body.is-today-redesign .bb-tour-arrow {
  background: var(--ds-book-paper);
  border-color: var(--ds-book-line);
}
body.is-today-redesign .bb-tour-step,
body.is-today-redesign .bb-tour-src svg { color: var(--ds-book-ribbon); }
body.is-today-redesign .bb-tour-dot.is-on { background: var(--ds-book-ribbon); }
body.is-today-redesign .bb-tour-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
}
body.is-today-redesign .bb-tour-foot { border-top-color: var(--ds-book-line); }
body.is-today-redesign .bb-tour-module {
  color: var(--ds-book-muted);
  background: var(--ds-book-draft);
  border-color: var(--ds-book-line);
}
body.is-today-redesign .bb-tour-body { color: var(--ds-book-ink); }
body.is-today-redesign .bb-tour-src { color: var(--ds-book-muted); }
body.is-today-redesign .bb-tour-back,
body.is-today-redesign .bb-tour-skip { color: var(--ds-book-muted); }
body.is-today-redesign .bb-tour-back:hover,
body.is-today-redesign .bb-tour-skip:hover { color: var(--ds-book-ink); }
body.is-today-redesign .bb-tour-tip.is-sheet { box-shadow: var(--ds-book-panel-shadow); }
body.is-today-redesign .bb-tour-next {
  background: var(--ds-book-ribbon);
  color: var(--ds-book-paper);
}
body.is-today-redesign .bb-tour-next:hover { background: var(--ds-book-ribbon-hover); }

/* The ICP wizard, when it is opened on purpose. Paper, a serif title, and a
   ribbon focus ring. The scrim itself is the shared overlay. */
body.is-today-redesign .conv-grow h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
}
body.is-today-redesign .cv-seg.cur .n,
body.is-today-redesign .conv .who.bot { color: var(--ds-book-ribbon); }
body.is-today-redesign .conv .composer .field:focus-within {
  border-color: var(--ds-book-ribbon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-book-ribbon) 22%, transparent);
}
body.is-today-redesign .conv-icon.wiz-close:focus-visible,
body.is-today-redesign .conv .composer .send:focus-visible {
  outline-color: var(--ds-book-ribbon);
}

.taskrow.is-push-target,
.td-card.is-push-target {
  box-shadow: inset 3px 0 0 var(--ds-book-ribbon);
}

/* Comment draft on a phone. The dark context line stays one row, the post
   is two lines of body text until it is opened, and the textarea fills the
   sheet. The sheet height comes from visualViewport in composer.js. Motion
   stays on the panel's transform; height is not transitioned. */
@media (max-width: 480px) {
  body.is-today-redesign .cm-composer.cm-comment-phone {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--ds-book-paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    /* The shared panel slides in from the right. On a phone that slide
       starts off the opaque sheet, and a viewport resize restarts it.
       The overlay already fades. This sheet just sits in the visual viewport. */
    animation: none;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .ledger,
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-using,
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-main > #cm-status,
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-who,
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-marks,
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-role {
    display: none;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-main {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-head {
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 4px 0 12px;
    overflow: hidden;
    box-sizing: border-box;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-head > div:first-child,
  body.is-today-redesign .cm-composer.cm-comment-phone #cm-how,
  body.is-today-redesign .cm-composer.cm-comment-phone .hwk {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .hwk-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    height: 44px;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .hwk-k {
    display: inline;
    flex: none;
    color: var(--ds-book-nav-muted);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .hwk-v {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-book-on-leather);
    font-size: var(--ds-body-sm);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-nav {
    flex: none;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-head:has(.hwk-edit:not([hidden])) {
    height: auto;
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 12px 0;
    overflow: hidden;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .chan,
  body.is-today-redesign .cm-composer.cm-comment-phone .chan-screen {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ds-book-card);
    border-color: var(--ds-book-line);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .chan-chrome,
  body.is-today-redesign .cm-composer.cm-comment-phone .chan-screen {
    background: transparent;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .chan-chrome {
    flex: none;
    padding: 6px 0 4px;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-peep {
    flex: none;
    padding-bottom: 6px;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-av {
    width: 28px;
    height: 28px;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post,
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post-toggle,
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post-text {
    font-family: var(--ds-font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: var(--ds-body-md);
    line-height: 1.35;
    color: var(--ds-book-ink);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post {
    flex: none;
    margin: 0 0 8px;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    width: 100%;
    min-width: 0;
    min-height: 1.35em;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post-text.is-open {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    max-height: none;
    white-space: normal;
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .cm-post-link {
    margin-left: auto;
    font-family: var(--ds-font-sans);
    font-style: normal;
    font-size: var(--ds-body-sm);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone textarea.cm-draft {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px;
    resize: none;
    overflow-y: auto;
    font-family: var(--ds-font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ds-book-ink);
    background: var(--ds-book-draft);
    border: 1px solid var(--ds-book-line);
    border-radius: var(--ds-radius);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone textarea.cm-draft:focus {
    outline: 2px solid var(--ds-book-ribbon);
    outline-offset: 2px;
    border-color: var(--ds-book-ribbon);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone .chan-actions {
    flex: none;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    background: var(--ds-book-card);
  }
  body.is-today-redesign .cm-composer.cm-comment-phone.is-tight .cm-peep,
  body.is-today-redesign .cm-composer.cm-comment-phone.is-tight .chan-chrome {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-today-redesign .td-card,
  body.is-today-redesign .td-glide,
  body.is-today-redesign .td-filter,
  body.is-today-redesign .nav-item,
  body.is-today-redesign .cm-composer {
    transition: none;
    animation: none;
  }
  body.is-today-redesign .td-card:hover { transform: none; }
}

/* Connect cards: this person is not a connection yet.  Muted, never red. */
.taskrow .kit-state {
  margin-top: 2px;
  color: #7a6f66;
  font-size: 12.5px;
  font-weight: 560;
  line-height: 1.3;
}

/* Newer Today cards (today-extras.js).  Choices use the existing pill buttons. */
.tx-quote { border-left: 2px solid var(--ds-book-line); padding-left: 10px; color: var(--ds-book-ink); font-style: italic; }
.tx-sent-line { color: var(--ds-book-muted); font-size: 0.78rem; }
body.is-today-redesign .tx-headline,
body.is-today-redesign .td-headline { color: var(--ds-book-ink, inherit); font-weight: 600; }
.tx-actions[data-snooze-open] { flex-wrap: wrap; }
.tx-actions [data-snooze-choices][hidden] { display: none; }
.tx-actions [data-snooze-choices]:not([hidden]) {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  animation: kit-in var(--ds-motion-fast) var(--ds-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .tx-actions [data-snooze-choices] { animation: none; transition: none; }
}
.tx-list { margin: 8px 0 0 52px; padding: 0; list-style: none; font-size: 0.86rem; }
.tx-list li { padding: 6px 0; border-top: 1px solid var(--ds-book-line); }
.tx-list li:first-child { border-top: 0; }
.tx-step { color: var(--ds-book-muted); display: block; margin-top: 2px; }
@media (max-width: 768px) { .tx-list { margin-left: 0; } }

/* Today tabs: one pill row.  On a phone the whole row, Signals included,
   scrolls sideways instead of squeezing the tabs into each other. */
.td-filters,
.td-glide,
.td-filter { border-radius: var(--ds-pill); }
.td-glide { top: 3px; bottom: 3px; }
@media (max-width: 600px) {
  .td-tabsrow {
    position: relative;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
  }
  .td-tabsrow::-webkit-scrollbar { display: none; }
  .td-filters {
    flex: 0 0 auto;
    overflow: visible;
    max-width: none;
  }
  .td-filter {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 14px;
    scroll-snap-align: start;
  }
  .td-signals-jump {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--ds-pill);
    background: var(--ds-book-ribbon-soft);
    color: var(--ds-book-ink);
    font-size: 0.75rem;
    scroll-snap-align: start;
  }
}

/* One-time note after /signals redirects here (QA batch 6). */
.bb-signals-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--ds-book-line);
  border-radius: 8px;
  background: var(--ds-book-card);
}
.bb-signals-notice p { margin: 0; }