/*
 * 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 .dashboard-main,
body.is-today-redesign .dashboard-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: background-color .18s, color .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; }
@media (max-width: 768px) {
  body.is-today-redesign .topbar {
    display: flex;
    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 .dashboard-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-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; 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: 6px 0;
  color: var(--ds-book-ink);
}
.td-greet em { font-style: italic; color: var(--ds-book-ribbon); }
.td-sub { color: var(--ds-book-muted); font-size: 0.95rem; }
.td-top-side { display: flex; align-items: center; gap: 12px; flex: none; }
.td-togo { font-size: 0.95rem; }
.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-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; 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 .24s cubic-bezier(.3, .7, .2, 1), width .24s cubic-bezier(.3, .7, .2, 1);
}
.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;
  transition: color .2s;
}
.td-filter.is-on { color: var(--ds-book-ink); font-weight: 600; }
.td-signals-jump { color: var(--ds-book-muted); font-size: 0.8rem; white-space: nowrap; text-decoration: none; }
.td-signals-jump:hover { color: var(--ds-book-ink); }

.td-card {
  position: relative;
  background: var(--ds-book-card);
  border: 1px solid var(--ds-book-line);
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
#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-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; }
.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;
  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-action {
  font-family: var(--ds-font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; 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-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-mono); font-style: normal; font-weight: 500;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  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: 3px solid var(--ds-book-ribbon);
  padding: 10px 12px; font-size: 0.84rem; line-height: 1.45;
  overflow-wrap: anywhere;
}
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: auto; }
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;
}
.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 .28s cubic-bezier(.2, .8, .2, 1);
}
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; }

@media (max-width: 900px) {
  .td-cols { flex-direction: column; }
  .td-rail { width: 100%; }
  .td-top { flex-direction: column; align-items: flex-start; }
  .td-mem, .td-why, .td-draftrow { margin-left: 0; }
  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-next {
  background: var(--ds-book-leather);
  color: var(--ds-book-on-leather);
}
body.is-today-redesign .bb-tour-next:hover { background: var(--ds-book-leather-2); }

/* 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);
}

@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; }
}