:root {
  color-scheme: light;
  --page: #f7f7f4;
  --surface: #ffffff;
  --surface-soft: #fbfbf8;
  --surface-warm: #fff9c9;
  --ink: #222222;
  --ink-muted: #707070;
  --ink-faint: #aaa9a3;
  --line: #deddd7;
  --line-strong: #b9b7ae;
  --accent: #2d5d72;
  --accent-soft: #e5f0f2;
  --danger: #e17466;
  --ok: #3e7b57;
  --focus: #1d1d1d;
  --shadow: 0 14px 36px rgba(31, 31, 27, 0.08);
  --radius: 8px;
  --row-radius: 7px;
  --row-height: 72px;
  --row-padding: 9px 13px 9px 8px;
  --list-gap: 9px;
  --font: Arial, sans-serif;
}

body[data-theme="contrast"] {
  --page: #f2f3f0;
  --surface: #ffffff;
  --surface-soft: #f7f7f2;
  --surface-warm: #fff1a8;
  --ink: #121212;
  --ink-muted: #4f4f4f;
  --ink-faint: #8b8b84;
  --line: #ceccc2;
  --line-strong: #8f8d82;
  --accent: #194f68;
  --shadow: 0 16px 34px rgba(18, 18, 18, 0.11);
}

body[data-theme="paper"] {
  --page: #f4f1e9;
  --surface: #fffdf7;
  --surface-soft: #fbf6eb;
  --surface-warm: #fff4bc;
  --ink: #252018;
  --ink-muted: #756e62;
  --ink-faint: #aaa294;
  --line: #ded5c3;
  --line-strong: #b7aa93;
  --accent: #6a604f;
  --shadow: 0 14px 30px rgba(80, 66, 45, 0.1);
}

body[data-accent="green"] {
  --accent: #3e7b57;
  --accent-soft: #e8f2eb;
}

body[data-accent="graphite"] {
  --accent: #3f4244;
  --accent-soft: #eceeed;
}

body[data-density="compact"] {
  --row-height: 58px;
  --row-padding: 6px 10px 6px 7px;
  --list-gap: 6px;
}

body[data-density="relaxed"] {
  --row-height: 88px;
  --row-padding: 13px 16px 13px 10px;
  --list-gap: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  color: var(--ink);
  background-color: var(--page);
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5.8v6.4M5.8 9h6.4' stroke='%232d5d72' stroke-opacity='.16' stroke-width='1' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  font-family: var(--font);
  line-height: 1.35;
  letter-spacing: 0;
  overflow-x: hidden;
}

body:not(.is-authenticated) .app-frame {
  display: none;
}

body.is-authenticated .login-screen {
  display: none;
}

body:not(.is-authenticated) {
  background: #ffffff;
}

.login-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  width: 100%;
  padding: 48px 24px 64px;
  background: #ffffff;
}

.login-wrap {
  display: grid;
  justify-items: start;
  width: min(745px, calc(100vw - 48px));
}

.login-logo {
  display: block;
  width: 100%;
  height: auto;
}

.login-card {
  display: grid;
  gap: 13px;
  width: 451px;
  max-width: 100%;
  margin: -7px 0 0 270px;
  padding: 20px 16px 32px;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 18px;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
}

.login-card h2 {
  margin: 0;
  color: #161616;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.1;
}

.login-card p {
  margin: -5px 0 3px;
  color: #707070;
  font-size: 13px;
  line-height: 1.35;
}

.login-card label {
  display: grid;
  gap: 5px;
  color: #111111;
  font-size: 12px;
  font-weight: 700;
}

.login-card label span {
  color: inherit;
  font-size: inherit;
}

.login-card input {
  min-height: 36px;
  width: 100%;
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
  color: #161616;
  font: 13px Georgia, "Times New Roman", serif;
  outline: none;
}

.login-card input:focus {
  border-color: #b8b8b8;
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.08), 0 2px 7px rgba(0, 0, 0, 0.08);
}

.login-submit {
  min-height: 35px;
  color: #ffffff;
  background: #141414;
  border: 1px solid #141414;
  border-radius: 9px;
  cursor: pointer;
  font: 700 13px Georgia, "Times New Roman", serif;
}

.login-register {
  margin: 0;
  color: #707070;
  font-size: 12px;
  line-height: 1.4;
}

.login-register a {
  color: #1b1b1b;
  font-weight: 700;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.app-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.91);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: transparent;
  background: transparent;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  overflow: hidden;
}

.caesar-avatar {
  display: block;
  flex: 0 0 auto;
  background-image: url("assets/documentator-login-logo.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
  filter: grayscale(1);
}

.brand .caesar-avatar {
  width: 38px;
  height: 38px;
}

.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background-color: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.context-chain,
.quick-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.context-chain {
  overflow: visible;
  scrollbar-width: none;
}

.context-chain::-webkit-scrollbar {
  display: none;
}

.context-chain button,
.primary-action,
.icon-button,
.tool-list button,
.search-field input,
.tiny-button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.project-folder {
  position: relative;
  flex: 0 0 auto;
}

.project-folder::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  height: 12px;
}

.project-folder:hover::after,
.project-folder:focus-within::after {
  display: block;
}

.context-chain button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
}

.context-chain button:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.project-folder:hover > button,
.project-folder:focus-within > button {
  color: var(--ink);
  background: #fff;
  border-color: var(--line-strong);
}

.folder-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 65;
  display: none;
  gap: 4px;
  width: 244px;
  padding: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: folderMenuIn 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.folder-tree,
.folder-subtree {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.folder-node {
  position: relative;
}

.folder-node::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  display: none;
  width: 12px;
}

.folder-node:hover::after,
.folder-node:focus-within::after {
  display: block;
}

.folder-node-button,
.folder-menu a {
  width: 100%;
}

.folder-node-button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 12px;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 7px 8px;
  color: var(--ink-muted);
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-node-button::before {
  content: "";
  width: 17px;
  height: 12px;
  background: #e9e8e1;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 6px -4px 0 -2px #f5f4ee;
}

.folder-node.has-children > .folder-node-button::after {
  content: "›";
  justify-self: end;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
}

.folder-node:hover > .folder-node-button,
.folder-node:focus-within > .folder-node-button {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line-strong);
  transform: translateX(2px);
}

.folder-subtree {
  position: absolute;
  top: -7px;
  left: calc(100% + 10px);
  z-index: 78;
  display: none;
  width: 236px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: folderMenuIn 170ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.folder-node:hover > .folder-subtree,
.folder-node:focus-within > .folder-subtree {
  display: grid;
}

.project-folder:nth-last-child(-n + 2) .folder-subtree {
  right: calc(100% + 10px);
  left: auto;
}

.folder-menu > strong,
.folder-tabs {
  display: none;
}

.folder-menu strong {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
}

.folder-menu a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 5px;
  font-size: 13px;
  background: #fff8c8;
  border: 1px solid #eee2a2;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-menu a::before {
  content: "▣";
  color: #9a8426;
  font-size: 12px;
}

.folder-menu a b {
  color: var(--ink);
  font-size: 13px;
}

.folder-menu a small {
  display: none;
}

.folder-stats {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}

.folder-stats span {
  min-height: 22px;
  padding: 4px 6px;
  color: var(--ink-muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
}

.folder-children {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 2px 0 7px;
}

.folder-children span {
  position: relative;
  min-width: 0;
  padding: 8px 9px 8px 34px;
  color: var(--ink-muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(-7px) scale(0.96);
  transition:
    opacity 240ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-children span::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 9px;
  width: 18px;
  height: 12px;
  background: #e9e8e1;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 6px -4px 0 -2px #f5f4ee;
}

.folder-children span::after {
  content: "Вложенная папка\A Проект выпуска\A Архив проекта";
  position: absolute;
  top: -1px;
  left: calc(100% + 10px);
  z-index: 75;
  width: 190px;
  padding: 8px;
  color: var(--ink-muted);
  white-space: pre-line;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 7px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-children span:hover {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line-strong);
}

.folder-children span:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.folder-children span:nth-child(2) {
  transition-delay: 45ms;
}

.folder-children span:nth-child(3) {
  transition-delay: 90ms;
}

.folder-menu a:hover,
.folder-menu a:focus-visible {
  color: var(--ink);
  background: #fff1a8;
  border-color: #d6c567;
  transform: translateX(3px);
}

.project-folder:hover .folder-menu,
.project-folder:focus-within .folder-menu {
  display: grid;
}

.project-folder:hover .folder-children span,
.project-folder:focus-within .folder-children span {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.quick-actions {
  justify-content: end;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.account-button {
  display: grid;
  place-items: center;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 50%;
  background: #ffffff;
}

.primary-action {
  min-height: 36px;
  padding: 7px 11px;
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.app-shell {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 18px 18px 64px;
}

.project-home,
.work-area,
.detail-panel {
  min-width: 0;
}

.work-area {
  width: 100%;
}

.project-home {
  position: fixed;
  right: 18px;
  top: 76px;
  z-index: 55;
  width: 190px;
  align-self: start;
  max-height: calc(100vh - 94px);
  overflow: visible;
}

.detail-panel {
  display: none;
}

.project-card,
.checkin-box,
.timeline-notice,
.work-toolbar,
.team-drawer {
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.project-card {
  padding: 13px;
  border-radius: var(--radius);
}

.eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.project-card h1,
.work-toolbar h2,
.inline-detail h2,
.team-drawer h2 {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.15;
}

.project-card h1 {
  font-size: 16px;
}

.project-card p {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  display: none;
}

.project-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 0 0;
}

.project-stats div {
  min-width: 0;
  padding: 7px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.project-stats dt {
  color: var(--ink-faint);
  font-size: 10px;
}

.project-stats dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.tool-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.tool-list button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.tool-list button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.tool-list button.is-active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.tool-list small {
  color: var(--ink-muted);
  font-size: 11px;
  display: none;
}

.tool-list button[aria-pressed="true"] small {
  color: rgba(255, 255, 255, 0.68);
}

.checkin-box {
  margin-top: 12px;
  padding: 13px;
  border-radius: var(--radius);
  display: none;
}

.appearance-panel {
  position: absolute;
  top: 214px;
  right: calc(100% + 10px);
  z-index: 60;
  display: grid;
  gap: 7px;
  width: 230px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.appearance-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.appearance-panel header {
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
}

.appearance-panel button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 7px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.appearance-panel button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.theme-swatch {
  width: 28px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.theme-reference {
  background:
    url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 2.5v4M2.5 4.5h4' stroke='%232d5d72' stroke-opacity='.2' stroke-width='.8'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #ffffff 0 48%, #2d5d72 48% 58%, #f7f7f4 58%);
  background-size: 9px 9px, 100% 100%;
}

.theme-contrast {
  background: linear-gradient(90deg, #ffffff 0 46%, #194f68 46% 62%, #121212 62%);
}

.theme-paper {
  background: linear-gradient(90deg, #fffdf7 0 50%, #6a604f 50% 62%, #f4f1e9 62%);
}

.checkin-box header {
  display: grid;
  gap: 3px;
}

.checkin-box header span {
  color: var(--ink-faint);
  font-size: 10px;
  text-transform: uppercase;
}

.checkin-box p {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.work-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 14px;
  align-items: end;
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: var(--radius);
}

.work-toolbar p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.project-toolbar-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  align-items: center;
  max-height: 42px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-toolbar-actions button {
  min-height: 32px;
  padding: 6px 9px;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.project-toolbar-actions button:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.project-toolbar-actions [data-action="toggle-history"][aria-pressed="true"] {
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
}

.project-history-panel {
  width: min(980px, 100%);
  max-height: 0;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms ease,
    margin-top 300ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-history-panel.is-open {
  max-height: 520px;
  margin-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

.composition-editor-panel {
  width: min(980px, 100%);
  max-height: 0;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms ease,
    margin-top 300ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.composition-editor-panel.is-open {
  max-height: 720px;
  margin-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

.composition-editor-inner {
  display: grid;
  gap: 10px;
  max-height: 720px;
  overflow: auto;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.composition-editor-inner > header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.composition-editor-inner > header strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.composition-editor-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.composition-editor-actions button,
.composition-outline-row button {
  min-height: 28px;
  padding: 5px 8px;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.composition-editor-actions button:hover,
.composition-outline-row button:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.composition-outline {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.composition-outline-row {
  display: grid;
  grid-template-columns: 16px 76px minmax(0, 1fr) 30px 30px;
  gap: 7px;
  align-items: center;
  padding: 6px 6px 6px calc(6px + var(--level) * 22px);
  background: var(--surface-soft);
  border-radius: 5px;
}

.composition-outline-row input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
}

.composition-outline-row input:focus {
  outline: none;
  border-color: var(--ink);
}

.composition-number-input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.project-history-inner {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding: 0 2px 2px;
}

.project-history-group,
.feed-section,
.task-outline-group,
.task-outline-intro,
.task-outline-summary article {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(31, 31, 27, 0.05);
}

.project-history-group {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.project-history-group header,
.feed-section header,
.task-outline-group header {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.project-history-group header strong,
.feed-section header strong,
.task-outline-group header strong {
  min-width: 0;
  font-size: 13px;
}

.project-history-group header span,
.feed-section header span,
.task-outline-group header span {
  color: var(--ink-muted);
  font-size: 11px;
}

.project-history-line {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.project-history-line::-webkit-scrollbar {
  display: none;
}

.project-history-card {
  flex: 0 0 112px;
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 7px;
  color: var(--ink-muted);
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.project-history-card:hover,
.project-history-card.is-active {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--ink);
}

.project-history-card strong {
  font-size: 12px;
}

.project-history-card span,
.project-history-card small {
  font-size: 10px;
}

.search-field {
  display: grid;
  gap: 5px;
}

.search-field span {
  color: var(--ink-faint);
  font-size: 10px;
  text-transform: uppercase;
}

.search-field input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
}

.timeline-notice {
  width: min(980px, 100%);
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px 12px;
  color: var(--ink-muted);
  border-radius: var(--radius);
  font-size: 12px;
}

.timeline-notice strong {
  color: var(--ink);
}

.main-panel {
  margin-top: 12px;
  padding: 16px 0 0;
  border-radius: var(--radius);
  overflow: visible;
}

.composition-list {
  display: grid;
  gap: var(--list-gap);
  width: min(980px, 100%);
  margin: 0 auto;
}

.section-item {
  position: relative;
  min-width: 0;
}

.section-chain {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.section-chain::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: calc(100vw - 16px);
  min-height: var(--row-height);
  pointer-events: auto;
  transform: translateX(-50%);
}

.section-chain:hover::before,
.section-chain:focus-within::before {
  pointer-events: auto;
}

.version-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 35;
  display: block;
  min-width: 0;
  width: clamp(80px, calc((100vw - 980px) / 2 - 34px), 620px);
  min-height: var(--row-height);
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.version-strip-left {
  right: 100%;
}

.version-strip-right {
  left: 100%;
  width: min(clamp(80px, calc((100vw - 980px) / 2 - 34px), 620px), 296px);
  transform: translateX(-12px);
}

.section-chain:hover .version-strip,
.section-chain:focus-within .version-strip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.version-inner {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.version-strip-left .version-inner {
  justify-content: flex-start;
}

.version-strip-right .version-inner {
  justify-content: flex-start;
}

.version-inner::-webkit-scrollbar {
  display: none;
}

.history-unit {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.history-unit::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border: 1px solid transparent;
  border-radius: calc(var(--row-radius) + 2px);
  pointer-events: none;
  transition: border-color 220ms ease;
}

.history-unit:hover::before,
.history-unit:focus-within::before {
  border-color: var(--ink);
}

.version-card {
  position: relative;
  z-index: 1;
  flex: 0 0 122px;
  height: 100%;
  min-height: 100%;
  padding: 9px 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--row-radius);
  cursor: pointer;
  color: var(--ink-muted);
  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.version-card:hover,
.version-card[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.version-card strong,
.version-card span,
.version-card small {
  display: block;
}

.version-card strong {
  color: inherit;
  font-size: 13px;
}

.version-card span {
  margin-top: 14px;
  color: inherit;
  font-size: 11px;
}

.version-card small {
  color: inherit;
  font-size: 10px;
  opacity: 0.72;
}

.comment-anchor {
  position: relative;
  flex: 0 0 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  align-self: stretch;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.comment-indicator {
  width: 18px;
  height: 42px;
  padding: 0;
  background: #d6d6d1;
  border: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  cursor: pointer;
  transition:
    background-color 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.comment-indicator.has-comments {
  background: var(--accent);
  cursor: pointer;
}

.comment-indicator:hover,
.comment-indicator.has-comments:hover,
.comment-anchor.is-open .comment-indicator {
  background: var(--ink);
  transform: translateX(3px) scale(1.34);
}

.comment-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 36px));
  padding: 10px;
  background: var(--surface-warm);
  border: 1px solid #e2d980;
  border-radius: 7px;
  box-shadow: 0 14px 36px rgba(31, 31, 27, 0.14);
  animation: panelIn 150ms ease both;
}

.history-unit .comment-popup {
  right: auto;
  left: -8px;
}

.comment-popup article {
  display: grid;
  gap: 5px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 5px;
}

.comment-popup header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.comment-popup strong {
  font-size: 12px;
}

.comment-popup time {
  color: var(--ink-muted);
  font-size: 10px;
}

.comment-popup p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.comment-empty {
  padding: 7px;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.48);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-size: 12px;
}

.comment-compose {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

.comment-compose textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  padding: 7px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
}

.comment-compose button {
  justify-self: start;
  min-height: 28px;
  padding: 5px 8px;
  color: #ffffff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.history-pan {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: 42px;
  padding: 0;
  border: 0;
  cursor: ew-resize;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.version-strip.is-overflowing .history-pan {
  opacity: 1;
  pointer-events: auto;
}

.version-strip-left.is-at-start .history-pan-screen,
.version-strip-left.is-at-end .history-pan-row,
.version-strip-right.is-at-start .history-pan-row,
.version-strip-right.is-at-end .history-pan-screen {
  opacity: 0;
  pointer-events: none;
}

.version-strip-left .history-pan-screen,
.version-strip-right .history-pan-row {
  left: 0;
  background: linear-gradient(90deg, var(--page), rgba(247, 247, 244, 0));
}

.version-strip-left .history-pan-row,
.version-strip-right .history-pan-screen {
  right: 0;
  background: linear-gradient(270deg, var(--page), rgba(247, 247, 244, 0));
}

.section-current {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-width: 0;
}

.section-current::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  display: none;
  border: 1px solid transparent;
  border-radius: calc(var(--row-radius) + 2px);
  pointer-events: none;
  transition: border-color 220ms ease;
}

.section-current > * {
  position: relative;
  z-index: 1;
}

.section-current.is-switching-from-left .section-row {
  animation: versionSwapFromLeft 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-current.is-switching-from-left .comment-anchor {
  animation: indicatorSwapFromLeft 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-current.is-switching-from-right .section-row {
  animation: versionSwapFromRight 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-current.is-switching-from-right .comment-anchor {
  animation: indicatorSwapFromRight 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-current.is-switching + .version-strip-right {
  animation: laterVersionsSlideRight 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 158px;
  gap: 12px;
  align-items: center;
  flex: 1 1 auto;
  width: auto;
  min-height: var(--row-height);
  padding: var(--row-padding);
  text-align: left;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--row-radius);
  cursor: pointer;
  transition:
    border-color 240ms ease,
    background-color 240ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms ease;
}

.section-row:hover,
.section-row[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 8px 22px rgba(31, 31, 27, 0.07);
  transform: translateX(4px);
}

.section-current:hover::before,
.section-current:focus-within::before,
.section-item.is-selected .section-current::before {
  border-color: var(--ink);
}

.section-current:hover .comment-anchor,
.section-current:focus-within .comment-anchor,
.section-item.is-selected .section-current > .comment-anchor {
  transform: translateX(4px);
}

.section-number {
  align-self: stretch;
  display: grid;
  place-items: start center;
  padding-top: 5px;
  border-right: 1px solid var(--line);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.section-copy {
  min-width: 0;
}

.section-copy strong,
.section-copy span {
  display: block;
}

.section-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.section-copy span {
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: 12px;
}

.section-meta {
  align-self: stretch;
  display: grid;
  justify-items: end;
  align-content: space-between;
  min-width: 0;
  color: var(--ink-muted);
  font-size: 11px;
}

.section-meta strong {
  color: var(--ink);
  font-size: 13px;
}

.version-label {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 4px;
  align-items: baseline;
  width: 100%;
  white-space: nowrap;
}

.version-label > span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.version-label > b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.section-meta span {
  white-space: nowrap;
}

.section-expansion {
  width: calc(100% - 18px);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 360ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.section-item.is-selected .section-expansion {
  max-height: 1800px;
  opacity: 1;
  transform: translateY(0);
}

.expansion-inner {
  margin-top: 8px;
  padding: 12px 0 8px 62px;
  border-left: 0;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.mini-card {
  min-width: 0;
  padding: 9px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.mini-card strong,
.mini-card small {
  display: block;
}

.mini-card strong {
  font-size: 12px;
}

.mini-card small {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 11px;
}

.inline-detail {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.86);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(31, 31, 27, 0.06);
  animation: panelIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.inline-detail .detail-tabs {
  margin: 0;
}

.inline-detail .detail-body {
  animation: none;
}

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

.detail-panel {
  padding: 14px;
  border-radius: var(--radius);
}

.detail-head {
  display: grid;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 7px;
  color: var(--ink-muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.detail-tabs {
  display: flex;
  gap: 5px;
  margin: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
  display: none;
}

.detail-tabs button {
  min-height: 30px;
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
}

.detail-tabs button[aria-pressed="true"] {
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
}

.detail-body {
  display: grid;
  gap: 10px;
  animation: panelIn 180ms ease both;
}

.comment-card,
.task-card,
.file-card,
.event-card,
.person-card {
  min-width: 0;
  padding: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.comment-card {
  background: var(--surface-warm);
}

.comment-card header,
.task-card header,
.event-card header,
.person-card header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.comment-card strong,
.task-card strong,
.event-card strong,
.person-card strong {
  font-size: 13px;
}

.comment-card time,
.task-card small,
.event-card time,
.person-card small {
  color: var(--ink-muted);
  font-size: 11px;
}

.comment-card p,
.task-card p,
.event-card p,
.person-card p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.task-card footer {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 10px;
}

.priority-high {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

.priority-normal {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.priority-low {
  opacity: 0.82;
}

.attachment {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
}

.attachment img {
  display: block;
  width: 84px;
  height: 58px;
  object-fit: cover;
  background: #ffffff;
  border: 1px solid var(--line);
}

.attachment span,
.file-card span {
  color: var(--ink-muted);
  font-size: 11px;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.file-card {
  display: grid;
  gap: 6px;
}

.file-card img {
  width: 100%;
  aspect-ratio: 1.414 / 1;
  object-fit: cover;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.feed-page,
.task-outline-page {
  display: grid;
  gap: 10px;
  width: min(860px, calc(100vw - 280px));
  max-width: 100%;
  margin: 0 auto;
}

.activity-feed {
  display: grid;
  gap: 0;
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(31, 31, 27, 0.05);
}

.feed-section {
  display: grid;
  gap: 9px;
  padding: 11px;
}

.feed-section-body {
  display: grid;
  gap: 8px;
}

.comment-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0 -2px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.comment-section-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.comment-section-divider span {
  min-width: 0;
}

.task-outline-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.task-outline-summary article {
  display: grid;
  gap: 3px;
  padding: 11px;
}

.task-outline-summary strong {
  font-size: 24px;
}

.task-outline-summary span {
  color: var(--ink-muted);
  font-size: 12px;
}

.task-outline-intro {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.task-outline-intro p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.task-outline-group {
  display: grid;
  gap: 8px;
  padding: 11px;
}

.task-outline-group header b {
  color: var(--accent);
  font-size: 13px;
}

.task-outline-list {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-outline-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 86px minmax(120px, 0.48fr);
  gap: 8px;
  align-items: start;
  padding: 7px 8px 7px calc(8px + var(--level) * 18px);
  background: var(--surface-soft);
  border-radius: 5px;
}

.outline-marker {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #ffffff;
}

.task-outline-item[data-status="done"] .outline-marker {
  background: var(--ok);
  border-color: var(--ok);
}

.task-outline-item strong,
.task-outline-item small {
  display: block;
}

.task-outline-item strong {
  font-size: 12px;
}

.task-outline-item small,
.task-outline-item span,
.task-outline-item em {
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
}

.task-outline-item em {
  color: var(--accent);
}

.task-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.task-dashboard article,
.task-concept,
.settings-hero,
.settings-card,
.volume-task-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(31, 31, 27, 0.05);
}

.task-dashboard article {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.task-dashboard strong {
  font-size: 26px;
}

.task-dashboard span,
.volume-task-card header span {
  color: var(--ink-muted);
  font-size: 12px;
}

.task-concept {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 13px;
}

.task-concept h3,
.settings-hero h3 {
  margin: 0;
  font-size: 20px;
}

.task-concept p,
.settings-hero p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.task-board {
  margin-bottom: 10px;
}

.volume-task-list {
  display: grid;
  gap: 8px;
}

.volume-task-card {
  display: grid;
  gap: 10px;
  padding: 11px;
}

.volume-task-card header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.volume-task-card header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.volume-task-card header strong {
  font-size: 13px;
}

.volume-task-card header b {
  min-width: 42px;
  color: var(--accent);
  text-align: right;
}

.volume-task-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.volume-task-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.volume-task-item span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.volume-task-item strong {
  font-size: 12px;
}

.volume-task-item small {
  color: var(--ink-muted);
  font-size: 10px;
}

.task-page,
.settings-page {
  display: grid;
  gap: 10px;
  width: min(860px, calc(100vw - 280px));
  max-width: 100%;
  margin: 0 auto;
}

.settings-hero {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  padding: 14px;
}

.settings-avatar {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 3px #ffffff;
}

.settings-hero > div {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-card {
  display: grid;
  gap: 12px;
  padding: 13px;
}

.settings-card header {
  display: grid;
  gap: 3px;
}

.settings-options,
.segmented-options,
.accent-options {
  display: grid;
  gap: 7px;
}

.settings-options button,
.segmented-options button,
.accent-options button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 7px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

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

.segmented-options button {
  display: block;
  text-align: center;
}

.accent-options button span {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.accent-options [data-accent-choice="blue"] span {
  background: #2d5d72;
}

.accent-options [data-accent-choice="green"] span {
  background: #3e7b57;
}

.accent-options [data-accent-choice="graphite"] span {
  background: #3f4244;
}

.settings-options button[aria-pressed="true"],
.segmented-options button[aria-pressed="true"],
.accent-options button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.switch-row {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink-muted);
  font-size: 13px;
}

.board-column {
  min-width: 0;
  padding: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.board-column h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.tiny-button {
  min-height: 30px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 12px;
}

.activity-lane {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.activity-lane time {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.activity-lane p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.empty-state {
  padding: 28px;
  color: var(--ink-muted);
  text-align: center;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}

.team-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  display: none;
  width: min(480px, calc(100% - 24px));
  height: 100vh;
  padding: 18px;
  overflow: auto;
  transform: translateX(104%);
  visibility: hidden;
  transition:
    transform 200ms ease,
    visibility 200ms ease;
}

.team-drawer.is-open {
  display: block;
  transform: translateX(0);
  visibility: visible;
}

.team-drawer header {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.team-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.person-card {
  display: grid;
  gap: 6px;
}

.person-card p {
  margin: 0;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(22, 22, 18, 0.24);
  backdrop-filter: blur(2px);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  max-width: min(420px, calc(100% - 36px));
  padding: 10px 12px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 7px;
  box-shadow: var(--shadow);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.participant-name {
  position: relative;
  border-bottom: 1px dotted rgba(34, 34, 34, 0.28);
  cursor: help;
}

.participant-name::after {
  content: attr(data-person-name) "\A" attr(data-person-role) "\A" attr(data-person-phone) "\A" attr(data-person-email);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 130;
  width: 260px;
  padding: 10px;
  color: var(--ink);
  white-space: pre-line;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(31, 31, 27, 0.16);
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition:
    opacity 180ms ease 2s,
    transform 180ms ease 2s;
}

.participant-name:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.person-tooltip {
  position: fixed;
  z-index: 120;
  display: grid;
  gap: 4px;
  width: 260px;
  padding: 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(31, 31, 27, 0.16);
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.person-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.person-tooltip strong {
  font-size: 13px;
}

.person-tooltip span {
  color: var(--ink-muted);
  font-size: 12px;
}

.is-focus-mode .project-home,
.is-focus-mode .detail-panel {
  display: none;
}

.is-focus-mode .app-shell {
  width: min(1180px, 100%);
}

.is-focus-mode .composition-list {
  width: min(980px, 100%);
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes folderMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes versionSwapFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-140px) scale(0.985);
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes versionSwapFromRight {
  0% {
    opacity: 0;
    transform: translateX(140px) scale(0.985);
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes indicatorSwapFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-140px);
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes indicatorSwapFromRight {
  0% {
    opacity: 0;
    transform: translateX(140px);
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes laterVersionsSlideRight {
  0% {
    opacity: 0;
    transform: translateX(-32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1600px) {
  .detail-panel {
    display: none;
  }
}

@media (max-width: 1320px) {
  .project-home {
    width: 180px;
  }
}

@media (max-width: 1180px) {
  .app-shell {
    width: min(980px, 100%);
  }

  .task-page,
  .task-outline-page,
  .feed-page,
  .settings-page {
    width: 100%;
  }

  .work-area {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }

  .project-home {
    position: static;
    width: auto;
    max-height: none;
  }

  .project-card {
    display: none;
  }

  .tool-list {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    overflow-x: auto;
  }

  .appearance-panel {
    position: static;
    width: auto;
    margin-top: 10px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: none;
  }

  .appearance-panel.is-open {
    display: grid;
  }
}

@media (max-width: 980px) {
  .context-chain {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  .login-screen {
    width: 100%;
    padding: 40px 16px 56px;
  }

  .login-wrap {
    justify-items: center;
    width: min(720px, calc(100vw - 32px));
  }

  .login-logo {
    width: 100%;
  }

  .login-card {
    width: min(451px, 100%);
    margin: -6px 0 0;
  }

  .app-bar {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .quick-actions {
    grid-column: 1 / -1;
    justify-content: start;
    overflow-x: auto;
  }

  .app-shell {
    grid-template-columns: 1fr;
    padding: 12px 12px 52px;
  }

  .project-home {
    grid-column: 1;
    position: static;
    max-height: none;
  }

  .project-card {
    display: none;
  }

  .tool-list {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    overflow-x: auto;
  }

  .checkin-box {
    display: none;
  }

  .work-toolbar {
    grid-template-columns: 1fr;
  }

  .version-strip {
    position: static;
    grid-column: auto;
    width: 100%;
    height: auto;
    margin: 0 0 8px;
    overflow-x: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .version-inner {
    justify-content: flex-start;
    padding: 0 18px 0 0;
  }

  .section-chain {
    grid-template-columns: 1fr;
  }

  .section-expansion {
    margin-left: 0;
    width: calc(100% - 14px);
  }

  .inline-detail .file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-pan {
    display: none;
  }
}

@media (max-width: 680px) {
  .context-chain,
  .quick-actions {
    flex-wrap: wrap;
    overflow: visible;
  }

  .tool-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .project-history-line {
    flex-wrap: wrap;
    overflow: visible;
  }

  .login-screen {
    align-items: start;
    padding-top: 56px;
  }

  .login-wrap {
    width: min(420px, calc(100vw - 28px));
  }

  .login-card {
    padding: 20px 16px 28px;
    border-radius: 16px;
  }

  .login-card h2 {
    font-size: 20px;
  }

  .login-card p {
    font-size: 14px;
  }

  .login-card label,
  .login-register {
    font-size: 13px;
  }

  .context-chain button,
  .primary-action {
    font-size: 12px;
  }

  .main-panel {
    padding: 12px;
  }

  .composition-list {
    width: 100%;
  }

  .version-strip,
  .version-inner {
    max-width: 100%;
  }

  .section-row {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 76px;
    gap: 9px;
    padding-right: 9px;
  }

  .comment-anchor {
    flex-basis: 14px;
  }

  .comment-indicator {
    width: 14px;
  }

  .section-meta {
    grid-column: 2;
    display: flex;
    gap: 8px;
    justify-content: space-between;
  }

  .section-row:hover,
  .section-row[aria-pressed="true"] {
    transform: none;
  }

  .section-current:hover .comment-anchor,
  .section-current:focus-within .comment-anchor,
  .section-item.is-selected .section-current > .comment-anchor {
    transform: none;
  }

  .expansion-inner {
    padding-left: 22px;
  }

  .mini-grid,
  .board,
  .file-grid,
  .task-dashboard,
  .task-outline-summary,
  .settings-grid,
  .volume-task-items {
    grid-template-columns: 1fr;
  }

  .task-outline-item {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .task-outline-item em,
  .task-outline-item > span:last-child {
    grid-column: 2;
  }

  .inline-detail .file-grid {
    grid-template-columns: 1fr;
  }

  .activity-lane {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .attachment {
    grid-template-columns: 1fr;
  }

  .attachment img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.414 / 1;
  }
}

/* Current interaction iteration */
.app-bar {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 64px;
}

.brand {
  width: 57px;
  height: 57px;
}

.brand .caesar-avatar {
  width: 57px;
  height: 57px;
}

.quick-actions {
  justify-content: end;
}

.account-button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 4px 8px 4px 5px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.account-button:hover {
  border-color: var(--ink);
}

.account-button .account-avatar {
  width: 31px;
  height: 31px;
}

.account-name {
  max-width: 110px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-toolbar {
  position: relative;
  align-items: start;
  overflow: visible;
}

.project-toolbar-actions {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    max-height 620ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 360ms ease,
    padding-top 480ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-toolbar:hover .project-toolbar-actions,
.work-toolbar:focus-within .project-toolbar-actions {
  max-height: 86px;
  padding-top: 9px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.project-toolbar-stats {
  flex: 0 0 auto;
  grid-template-columns: repeat(3, 72px);
  gap: 5px;
  margin: 0 8px 0 0;
}

.project-toolbar-stats div {
  padding: 5px 7px;
}

.project-toolbar-stats dd {
  font-size: 14px;
}

.search-field input {
  border: 1px solid var(--line);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.search-field:focus-within input,
.is-searching .search-field input {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.history-unit::before,
.history-unit:hover::before,
.history-unit:focus-within::before {
  display: none;
  border-color: transparent;
}

.version-card:hover,
.version-card[aria-pressed="true"] {
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}

.project-history-card:hover,
.project-history-card.is-active {
  border-color: transparent;
  box-shadow: none;
}

.version-strip {
  transition:
    opacity 480ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.section-current.is-switching-from-left .section-row {
  animation-duration: 920ms;
}

.section-current.is-switching-from-left .comment-anchor {
  animation-duration: 920ms;
}

.section-current.is-switching-from-right .section-row {
  animation-duration: 920ms;
}

.section-current.is-switching-from-right .comment-anchor {
  animation-duration: 920ms;
}

.section-current.is-switching + .version-strip-right {
  animation-duration: 920ms;
}

.section-row {
  transition:
    border-color 280ms ease,
    background-color 280ms ease,
    transform 440ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms ease;
}

.section-expansion {
  transition:
    max-height 860ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inline-detail {
  animation-duration: 520ms;
}

.composition-editor-panel.is-open {
  max-height: none;
  overflow: visible;
}

.composition-editor-inner {
  max-height: none;
  overflow: visible;
}

.numbering-toggle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  color: var(--ink-muted);
  font-size: 12px;
  cursor: pointer;
}

.numbering-toggle input {
  width: 15px;
  height: 15px;
}

.composition-outline-row {
  grid-template-columns: 16px 76px minmax(0, 1fr);
}

.composition-outline.is-numbering-hidden .composition-outline-row {
  grid-template-columns: 16px minmax(0, 1fr);
}

.composition-outline.is-numbering-hidden .composition-number-input {
  display: none;
}

.is-editing-composition .main-panel {
  display: none;
}

.timeline-mode-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.timeline-stage {
  position: relative;
  min-height: calc(var(--timeline-field-height) + 118px);
  padding: 0 0 108px 76px;
}

.timeline-gate {
  position: absolute;
  top: 0;
  bottom: 108px;
  left: 54px;
  z-index: 3;
  width: 2px;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
}

.timeline-rows {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 68px;
  gap: 9px;
  align-items: center;
  min-height: calc(var(--timeline-row-step) - 4px);
  padding: 5px 10px;
  color: var(--ink-muted);
  text-align: left;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transform: translateX(30px);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-row:hover {
  color: var(--ink);
  background: #ffffff;
  transform: translateX(36px);
}

.timeline-row span,
.timeline-row em {
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.timeline-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-version-field {
  position: absolute;
  top: 0;
  right: 0;
  left: 76px;
  z-index: 6;
  height: var(--timeline-field-height);
  overflow: hidden;
  pointer-events: auto;
}

.timeline-version-chip {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 4;
  min-width: 38px;
  max-width: 58px;
  height: 24px;
  padding: 3px 6px;
  overflow: hidden;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-version-chip:hover,
.timeline-version-chip.is-current,
.timeline-version-chip.is-snapshot {
  color: var(--ink);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.timeline-ruler {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  bottom: 0;
  z-index: 8;
  height: 96px;
  margin: 12px 0 0 -76px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  border-top: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}

.timeline-tick {
  position: absolute;
  top: 0;
  left: calc(76px + var(--x));
  display: grid;
  grid-template-rows: 44px 1fr;
  min-width: 1px;
  height: 100%;
  color: var(--ink-faint);
  font-size: 10px;
  pointer-events: none;
}

.timeline-tick i {
  width: 1px;
  height: 44px;
  background: var(--line-strong);
}

.timeline-tick b {
  margin-top: 7px;
  transform: translateX(-50%);
  font-weight: 400;
  white-space: nowrap;
}

.timeline-tick.is-year i {
  width: 2px;
  background: var(--accent);
}

.timeline-tick.is-year b {
  color: var(--ink-muted);
  font-weight: 700;
}

.timeline-cursor,
.timeline-hover-band {
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.timeline-cursor {
  top: 0;
  bottom: 0;
  left: var(--cursor-x);
  width: 1px;
  background: rgba(20, 20, 20, 0.48);
}

.timeline-hover-band {
  top: var(--band-top);
  left: var(--band-left);
  width: var(--band-width);
  height: var(--band-height);
  background: rgba(245, 202, 196, 0.35);
}

.timeline-mode-shell.has-cursor .timeline-cursor,
.timeline-mode-shell.has-cursor .timeline-hover-band {
  opacity: 1;
}

@media (max-width: 1180px) {
  .tool-list {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
  }
}

@media (max-width: 980px) {
  .app-bar {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .quick-actions {
    grid-column: 2;
    justify-content: end;
  }

  .tool-list {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
  }

  .timeline-stage {
    padding-left: 54px;
  }

  .timeline-gate {
    left: 32px;
  }

  .timeline-version-field {
    left: 54px;
  }

  .timeline-ruler {
    margin-left: -54px;
  }

  .timeline-tick {
    left: calc(54px + var(--x));
  }
}

@media (max-width: 680px) {
  .account-name {
    display: none;
  }

  .project-toolbar-actions {
    flex-wrap: wrap;
  }

  .project-toolbar-stats {
    grid-template-columns: repeat(3, minmax(56px, 1fr));
    width: 100%;
    margin-right: 0;
  }

  .timeline-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .timeline-row em {
    display: none;
  }
}

/* Current iteration: avatars, tooltips, monochrome markers, right-side controls, timeline layout */
.user-avatar {
  display: block;
  flex: 0 0 auto;
  background-image: url("assets/user-avatar.jpg");
  background-repeat: no-repeat;
  background-position: center 34%;
  background-size: cover;
}

.participant-name::after,
.participant-name:hover::after {
  display: none;
  content: none;
}

.project-toolbar-actions {
  justify-content: flex-end;
}

.project-toolbar-stats {
  margin-right: 0;
  margin-left: auto;
}

.project-toolbar-actions button[aria-pressed="true"],
.project-toolbar-actions [data-action="toggle-history"][aria-pressed="true"] {
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
}

.version-card:hover,
.version-card[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}

.comment-indicator {
  background: #d5d5d0;
}

.comment-indicator.has-comments {
  background: #202020;
}

.comment-indicator:hover,
.comment-indicator.has-comments:hover,
.comment-anchor.is-open .comment-indicator {
  background: #111111;
}

.timeline-mode-shell {
  width: min(100vw, calc(50vw + 490px));
  max-width: none;
  margin-right: 0;
  margin-left: calc(50% - 50vw);
}

.timeline-stage {
  min-height: calc(var(--timeline-field-height) + 118px);
  padding: 0 430px 108px 0;
}

.timeline-gate {
  right: 430px;
  left: auto;
}

.timeline-rows {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 7;
  width: 410px;
}

.timeline-row {
  height: calc(var(--timeline-row-step) - 4px);
  min-height: calc(var(--timeline-row-step) - 4px);
  transform: none;
}

.timeline-row:hover {
  transform: none;
}

.timeline-version-field {
  right: 430px;
  left: 0;
}

.timeline-ruler {
  right: 430px;
  margin-right: 430px;
  margin-left: 0;
}

.timeline-tick {
  left: var(--x);
}

.timeline-tick-week i {
  height: 54px;
}

.timeline-tick-day i {
  height: 66px;
  background: color-mix(in srgb, var(--line-strong) 70%, transparent);
}

.timeline-tick-day b {
  font-size: 9px;
}

.timeline-ruler {
  position: fixed;
  right: max(0px, calc(50vw - 60px));
  bottom: 0;
  left: 0;
  width: auto;
  margin: 0;
}

.is-timeline-view .main-panel {
  padding-bottom: 116px;
}

@media (max-width: 980px) {
  .timeline-mode-shell {
    width: 100%;
    margin-left: 0;
  }

  .timeline-stage {
    padding-right: 0;
    padding-left: 0;
  }

  .timeline-gate {
    right: auto;
    left: 0;
  }

  .timeline-rows {
    position: relative;
    width: 100%;
    margin-top: calc(var(--timeline-field-height) + 10px);
  }

  .timeline-version-field {
    right: 0;
    left: 0;
  }

  .timeline-ruler {
    right: 0;
    margin: 0;
  }

  .timeline-tick {
    left: var(--x);
  }
}

/* Current iteration: top identity, participants, and timeline alignment */
.app-bar {
  grid-template-columns: 58px 184px minmax(0, 1fr) auto;
}

.app-wordmark {
  order: 2;
  display: block;
  width: 184px;
  height: 46px;
  background-image: url("assets/documentator-wordmark.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: grayscale(1);
}

.caesar-brand {
  order: 1;
}

.context-chain {
  order: 3;
}

.quick-actions {
  order: 4;
}

.caesar-avatar {
  background-image: url("assets/documentator-caesar-logo.png");
  background-position: center;
  background-size: cover;
  transition:
    background-image 120ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms ease;
}

.caesar-brand:hover .caesar-avatar,
.caesar-brand.is-logo-hover .caesar-avatar,
.caesar-brand:focus-visible .caesar-avatar {
  background-image: url("assets/documentator-caesar-logo-hover.png");
  transform: scale(1.05);
  filter: grayscale(1) contrast(1.08);
}

.context-chain {
  padding-left: 4px;
}

.tool-list {
  grid-template-columns: 1fr;
}

.timeline-mode-shell {
  --timeline-side-width: 344px;
  --timeline-list-width: 330px;
  --project-panel-right: calc(50vw + 490px);
  width: calc(var(--project-panel-right) + var(--timeline-side-width));
  margin-left: calc(50% - 50vw);
  margin-right: 0;
}

.timeline-stage {
  padding-right: var(--timeline-side-width);
  padding-left: 0;
  padding-bottom: 148px;
}

.timeline-gate {
  right: auto;
  left: var(--project-panel-right);
  width: 4px;
  background: #cfcfca;
}

.timeline-version-field {
  width: var(--project-panel-right);
  right: auto;
  left: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #1f1f1f;
  box-shadow: 0 18px 38px rgba(31, 31, 27, 0.06);
}

.timeline-rows {
  right: auto;
  left: calc(var(--project-panel-right) + 18px);
  width: var(--timeline-list-width);
}

.timeline-ruler {
  right: max(0px, calc(50vw - 498px));
  margin-right: 0;
  height: 132px;
  background: #fbfcfc;
  border-top: 4px solid #31383d;
  box-shadow: 0 -12px 30px rgba(31, 31, 27, 0.06);
}

.timeline-ruler-band,
.timeline-fill-layer,
.timeline-tick-layer {
  position: absolute;
  inset: 0;
}

.timeline-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: var(--w);
  pointer-events: none;
}

.timeline-fill-season {
  background: linear-gradient(180deg, rgba(64, 114, 128, 0.09), rgba(64, 114, 128, 0.02));
}

.timeline-fill-weekend {
  background: rgba(224, 113, 113, 0.16);
}

.timeline-fill-weekend.is-soft {
  background: rgba(224, 113, 113, 0.08);
}

.timeline-tick {
  position: absolute;
  top: 0;
  left: var(--x);
  display: block;
  min-width: 1px;
  height: 100%;
  color: #39454d;
  pointer-events: none;
  transform: translateX(-50%);
}

.timeline-tick i {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tick-w);
  height: var(--tick-h);
  background: #69747b;
}

.timeline-tick b {
  position: absolute;
  top: var(--label-top);
  left: 0;
  max-width: 220px;
  overflow: hidden;
  color: #39454d;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}

.timeline-tick-year {
  z-index: 7;
}

.timeline-tick-year i,
.timeline-tick.is-year i {
  background: #2f363b;
}

.timeline-tick-month {
  z-index: 6;
}

.timeline-tick-month i {
  background: #65717a;
}

.timeline-tick-week {
  z-index: 5;
}

.timeline-tick-week i {
  background: #a5adb3;
}

.timeline-tick-day {
  z-index: 4;
}

.timeline-tick-day i {
  background: #cbd1d5;
}

.timeline-tick-hour {
  z-index: 3;
}

.timeline-tick-hour i {
  background: #c7d0d6;
}

.timeline-tick-day b,
.timeline-tick-hour b {
  color: #66737b;
  font-size: 9px;
}

.timeline-version-chip {
  cursor: grab;
}

.timeline-version-chip:active,
body.is-timeline-panning .timeline-version-chip {
  cursor: grabbing;
}

.timeline-comment-mark {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 6;
  width: 15px;
  height: var(--mark-height);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.62;
  transform: translateX(-7px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.timeline-comment-mark::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 4px;
  background: rgba(32, 32, 32, 0.28);
  border-radius: 999px;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.timeline-comment-mark:hover {
  opacity: 1;
  transform: translateX(-7px);
}

.timeline-comment-mark:hover::after {
  background: #202020;
  transform: scaleX(1.55);
}

.timeline-comment-popup {
  position: fixed;
  z-index: 90;
  display: grid;
  gap: 5px;
  width: min(310px, calc(100vw - 24px));
  padding: 11px 13px;
  color: var(--ink);
  background: var(--surface-warm);
  border: 1px solid #e3d776;
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(31, 31, 27, 0.16);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 130ms ease,
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-comment-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-comment-popup strong {
  font-size: 12px;
}

.timeline-comment-popup span {
  color: var(--ink-muted);
  font-size: 10px;
}

.timeline-comment-popup p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .tool-list {
    grid-template-columns: repeat(8, minmax(120px, 1fr));
  }
}

@media (max-width: 980px) {
  .app-bar {
    grid-template-columns: 58px 150px minmax(0, 1fr) auto;
  }

  .app-wordmark {
    width: 150px;
    height: 40px;
    background-size: contain;
  }

  .quick-actions {
    grid-column: 4;
  }

  .timeline-mode-shell {
    --timeline-side-width: 0px;
    --timeline-list-width: 100%;
    --project-panel-right: 100%;
    width: 100%;
    margin-left: 0;
  }

  .timeline-gate {
    right: auto;
    left: 0;
  }

  .timeline-ruler {
    right: 0;
  }
}

@media (max-width: 680px) {
  .app-bar {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .app-wordmark {
    display: none;
  }

  .quick-actions {
    grid-column: 2;
  }
}

/* Current iteration: timeline zoom, pan, and date-active revisions */
.timeline-gate {
  display: none;
}

.timeline-stage {
  min-height: calc(var(--timeline-field-height) + 132px);
  padding-bottom: 132px;
}

.timeline-version-field {
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  box-shadow: 0 18px 40px rgba(31, 31, 27, 0.045);
  cursor: grab;
}

body.is-timeline-panning .timeline-version-field {
  cursor: grabbing;
}

.timeline-hover-band {
  display: none;
}

.timeline-ruler {
  right: auto;
  left: calc(50% - 50vw);
  width: var(--project-panel-right);
  border-top: 4px solid #111111;
  box-shadow: 0 -8px 24px rgba(31, 31, 27, 0.045);
}

.timeline-cursor {
  z-index: 7;
  background: rgba(20, 20, 20, 0.56);
}

.timeline-cursor-date {
  position: fixed;
  bottom: 142px;
  z-index: 42;
  padding: 4px 7px;
  color: #1f1f1f;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d7ddde;
  border-radius: 5px;
  box-shadow: 0 8px 22px rgba(31, 31, 27, 0.12);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 120ms ease;
}

.timeline-mode-shell.has-cursor .timeline-cursor,
.timeline-mode-shell.has-cursor .timeline-cursor-date {
  opacity: 1;
}

.timeline-mode-shell.has-cursor .timeline-version-chip {
  color: #b8bbb8;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 31, 31, 0.08);
  opacity: 0.54;
}

.timeline-mode-shell.has-cursor .timeline-version-chip.is-date-active {
  color: #111111;
  background: #ffffff;
  border-color: #111111;
  opacity: 1;
}

.timeline-mode-shell.has-cursor .timeline-version-chip.is-date-hovered {
  color: #000000;
  font-weight: 900;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(31, 31, 27, 0.14);
}

.timeline-mode-shell.has-cursor .timeline-version-chip.is-version-hovered {
  border-color: #000000;
  box-shadow: 0 0 0 1px #000000, 0 8px 18px rgba(31, 31, 27, 0.14);
}

.timeline-mode-shell.has-cursor .timeline-row {
  color: #babdb9;
  background: #ffffff;
  opacity: 1;
}

.timeline-mode-shell.has-cursor .timeline-row:not(.is-date-hovered) strong,
.timeline-mode-shell.has-cursor .timeline-row:not(.is-date-hovered) em,
.timeline-mode-shell.has-cursor .timeline-row:not(.is-date-hovered) span {
  color: #aeb4b0;
}

.timeline-mode-shell.has-cursor .timeline-row.is-date-hovered {
  color: #111111;
  background: rgba(255, 255, 255, 0.98);
  opacity: 1;
}

.timeline-mode-shell.has-cursor .timeline-row.is-date-hovered strong,
.timeline-mode-shell.has-cursor .timeline-row.is-date-hovered em,
.timeline-mode-shell.has-cursor .timeline-row.is-date-hovered span {
  font-weight: 800;
}

.timeline-tick-minute {
  z-index: 2;
}

.timeline-tick-minute i {
  background: #d7dde1;
}

.timeline-tick-minute b {
  color: #89939a;
  font-size: 8px;
}

/* Current iteration: timeline focus bands and view transitions */
.timeline-active-span,
.timeline-field-row {
  position: absolute;
  top: var(--row-y);
  height: var(--row-h);
  border-radius: 4px;
  pointer-events: none;
}

.timeline-active-span {
  left: var(--span-left, 0);
  z-index: 1;
  width: var(--span-width, 0);
  background: rgba(17, 17, 17, 0.08);
  opacity: 0;
  transition:
    opacity 120ms ease,
    background-color 120ms ease;
}

.timeline-active-span.is-visible {
  opacity: 1;
}

.timeline-active-span.is-focused {
  background: rgba(17, 17, 17, 0.16);
}

.timeline-field-row {
  right: 0;
  left: 0;
  z-index: 2;
  border: 1px solid transparent;
  opacity: 0;
  transition:
    opacity 130ms ease,
    border-color 130ms ease;
}

.timeline-field-row.is-focused {
  border-color: rgba(17, 17, 17, 0.52);
  opacity: 1;
}

.timeline-version-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  min-width: 70px;
  max-width: 88px;
  height: calc(var(--timeline-row-step) - 4px);
  padding: 3px 8px;
}

.timeline-comment-mark {
  z-index: 7;
  width: 18px;
}

.timeline-comment-mark::after {
  left: 7px;
  width: 5px;
}

.timeline-mode-shell.is-entering-from-project .timeline-version-field {
  animation: timelineFieldIn 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.timeline-mode-shell.is-entering-from-project .timeline-row {
  animation: timelineRowsIn 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.timeline-mode-shell.is-entering-from-project .timeline-version-chip {
  animation: timelineChipIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.composition-list.is-returning-from-timeline .section-item {
  animation: compositionReturnIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.composition-list.is-returning-from-timeline .section-item.is-transition-target .section-row {
  animation: compositionTargetReturn 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes timelineFieldIn {
  from {
    opacity: 0.45;
    transform: translateX(18px) scaleX(0.97);
    transform-origin: right center;
  }
  to {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes timelineRowsIn {
  from {
    opacity: 0;
    transform: translateX(-24px) scale(1.03);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes timelineChipIn {
  from {
    opacity: 0;
    transform: translateX(42px) scaleX(1.5);
  }
  to {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes compositionReturnIn {
  from {
    opacity: 0.55;
    transform: translateX(-20px) scaleX(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes compositionTargetReturn {
  0% {
    outline: 1px solid rgba(17, 17, 17, 0);
    transform: translateX(-54px) scaleX(0.9);
  }
  42% {
    outline: 1px solid rgba(17, 17, 17, 0.9);
    transform: translateX(0) scaleX(1);
  }
  100% {
    outline: 1px solid rgba(17, 17, 17, 0);
    transform: translateX(0) scaleX(1);
  }
}

/* Current iteration: Beget landing shell, documentator folders, and team view */
body.is-authenticated:not(.is-project-open) .app-shell {
  display: none;
}

body.is-authenticated:not(.is-project-open) {
  min-height: 100vh;
}

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

.documentator-hub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
}

.documentator-hub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: min(980px, calc(100vw - 20px));
  height: 22px;
}

.documentator-hub .app-wordmark,
.documentator-hub .caesar-brand,
.documentator-hub .context-chain {
  order: initial;
}

.documentator-hub .context-chain {
  position: absolute;
  top: 50%;
  left: 252px;
  z-index: 62;
  max-width: min(1020px, calc(100vw - 310px));
  opacity: 0;
  pointer-events: none;
  transform: translate(-18px, -50%);
  transition:
    opacity 180ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.documentator-hub.is-folder-menu-open .context-chain,
.documentator-hub:focus-within .context-chain {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

.documentator-hub .app-wordmark {
  flex: 0 0 184px;
  cursor: pointer;
}

.documentator-hub .caesar-brand {
  flex: 0 0 auto;
}

.project-folder:hover .folder-menu,
.project-folder:focus-within .folder-menu {
  display: grid;
}

.project-toolbar-actions {
  justify-content: flex-start;
}

.project-toolbar-stats {
  grid-template-columns: repeat(4, 72px);
  margin: 0;
}

.team-page {
  display: grid;
  gap: 12px;
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 32px rgba(31, 31, 27, 0.045);
}

.team-page header {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.team-page h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.team-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.team-page .person-card {
  background: #ffffff;
}

@media (max-width: 1180px) {
  .documentator-hub .context-chain {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(760px, calc(100vw - 24px));
    max-width: none;
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    transform: translateY(-8px);
  }

  .documentator-hub.is-folder-menu-open .context-chain,
  .documentator-hub:focus-within .context-chain {
    transform: translateY(0);
  }

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

@media (max-width: 680px) {
  .app-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .documentator-hub .app-wordmark {
    flex-basis: 150px;
  }

  .team-page-grid {
    grid-template-columns: 1fr;
  }
}

/* Current iteration: version carousel and timeline list morph */
.version-strip {
  will-change: opacity, transform;
}

.version-strip-left {
  transform: translateX(100%) scaleX(0.96);
  transform-origin: right center;
}

.version-strip-right {
  transform: translateX(-100%) scaleX(0.96);
  transform-origin: left center;
}

.section-chain:hover .version-strip,
.section-chain:focus-within .version-strip {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

.version-strip.is-overflowing .version-inner {
  mask-image: linear-gradient(90deg, transparent 0, #000 58px, #000 calc(100% - 58px), transparent 100%);
}

.history-pan {
  width: 58px;
}

.version-strip-left .history-pan-screen,
.version-strip-right .history-pan-row {
  background: linear-gradient(90deg, var(--page) 8%, rgba(247, 247, 244, 0.9) 30%, rgba(247, 247, 244, 0));
}

.version-strip-left .history-pan-row,
.version-strip-right .history-pan-screen {
  background: linear-gradient(270deg, var(--page) 8%, rgba(247, 247, 244, 0.9) 30%, rgba(247, 247, 244, 0));
}

.section-chain.is-carousel-switching .version-strip {
  opacity: 1;
  pointer-events: none;
}

.section-chain.is-carousel-switching .version-strip-left {
  animation: carouselPastEject 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-chain.is-carousel-switching .version-strip-right {
  animation: carouselFutureEject 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-current.is-switching-from-left .section-row,
.section-current.is-switching-from-right .section-row {
  animation-duration: 820ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.section-current.is-switching-from-left .section-row {
  transform-origin: left center;
}

.section-current.is-switching-from-right .section-row {
  transform-origin: right center;
}

.section-current.is-switching-from-left .comment-anchor,
.section-current.is-switching-from-right .comment-anchor {
  animation-duration: 820ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.section-item.is-closing {
  pointer-events: none;
}

.section-item.is-closing .section-expansion {
  animation: expansionCloseOut 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.section-item.is-reopening .section-expansion {
  animation: expansionVersionReopen 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.comment-popup {
  max-height: min(420px, calc(100vh - 160px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.history-unit .comment-popup {
  top: calc(100% + 6px);
  left: -10px;
}

.version-strip-right .history-unit .comment-popup {
  right: -10px;
  left: auto;
}

.timeline-mode-shell.is-entering-from-project .timeline-rows {
  animation: timelineRowsPanelMorph 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: right top;
}

.timeline-mode-shell.is-entering-from-project .timeline-row {
  animation: timelineRowMorphFromProject 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(min(var(--row-index), 14) * 14ms);
  transform-origin: left center;
}

@keyframes versionSwapFromLeft {
  0% {
    opacity: 0.72;
    transform: translateX(-154px) scaleX(0.18);
  }
  52% {
    opacity: 1;
    transform: translateX(-18px) scaleX(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes versionSwapFromRight {
  0% {
    opacity: 0.72;
    transform: translateX(154px) scaleX(0.18);
  }
  52% {
    opacity: 1;
    transform: translateX(18px) scaleX(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes indicatorSwapFromLeft {
  0% {
    opacity: 0.2;
    transform: translateX(-154px) scale(0.86);
  }
  62% {
    opacity: 1;
    transform: translateX(-8px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes indicatorSwapFromRight {
  0% {
    opacity: 0.2;
    transform: translateX(154px) scale(0.86);
  }
  62% {
    opacity: 1;
    transform: translateX(8px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes carouselPastEject {
  0% {
    opacity: 0.2;
    transform: translateX(100%) scaleX(0.94);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes carouselFutureEject {
  0% {
    opacity: 0.2;
    transform: translateX(-100%) scaleX(0.94);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes laterVersionsSlideRight {
  0% {
    opacity: 0.2;
    transform: translateX(-120px) scaleX(0.82);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes expansionCloseOut {
  0% {
    max-height: 1800px;
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes expansionVersionReopen {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
  }
  46% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    max-height: 1800px;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes timelineRowsPanelMorph {
  0% {
    opacity: 0.72;
    transform: translateX(-520px) scaleX(2.6);
  }
  58% {
    opacity: 1;
    transform: translateX(18px) scaleX(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes timelineRowMorphFromProject {
  0% {
    opacity: 0.5;
    transform: translateX(-520px) scaleX(2.6);
  }
  58% {
    opacity: 1;
    transform: translateX(42px) scaleX(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(30px) scaleX(1);
  }
}

/* Current iteration: hidden default volumes, floating comments, reverse timeline morph */
.version-strip {
  z-index: 20;
}

.section-chain::before {
  z-index: 0;
}

.section-current {
  z-index: 70;
  isolation: isolate;
}

.section-current > .comment-anchor {
  z-index: 74;
}

.floating-comment-popup {
  position: fixed;
  z-index: 260;
  right: auto;
  left: 0;
  top: 0;
  max-height: min(460px, calc(100vh - 28px));
  overflow-y: auto;
}

.composition-list.is-returning-from-timeline {
  animation: projectListFromTimeline 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.composition-list.is-returning-from-timeline .section-item {
  animation: projectItemFromTimeline 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(min(var(--return-index, 0), 14) * 14ms);
  transform-origin: right center;
}

.composition-list.is-returning-from-timeline .section-row {
  animation: projectRowFromTimeline 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: right center;
}

.composition-list.is-returning-from-timeline .section-item.is-transition-target .section-row {
  animation: projectTargetFromTimeline 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes projectListFromTimeline {
  0% {
    opacity: 0.92;
  }
  100% {
    opacity: 1;
  }
}

@keyframes projectItemFromTimeline {
  0% {
    opacity: 0.48;
    transform: translateX(372px) scaleX(0.52);
  }
  58% {
    opacity: 1;
    transform: translateX(-18px) scaleX(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes projectRowFromTimeline {
  0% {
    opacity: 0.54;
    transform: translateX(372px) scaleX(0.52);
  }
  58% {
    opacity: 1;
    transform: translateX(-12px) scaleX(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes projectTargetFromTimeline {
  0% {
    opacity: 0.5;
    outline: 1px solid rgba(17, 17, 17, 0);
    transform: translateX(372px) scaleX(0.52);
  }
  52% {
    opacity: 1;
    outline: 1px solid rgba(17, 17, 17, 0.95);
    transform: translateX(-8px) scaleX(1.04);
  }
  100% {
    opacity: 1;
    outline: 1px solid rgba(17, 17, 17, 0);
    transform: translateX(0) scaleX(1);
  }
}

/* Current iteration: account page, participants, extra themes, randomized Caesar */
body[data-theme="blueprint"] {
  --page: #e8f0f6;
  --surface: #f9fcff;
  --surface-soft: #edf6ff;
  --surface-warm: #fff6c7;
  --ink: #10283a;
  --ink-muted: #547083;
  --ink-faint: #8ba4b4;
  --line: #bfd0dc;
  --line-strong: #6f8fa2;
  --accent: #126b9a;
  --accent-soft: #d8edf7;
  background-color: var(--page);
  background-image:
    linear-gradient(rgba(18, 107, 154, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 107, 154, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}

body[data-theme="graphite"] {
  color-scheme: dark;
  --page: #161819;
  --surface: #242728;
  --surface-soft: #1f2223;
  --surface-warm: #3d3925;
  --ink: #f1f0ea;
  --ink-muted: #bbb9ae;
  --ink-faint: #7f827c;
  --line: #3a3e3f;
  --line-strong: #666b6d;
  --accent: #c9d4d8;
  --accent-soft: #343b3e;
  background-color: var(--page);
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 38%);
  background-size: 18px 18px, 100% 100%;
}

body[data-theme="terminal"] {
  color-scheme: dark;
  --page: #07110d;
  --surface: #0d1d16;
  --surface-soft: #10251b;
  --surface-warm: #1c2b15;
  --ink: #d9ffe9;
  --ink-muted: #91c9a8;
  --ink-faint: #59876a;
  --line: #1d4730;
  --line-strong: #3b8057;
  --accent: #50ff93;
  --accent-soft: #102f1f;
  background-color: var(--page);
  background-image:
    linear-gradient(rgba(80, 255, 147, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 255, 147, 0.04) 1px, transparent 1px);
  background-size: 100% 9px, 26px 100%;
}

body[data-theme="clay"] {
  --page: #efe6df;
  --surface: #fff9f3;
  --surface-soft: #f8eee7;
  --surface-warm: #ffedb4;
  --ink: #34221d;
  --ink-muted: #765c51;
  --ink-faint: #aa9287;
  --line: #dec8bc;
  --line-strong: #a47767;
  --accent: #9b3f2c;
  --accent-soft: #f1d8ce;
  background-color: var(--page);
  background-image:
    linear-gradient(90deg, rgba(155, 63, 44, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(155, 63, 44, 0.06) 1px, transparent 1px);
  background-size: 38px 18px;
}

body[data-theme="mint"] {
  --page: #eef8f2;
  --surface: #ffffff;
  --surface-soft: #f4fbf7;
  --surface-warm: #fff7c8;
  --ink: #182b25;
  --ink-muted: #607a70;
  --ink-faint: #9bb0a8;
  --line: #cfe0d8;
  --line-strong: #87aa9a;
  --accent: #2b8f73;
  --accent-soft: #ddf2ea;
  background-color: var(--page);
  background-image:
    radial-gradient(circle at 9px 9px, rgba(43, 143, 115, 0.18) 1.5px, transparent 2px),
    radial-gradient(circle at 27px 27px, rgba(43, 143, 115, 0.10) 1px, transparent 2px);
  background-size: 36px 36px;
}

.theme-blueprint {
  background: linear-gradient(135deg, #126b9a 50%, #e8f0f6 50%);
}

.theme-graphite {
  background: linear-gradient(135deg, #161819 50%, #c9d4d8 50%);
}

.theme-terminal {
  background: linear-gradient(135deg, #07110d 50%, #50ff93 50%);
}

.theme-clay {
  background: linear-gradient(135deg, #9b3f2c 50%, #efe6df 50%);
}

.theme-mint {
  background: linear-gradient(135deg, #2b8f73 50%, #eef8f2 50%);
}

.login-brand {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  align-items: end;
  gap: 30px;
  width: 100%;
}

.login-caesar-button {
  width: 206px;
  height: 206px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.login-caesar {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
}

.login-wordmark {
  display: block;
  height: 94px;
  margin-bottom: 18px;
  background-image: url("assets/documentator-wordmark.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  filter: grayscale(1);
}

.caesar-avatar {
  background-image: var(--caesar-image, url("assets/documentator-caesar-logo-base.png"));
}

.caesar-brand:hover .caesar-avatar,
.caesar-brand.is-logo-hover .caesar-avatar,
.caesar-brand:focus-visible .caesar-avatar,
.login-caesar-button:hover .caesar-avatar,
.login-caesar-button.is-logo-hover .caesar-avatar,
.login-caesar-button:focus-visible .caesar-avatar {
  background-image: var(--caesar-image, url("assets/documentator-caesar-logo-base.png"));
  transform: scale(1.05);
  filter: grayscale(1) contrast(1.08);
}

.section-expansion {
  transition:
    max-height 1180ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 720ms ease,
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inline-detail {
  animation-duration: 680ms;
}

.team-page {
  width: min(980px, 100%);
}

.team-page-list {
  display: grid;
  gap: 8px;
}

.person-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 10px;
  cursor: default;
}

.team-page-list .person-card {
  cursor: pointer;
}

.person-card.is-admin {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.person-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 236, 205, 0.96) 0 29%, transparent 30%),
    radial-gradient(circle at 38% 36%, #1e1e1e 0 2px, transparent 3px),
    radial-gradient(circle at 62% 36%, #1e1e1e 0 2px, transparent 3px),
    linear-gradient(calc(var(--avatar-index) * 31deg), hsl(calc(var(--avatar-index) * 31) 55% 42%), hsl(calc(var(--avatar-index) * 47) 42% 72%));
}

.person-avatar::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 35px;
  width: 18px;
  height: 7px;
  border-bottom: 2px solid rgba(35, 28, 24, 0.72);
  border-radius: 50%;
}

.person-avatar::after {
  content: attr(data-initials);
  position: absolute;
  right: 5px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
}

.person-main {
  min-width: 0;
}

.person-card header {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 150px 210px 76px;
  gap: 8px;
  align-items: baseline;
}

.person-card header strong,
.person-card header small,
.person-card header span,
.person-card header b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card header b {
  justify-self: end;
  font-size: 11px;
}

.person-responsibility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    max-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.person-responsibility span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card:hover .person-responsibility,
.person-card:focus-within .person-responsibility,
.person-card.is-active .person-responsibility {
  max-height: 96px;
  margin-top: 7px;
  opacity: 1;
  transform: translateY(0);
}

.person-activity {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  animation: panelIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.person-activity article {
  display: grid;
  grid-template-columns: 114px 142px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: var(--ink-muted);
  font-size: 11px;
}

.person-activity strong,
.person-activity span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-account-view .work-toolbar {
  display: none;
}

.is-account-view .project-home {
  display: none;
}

.is-account-view .main-panel {
  padding-top: 0;
}

.settings-page {
  width: min(980px, 100%);
  margin: 0 auto;
}

.settings-hero {
  margin-top: 0;
}

.account-actions,
.admin-projects {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.account-menu,
.admin-project-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 26px rgba(31, 31, 27, 0.05);
}

.account-menu summary {
  cursor: pointer;
  padding: 11px 12px;
  font-weight: 700;
}

.account-menu > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

.account-menu button,
.password-menu input {
  min-height: 34px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.admin-projects header h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.admin-project-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.admin-project-card strong,
.admin-project-card span {
  display: block;
}

.admin-project-card span {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 12px;
}

.admin-project-card b {
  font-size: 12px;
}

.admin-project-volumes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease;
}

.admin-project-card:hover .admin-project-volumes {
  max-height: 140px;
  opacity: 1;
}

.admin-project-volumes span {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .login-brand {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
  }

  .login-caesar-button {
    width: 110px;
    height: 110px;
  }

  .login-wordmark {
    height: 54px;
    margin-bottom: 10px;
  }

  .person-card header,
  .person-activity article,
  .admin-project-card {
    grid-template-columns: 1fr;
  }

  .person-responsibility,
  .admin-project-volumes {
    grid-template-columns: 1fr;
  }
}

/* Current iteration: keep original timeline layout, add row focus */
.timeline-version-chip.is-row-related,
.timeline-comment-mark.is-row-related {
  opacity: 1;
  filter: contrast(1.18);
}

.timeline-comment-mark.is-row-related::after {
  background: rgba(17, 17, 17, 0.58);
}

.section-expansion {
  transition:
    max-height 1680ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 820ms ease,
    transform 1280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inline-detail {
  animation-duration: 840ms;
}

.section-item.is-closing .section-expansion {
  transition:
    max-height 1280ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease,
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

.section-item.is-closing .expansion-inner {
  opacity: 0;
  transition: opacity 170ms ease;
}

.person-avatar.user-avatar {
  background-image: url("assets/user-avatar.jpg");
  background-repeat: no-repeat;
  background-position: center 34%;
  background-size: cover;
}

.person-avatar.user-avatar::before,
.person-avatar.user-avatar::after {
  display: none;
}

/* Current iteration: timeline ruler polish and volume workspace */
.timeline-tick {
  color: #1f292f;
}

.timeline-tick i {
  top: var(--tick-top, 8px);
  width: var(--tick-w);
  height: var(--tick-h);
  background: #38444b;
}

.timeline-tick b {
  top: calc(var(--tick-top, 8px) + var(--tick-h) - var(--label-h, 10px));
  left: calc(var(--tick-w) + 7px);
  display: grid;
  gap: 1px;
  max-width: 74px;
  color: #1f292f;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  text-align: left;
  text-overflow: clip;
  transform: none;
}

.timeline-tick b small {
  color: #6a7379;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
}

.timeline-tick-year i,
.timeline-tick.is-year i {
  background: #151a1d;
}

.timeline-tick-month i {
  background: #253039;
}

.timeline-tick-week i {
  background: #5b656c;
}

.timeline-tick-day i {
  background: #858f96;
}

.timeline-tick-hour i {
  background: #727e86;
}

.timeline-tick-minute i {
  background: #9ba5ab;
}

.timeline-rows:not(:hover) .timeline-row {
  background: #ffffff;
  opacity: 1;
}

.timeline-row {
  background: #ffffff;
  opacity: 1;
}

.timeline-active-span.is-future {
  background: rgba(176, 52, 44, 0.14);
}

.timeline-active-span.is-future.is-focused {
  background: rgba(176, 52, 44, 0.22);
}

.comment-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.comment-mention {
  display: inline-grid;
  grid-template-columns: 16px max-content minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-width: 0;
  padding: 5px 7px;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
}

.comment-mention strong {
  color: var(--ink);
  font-size: 11px;
}

.comment-mention small {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

.mention-icon::before,
.mention-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.mention-icon::before {
  top: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.mention-icon::after {
  bottom: 1px;
  width: 12px;
  height: 7px;
  border-radius: 7px 7px 3px 3px;
}

.section-expansion .mini-grid {
  display: none;
}

.volume-workspace {
  display: grid;
  gap: 10px;
}

.volume-local-tabs {
  display: flex;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.section-item.is-selected:has(.section-current:hover) .volume-local-tabs,
.section-item.is-selected:has(.section-current:focus-within) .volume-local-tabs,
.volume-local-tabs:hover,
.volume-local-tabs:focus-within {
  max-height: 42px;
  opacity: 1;
  transform: translateY(0);
}

.volume-local-tabs button {
  min-height: 32px;
  padding: 6px 10px;
  color: var(--ink-muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.volume-local-tabs button[aria-pressed="true"] {
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
}

.volume-tab-panel {
  display: grid;
  gap: 10px;
  animation: panelIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.volume-folder-grid {
  display: grid;
  gap: 8px;
}

.volume-folder,
.volume-document-card,
.volume-outline-editor,
.volume-task-editor,
.volume-history-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(31, 31, 27, 0.035);
}

.volume-folder {
  margin-left: calc(var(--level) * 16px);
  overflow: hidden;
}

.volume-folder-head {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink);
  text-align: left;
  background: #ffffff;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.folder-glyph {
  position: relative;
  width: 14px;
  height: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.folder-glyph::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -1px;
  width: 8px;
  height: 4px;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

.volume-folder-head strong,
.volume-document-caption strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.volume-folder-head small,
.volume-document-caption small {
  color: var(--ink-muted);
  font-size: 11px;
}

.volume-folder-body {
  display: grid;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    max-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 240ms ease,
    opacity 240ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.volume-folder.is-open > .volume-folder-body {
  max-height: 1200px;
  padding: 0 10px 10px;
  opacity: 1;
  transform: translateY(0);
}

.volume-document-card {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 108px;
  margin-left: calc(var(--level) * 16px);
  padding: 8px;
  color: var(--ink);
  text-align: left;
  cursor: zoom-in;
  font: inherit;
}

.volume-document-card:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

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

.volume-document-card.is-dragging {
  opacity: 0.36;
  cursor: grabbing;
}

.volume-document-card.is-drop-before,
.volume-document-card.is-drop-after {
  position: relative;
  border-color: var(--ink);
}

.volume-document-card.is-drop-before::before,
.volume-document-card.is-drop-after::after {
  content: "";
  position: absolute;
  right: 8px;
  left: 8px;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
}

.volume-document-card.is-drop-before::before {
  top: -5px;
}

.volume-document-card.is-drop-after::after {
  bottom: -5px;
}

.volume-document-thumb {
  display: grid;
  place-items: center;
  width: 122px;
  aspect-ratio: 1.414 / 1;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}

.volume-document-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.volume-document-caption {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.volume-outline-editor,
.volume-task-editor {
  padding: 10px;
}

.volume-outline-editor header,
.volume-task-editor header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.volume-outline-editor header strong,
.volume-task-editor header strong,
.volume-outline-editor header span,
.volume-task-editor header span {
  display: block;
}

.volume-outline-editor header span,
.volume-task-editor header span {
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 11px;
}

.volume-outline-editor header button {
  min-height: 30px;
  padding: 5px 9px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.volume-outline-list,
.volume-task-tree,
.volume-task-tree ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.volume-outline-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding-left: calc(var(--level) * 22px);
}

.outline-dot {
  width: 6px;
  height: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.volume-outline-row input,
.volume-task-row input[type="text"],
.volume-task-row input:not([type]) {
  width: 100%;
  min-height: 26px;
  padding: 3px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font: inherit;
}

.volume-outline-row input:focus,
.volume-task-row input:focus {
  background: #ffffff;
  border-color: var(--ink);
  outline: 0;
}

.volume-task-row {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 3px;
  align-items: start;
  padding-left: calc(var(--level) * 22px);
}

.volume-task-row > label {
  display: grid;
  place-items: center;
  width: 15px;
  height: 26px;
  transform: translateY(1px);
}

.volume-task-row > label input {
  width: 14px;
  height: 14px;
  accent-color: var(--ink);
}

.volume-task-row > div {
  display: grid;
  gap: 0;
  min-width: 0;
}

.volume-task-row.is-done > div > input {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.task-assignee-line {
  display: grid;
  grid-template-columns: 11px minmax(0, 220px);
  gap: 2px;
  align-items: center;
  max-width: 280px;
  margin: -4px 0 1px 4px;
  color: var(--ink-faint);
  font-size: 11px;
}

.task-assignee-line .mention-icon {
  transform: translate(3px, -3px) scale(0.86);
}

.task-assignee-line input {
  min-height: 20px;
  padding: 1px 4px;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
}

.task-assignee-line.is-editing input,
.task-assignee-line input:focus {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line-strong);
}

.volume-history-panel {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

.volume-history-versions,
.volume-history-comments {
  display: grid;
  align-content: start;
  gap: 7px;
}

.volume-history-versions article {
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.volume-history-versions article.is-current {
  border-color: var(--ink);
}

.volume-history-versions strong,
.volume-history-versions span,
.volume-history-versions small {
  display: block;
}

.volume-history-versions span,
.volume-history-versions small {
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 11px;
}

.document-viewer {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(12, 13, 13, 0.92);
  cursor: zoom-out;
}

.document-viewer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.document-viewer article {
  display: contents;
}

.document-viewer header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.document-viewer header strong,
.document-viewer header span {
  display: block;
}

.document-viewer header span {
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 12px;
}

.document-viewer header button {
  width: 34px;
  height: 34px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
}

.document-viewer-canvas {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
}

body.is-document-panning .document-viewer-canvas {
  cursor: grabbing;
}

.document-viewer-canvas img {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  transform: translate(var(--pan-x, 0), var(--pan-y, 0)) scale(var(--zoom, 1));
  transform-origin: center center;
  transition: transform 80ms linear;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 760px) {
  .volume-document-card,
  .volume-history-panel {
    grid-template-columns: 1fr;
  }

  .volume-document-thumb {
    width: 100%;
  }

  .document-viewer {
    padding: 0;
  }
}

.person-card header b {
  display: grid;
  gap: 2px;
  text-align: right;
}

.person-card header b span,
.person-card header b small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card header b small {
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 600;
}

.settings-hero {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.settings-avatar-button {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.settings-avatar-button:hover .settings-avatar {
  box-shadow: 0 0 0 2px #111111, inset 0 0 0 3px #ffffff;
}

.settings-hero-actions {
  display: grid;
  gap: 6px;
}

.account-menu {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
}

.account-menu > strong {
  font-size: 13px;
}

.admin-projects,
.account-theme-settings {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.account-project-card {
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.account-project-card:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.account-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.account-theme-grid button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 42px;
  padding: 7px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}

.account-theme-grid button[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.numbering-toggle input {
  accent-color: #111111;
  filter: grayscale(1);
}

body[data-theme="reference"] {
  --radius: 5px;
  --shadow: 0 10px 24px rgba(31, 31, 27, 0.06);
  font-family: Arial, Helvetica, sans-serif;
}

body[data-theme="contrast"] {
  --radius: 2px;
  --shadow: 0 0 0 1px rgba(17, 17, 17, 0.18), 8px 8px 0 rgba(17, 17, 17, 0.1);
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  background-image:
    linear-gradient(90deg, rgba(17, 17, 17, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

body[data-theme="paper"] {
  --radius: 8px;
  --shadow: 0 8px 18px rgba(94, 73, 43, 0.08);
  font-family: Georgia, "Times New Roman", serif;
  background-image:
    linear-gradient(rgba(97, 76, 42, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 20px 18px, rgba(143, 112, 69, 0.1) 1px, transparent 2px);
  background-size: 100% 27px, 42px 42px;
}

body[data-theme="blueprint"] {
  --radius: 1px;
  --shadow: 0 14px 0 rgba(18, 107, 154, 0.08);
  font-family: "Segoe UI", Arial, sans-serif;
  background-image:
    linear-gradient(rgba(18, 107, 154, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 107, 154, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(18, 107, 154, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 107, 154, 0.06) 1px, transparent 1px);
  background-size: 110px 110px, 110px 110px, 22px 22px, 22px 22px;
}

body[data-theme="graphite"] {
  --radius: 0;
  --shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
  font-family: "Trebuchet MS", Arial, sans-serif;
}

body[data-theme="terminal"] {
  --radius: 0;
  --shadow: 0 0 0 1px rgba(80, 255, 147, 0.28), 0 0 24px rgba(80, 255, 147, 0.12);
  font-family: Consolas, "Courier New", monospace;
}

body[data-theme="clay"] {
  --radius: 12px;
  --shadow: 0 18px 34px rgba(95, 47, 31, 0.14);
  font-family: "Segoe UI", Arial, sans-serif;
}

body[data-theme="mint"] {
  --radius: 16px;
  --shadow: 0 18px 38px rgba(34, 103, 82, 0.13);
  font-family: Verdana, Geneva, sans-serif;
}

@media (max-width: 760px) {
  .timeline-mode-shell {
    width: 100%;
  }

  .timeline-stage {
    padding-right: 0;
  }

  .account-theme-grid {
    grid-template-columns: 1fr 1fr;
  }
}