/* ===================================================================   Hola-Calendar · styles
   One rule per selector, grouped by the part of the app it draws. Breakpoints
   follow at the end, widest first, then reduced motion.
   ========================================================================== */


/* 1 · Tokens ------------------------------------------------------------------- */

/* System fonts only: Google Fonts is unreachable for most of the team. Noto Serif SC
   ships with Windows 11 and Songti SC with macOS; Palatino carries the Latin and numerals. */
:root {
  --paper: #F0EEE6;
  --paper-2: #E9E6DB;
  --canvas: #F0EEE6;
  --surface: #FFFDF9;
  --surface-sunk: #F7F4ED;
  --ink: #1F1B15;
  --ink-2: #3E372C;
  --ink-deep: #26221B;
  --muted: #7C7466;
  --faint: #9E9688;
  --line: #E2DDD0;
  --line-soft: #EDE9DE;
  --line-strong: #D2CBBB;
  --rail: #F0EEE6;
  --rail-hover: #E9E6DB;
  --rail-line: #E2DDD0;
  --rail-text: #3E372C;
  --rail-muted: #7C7466;
  --rail-dim: #9E9688;
  --rail-strong: #1F1B15;
  --accent: #D97757;
  --accent-dark: #C05F41;
  --accent-line: #E7C4B2;
  --accent-soft: #FBF1EA;
  --accent-soft-2: #F7E7DE;
  --p0: #C4563F;
  --p1: #B8862F;
  --p1-ink: #8A6A1F;
  --p2: #4A8B6F;
  --success: #4A8B6F;
  --success-soft: #EDF3EF;
  --warn: #B8862F;
  --warn-soft: #FCF5E4;
  --warn-line: #E7D5A6;
  --danger: #BE4F3E;
  --danger-dark: #A3402F;
  --danger-line: #EBC0B6;
  --danger-ink: #7E4033;
  --c-coral-soft: #FAEAE3;
  --c-coral-line: #E5B9A6;
  --c-coral-ink: #B05536;
  --c-blue-soft: #E7EDF6;
  --c-blue-line: #B3C4DC;
  --c-blue-ink: #4C6A9E;
  --c-blue: #5C7CB0;
  --c-green-soft: #E5F1EB;
  --c-green-line: #A9CFBE;
  --c-green-ink: #3E8267;
  --c-purple-soft: #EFEAF8;
  --c-purple-line: #C6B6E4;
  --c-purple-ink: #775C9E;
  --c-purple: #8B6BAE;
  --c-gold-soft: #F8EFD9;
  --c-gold-line: #E0C98F;
  --c-gold-ink: #8E6E2B;
  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  --font-serif: 'Palatino Linotype','Iowan Old Style',Palatino,'Book Antiqua','Noto Serif SC','Source Han Serif SC','Songti SC','PingFang SC','Microsoft YaHei',serif;
  --shadow: 0 1px 2px rgba(64,54,42,.04),0 12px 30px rgba(64,54,42,.07);
  --shadow-sm: 0 1px 2px rgba(64,54,42,.05);
  --shadow-md: 0 4px 14px rgba(64,54,42,.08),0 18px 44px rgba(64,54,42,.08);
  --shadow-lg: 0 26px 70px rgba(45,37,27,.22);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.30,.64,1);
  --t-fast: 150ms;
  --t: 200ms;
  --t-slow: 280ms;
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --hair: rgba(31, 27, 21, .09);
  --page-x: clamp(20px, 4.2vw, 64px);
  --ink-rule: var(--line);
}

/* 2 · Base · elements, type, focus, scrollbars --------------------------------- */

* {
  box-sizing: border-box;
  scrollbar-width: none;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: .005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: var(--paper);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

.view {
  display: none;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px var(--page-x) 88px;
}

.hidden {
  display: none !important;
}

.muted {
  font-size: 12px;
  color: var(--muted);
}

input,
textarea,
select {
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

::selection {
  background: var(--accent-soft-2);
  color: var(--ink);
}

/* 3 · Icons -------------------------------------------------------------------- */

/* Inline-block so an icon sits correctly inside a run of text; it still behaves
   as a flex item wherever a button or row is a flex container. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Static markup points at an icon by name; JS fills the slot on boot. */
.icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
  flex: none;
}

/* 4 · Motion ------------------------------------------------------------------- */

.active-view {
  display: block;
}

@keyframes pop {
  from { opacity: 0; transform: translate(-50%,-48%) scale(.98); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

@keyframes notifyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,87,.2); }
  50% { box-shadow: 0 0 0 6px rgba(217,119,87,0); }
}

@keyframes wcRiseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes wcModalIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.972); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes wcDrawerIn {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes wcFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wcToastIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.task-list > *:nth-child(2),
.inbox-list > *:nth-child(2) {
  animation-delay: 40ms;
}

.task-list > *:nth-child(3),
.inbox-list > *:nth-child(3) {
  animation-delay: 80ms;
}

.task-list > *:nth-child(4),
.inbox-list > *:nth-child(4) {
  animation-delay: 120ms;
}

.task-list > *:nth-child(5),
.inbox-list > *:nth-child(5) {
  animation-delay: 160ms;
}

.task-list > *:nth-child(n + 6),
.inbox-list > *:nth-child(n + 6) {
  animation-delay: 200ms;
}

@keyframes wcMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes agent-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, .45); }
  50% { box-shadow: 0 0 0 6px rgba(255, 107, 74, 0); }
}

@keyframes ledgerRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes ledgerRule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ledgerPulse {
  0% { box-shadow: 0 0 0 0 rgba(92, 124, 176, .45); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(92, 124, 176, 0); }
}

.view.active-view {
  animation: none;
}

.view.active-view > * {
  animation: ledgerRise .52s var(--ease-out) both;
}

.view.active-view > *:nth-child(2) {
  animation-delay: 50ms;
}

.view.active-view > *:nth-child(3) {
  animation-delay: 100ms;
}

.view.active-view > *:nth-child(4) {
  animation-delay: 150ms;
}

.view.active-view > *:nth-child(n + 5) {
  animation-delay: 200ms;
}

.view.active-view.is-revisit > * {
  animation: wcFadeIn .18s var(--ease) both;
  animation-delay: 0ms;
}

/* On the first entry the page itself rises; the space inside it does not
   rise a second time. */
.view.active-view:not(.is-revisit) .project-space {
  animation: none;
}


@keyframes weekFromNext {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes weekFromPrev {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

@keyframes leafTurn {
  0% { transform: perspective(500px) rotateX(-70deg); opacity: 0; }
  60% { transform: perspective(500px) rotateX(8deg); opacity: 1; }
  100% { transform: none; }
}

/* 5 · Controls · buttons, fields, chips, marks --------------------------------- */

/* Fallback avatar: a stable hue per account showing the name's first glyph. */
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  background: hsl(var(--avatar-hue, 18) 38% 56%);
  color: var(--surface);
  overflow: hidden;
  flex: none;
  transition: background var(--t) var(--ease);
}

.section-label {
  text-transform: uppercase;
  display: block;
  font: 600 10px/1.2 var(--font-sans);
  letter-spacing: .16em;
  padding: 0 10px;
  margin-bottom: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.p0 {
  background: var(--p0);
}

.inprogress {
  background: var(--c-blue);
}

.deferred {
  background: var(--c-purple);
}

.progress {
  height: 5px;
  background: var(--line-soft);
  border-radius: 99px;
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: inherit;
}

.help-row {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  text-align: left;
  cursor: pointer;
}

.help-row:hover,
.help-row:focus-visible {
  color: var(--ink-2);
  background: var(--rail-hover);
}

.shortcut-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

.shortcut-list dt {
  text-align: right;
}

.shortcut-list kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-sunk);
  font: 600 12px/1.4 var(--font-sans);
  text-align: center;
}

.shortcut-list dd {
  margin: 0;
  align-self: center;
}


.help-row span {
  border: 1px solid var(--ink-2);
  padding: 2px 5px;
  border-radius: 4px;
  margin-right: 7px;
}

.help-row kbd {
  float: right;
  border: 1px solid var(--ink-2);
  padding: 2px 6px;
  border-radius: 4px;
}

.icon-btn {
  border: 1px solid var(--line);
  font-size: 22px;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

.eyebrow {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: .14em;
  font-size: 11px;
  opacity: .9;
}

.date-chip {
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  height: 40px;
  gap: 4px;
  padding: 0 4px;
  border-radius: 12px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
}

.date-chip button {
  font-size: 20px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}

.progress-percent {
  text-align: right;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.quick-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  gap: 28px;
  margin-bottom: 22px;
  border-bottom-color: var(--hair);
}

.quick-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  height: 2px;
  left: 0;
  right: 0;
  border-radius: 2px 2px 0 0;
  transform: scaleX(1);
  background: var(--ink);
}

.quick-tab b {
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  background: none;
  padding: 0;
  margin-left: 6px;
}

.status-dot {
  border-radius: 50%;
  display: inline-block;
  background: var(--faint);
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
}

.status-dot.done {
  background: var(--success);
}

.empty-state {
  text-align: center;
  padding: 64px 24px;
  border-radius: 16px;
  border: 1px dashed var(--line-strong);
  background: var(--surface-sunk);
  border-color: var(--line);
}

.empty-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin: 0 auto 13px;
  font-size: 22px;
  color: var(--line-strong);
  width: 52px;
  height: 52px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}

.empty-state h3 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.empty-state p {
  color: var(--muted);
  margin: 0 0 19px;
  font-size: 13px;
}

.close-btn {
  position: absolute;
  font-size: 25px;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--muted);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-slow) var(--ease-spring);
}

.complete-btn:hover {
  background: var(--success);
}

.form-field {
  display: block;
  font: 600 10.5px/1.3 var(--font-sans);
  letter-spacing: .12em;
  color: var(--muted);
  margin: 16px 0;
}

.form-field textarea,
.form-field input,
.form-field select {
  display: block;
  width: 100%;
  outline: none;
  margin-top: 8px;
  padding: 10px 12px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: 400 13.5px/1.5 var(--font-sans);
  letter-spacing: 0;
  color: var(--ink);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}

.account-banner .avatar {
  color: var(--surface);
}

.avatar.large {
  width: 38px;
  height: 38px;
}

.permission-pill {
  display: inline-flex;
  align-items: center;
  background: var(--success-soft);
  color: var(--success);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.coral {
  --bar-bg: var(--c-coral-soft);
  --bar-border: var(--c-coral-line);
  --bar-ink: var(--danger);
}

.blue {
  --bar-bg: var(--c-blue-soft);
  --bar-border: var(--c-blue-line);
  --bar-ink: var(--c-blue-ink);
}

.green {
  --bar-bg: var(--c-green-soft);
  --bar-border: var(--c-green-line);
  --bar-ink: var(--c-green-ink);
}

.purple {
  --bar-bg: var(--c-purple-soft);
  --bar-border: var(--c-purple-line);
  --bar-ink: var(--c-purple-ink);
}

.gold {
  --bar-bg: var(--c-gold-soft);
  --bar-border: var(--c-gold-line);
  --bar-ink: var(--c-gold-ink);
}

.member-checkboxes {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 12px;
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.member-checkboxes legend {
  font-size: 12px;
  font-weight: 700;
  padding: 0 4px;
}

.member-checkboxes label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-sunk);
  border-radius: 6px;
  padding: 8px;
}

.member-checkboxes input {
  accent-color: var(--accent);
}

.member-checkboxes small {
  color: var(--muted);
  margin-left: auto;
  font-size: 10px;
}

.task-kind-switch {
  display: flex;
  gap: 6px;
  margin: 2px 0 12px;
}

.task-kind-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.task-kind-btn.active {
  background: var(--ink-deep);
  color: var(--surface);
  border-color: var(--ink-deep);
}

.status-dot.rejected {
  background: var(--danger);
}

.danger-btn {
  margin-top: 10px;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: var(--p0);
  color: var(--surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.danger-btn:hover {
  border-color: var(--danger-dark);
  color: var(--danger-dark);
}

.danger-btn:hover:not(:disabled) {
  background: var(--danger-dark);
}

.danger-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.primary-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.role-select {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 6px;
  font-weight: 600;
  height: 30px;
  border-radius: 8px;
  font-size: 12px;
}

.role-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Buttons lay their icon and label out with a gap, so labels carry no padding. */
.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.quick-tab {
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.quick-tab {
  position: relative;
  transition: color var(--t) var(--ease);
  padding: 0 0 12px;
  font-size: 13.5px;
  color: var(--muted);
}

.progress i,
.progress.wide i {
  transition: width var(--t-slow) var(--ease-out), background var(--t) var(--ease);
}

.member-checkboxes label:hover {
  background: var(--accent-soft);
}

/* 中文名称 is the formal name, 昵称 the personal one; the account id stays visible
   as a quiet mono chip so operators can still match the login. */
.name-tag {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.name-tag.nick {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.name-tag.code {
  color: var(--muted);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  font-family: monospace;
}

.account-banner .avatar,
.workspace-switcher .avatar {
  background: hsl(var(--avatar-hue, 18) 38% 56%);
}

.avatar.has-image {
  background: var(--surface-sunk);
}

.status-dot,
.dot {
  flex: none;
}

.avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-editor .avatar {
  width: 46px;
  height: 46px;
  font-size: 17px;
  border-radius: 50%;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.icon-btn,
.close-btn,
.date-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.close-btn .icon-slot {
  width: 17px;
  height: 17px;
  font-size: 17px;
}

.empty-icon .icon-slot {
  width: 30px;
  height: 30px;
  font-size: 30px;
}

.account-menu-head .avatar.large {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

.account-menu-item.switch .avatar {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.chat-message .avatar {
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.chat-presence .avatar {
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.chat-mention-option .avatar {
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.help-row span,
.help-row kbd {
  border-color: var(--rail-line);
  color: var(--muted);
  background: transparent;
}

.icon-btn .icon-slot {
  width: 18px;
  height: 18px;
  font-size: 18px;
  transition: transform var(--t-slow) var(--ease-spring);
}

.icon-btn:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: none;
  box-shadow: var(--shadow-sm);
}

.icon-btn:hover .icon-slot {
  transform: rotate(-8deg) scale(1.06);
}

.primary-btn,
.secondary-btn {
  position: relative;
  overflow: hidden;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  gap: 7px;
}

.primary-btn {
  background: var(--accent);
  color: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 8px 18px -10px rgba(192, 95, 65, .7);
}

.primary-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .26) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}

.primary-btn:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 14px 24px -12px rgba(192, 95, 65, .75);
}

.primary-btn:hover::after {
  transform: translateX(120%);
}

.primary-btn .icon-slot {
  transition: transform var(--t-slow) var(--ease-spring);
}

.primary-btn:hover .icon-slot {
  transform: rotate(90deg);
}

.primary-btn:active,
.secondary-btn:active,
.ghost-btn:active {
  transform: translateY(0) scale(.97);
}

.secondary-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.secondary-btn:hover {
  background: var(--surface);
  transform: translateY(-1px);
}

.ghost-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}

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

.primary-btn .icon-slot,
.secondary-btn .icon-slot,
.ghost-btn .icon-slot,
.danger-btn .icon-slot {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.form-field textarea:hover,
.form-field input:hover,
.form-field select:hover {
  border-color: var(--line-strong);
}

.form-field textarea:focus,
.form-field input:focus,
.form-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft-2);
}

.priority {
  font: 700 10.5px/18px var(--font-sans);
  letter-spacing: .06em;
  padding: 0 6px;
  border-radius: 5px;
}

.status-dot.doing {
  background: var(--c-blue);
  animation: ledgerPulse 2.4s var(--ease-out) infinite;
}

.status-dot.pending-approval {
  background: var(--p1);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.close-btn:hover {
  background: var(--surface-sunk);
  color: var(--ink);
  transform: rotate(90deg);
}

.date-chip button:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.progress.wide {
  position: relative;
  height: 4px;
  background: var(--line);
  overflow: visible;
}

.progress.wide::after {
  content: '';
  position: absolute;
  inset: -4px 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line-strong) calc(25% - 1px) 25%);
  pointer-events: none;
}

.progress.wide i {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width .9s var(--ease-out);
}

.quick-tab:hover {
  color: var(--ink);
}

.quick-tab.active {
  color: var(--ink);
  font-weight: 600;
}

.quick-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}

.secondary-btn:hover,
.ghost-btn:hover {
  border-color: var(--line-strong);
}

.priority.P0 {
  color: var(--danger);
  background: var(--accent-soft-2);
  box-shadow: none;
}

.priority.P1 {
  color: var(--p1-ink);
  background: var(--warn-soft);
  box-shadow: none;
}

.priority.P2 {
  color: var(--success);
  background: var(--success-soft);
  box-shadow: none;
}

.quick-tab.active b {
  color: var(--muted);
}

.quick-tab b,
.section-label {
  color: var(--muted);
}

/* 6 · Shell & rail · sidebar, brand, navigation, account menu ------------------ */

.app-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  background: var(--paper);
}

.sidebar {
  color: var(--rail-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--main-navigation-width, 248px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: none;
  background: var(--paper);
  border-right: 0;
  padding: 22px 12px 16px 14px;
  transition: width var(--t) var(--ease-out), padding var(--t) var(--ease-out);
}

.sidebar-top { display: flex; align-items: flex-start; gap: 2px; }
.sidebar-top .brand { flex: 1; min-width: 0; }
.nav-brand-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
#mainNavToggle { flex: none; padding-top: 3px; }
.workspace-name { flex: 1; min-width: 0; overflow: hidden; }
.workspace-name strong,
.workspace-name small { overflow: hidden; white-space: nowrap; }
.nav-item .nav-text,
.filter-link .nav-text,
.project-nav-item .nav-text,
.project-nav-toggle .nav-text,
.project-nav-head .nav-text {
  flex: 1; min-width: 0; width: auto; overflow: hidden; white-space: nowrap;
  text-overflow: clip; text-align: left; font-size: inherit;
  transition: opacity var(--t-fast) var(--ease);
}
.has-nav-overflow {
  text-overflow: clip !important;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
.nav-collapse-toggle {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  padding: 4px; border-radius: 7px; color: var(--muted);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-collapse-toggle:hover { color: var(--accent-dark); background: var(--rail-hover); }
.nav-collapse-toggle .icon { width: 15px; height: 15px; transform: rotate(180deg); transition: transform var(--t) var(--ease); }
.is-nav-collapsed .nav-collapse-toggle .icon { transform: none; }
.nav-resize-handle {
  position: absolute; top: 0; bottom: 0; right: 0; width: 8px; z-index: 5;
  cursor: col-resize; touch-action: none; outline-offset: -2px;
}
.is-resizing-navigation { cursor: col-resize; user-select: none; }
.is-resizing-navigation .sidebar,
.is-resizing-navigation #projectsView,
.is-resizing-navigation .chat-side { transition: none !important; }

@media (min-width: 761px) {
  .sidebar.is-nav-narrow .sidebar-footer,
  .sidebar.is-nav-narrow .section-label { display: none; }
  .sidebar.is-nav-collapsed { padding-left: 8px; padding-right: 8px; }
  .sidebar.is-nav-narrow .sidebar-top { flex-direction: column-reverse; align-items: center; gap: 10px; }
  .sidebar.is-nav-narrow .brand { flex-direction: column; gap: 8px; padding-left: 0; padding-right: 0; }
  .sidebar.is-nav-narrow .brand-chat { margin: 0; }
  .sidebar.is-nav-narrow .nav-brand-name,
  .sidebar.is-nav-narrow .chevron { display: none; }
  .sidebar.is-nav-collapsed .workspace-name,
  .sidebar.is-nav-collapsed .chevron,
  .sidebar.is-nav-collapsed .section-label,
  .sidebar.is-nav-collapsed .nav-item b,
  .sidebar.is-nav-collapsed .filter-link b { display: none; }
  .sidebar.is-nav-collapsed .workspace-switcher { justify-content: center; padding: 8px 4px; }
  .sidebar.is-nav-collapsed .nav-item,
  .sidebar.is-nav-collapsed .filter-link { justify-content: center; gap: 0; padding: 0 8px; }
  .sidebar.is-nav-collapsed .nav-text { flex: 0; width: 0; opacity: 0; }
  .sidebar.is-nav-collapsed .nav-new-dot { position: absolute; right: 6px; top: 6px; }
}

.brand {
  align-items: center;
  gap: 10px;
  display: flex;
  width: 100%;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .02em;
  padding: 0 6px 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rail-line);
  color: var(--ink);
  border-bottom-color: transparent;
  padding-bottom: 14px;
}

/* Fixed-size marks are never squeezed by a long sibling label. */
.brand-mark {
  display: grid;
  place-items: center;
  font-weight: 700;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--surface);
  font-family: var(--font-serif);
  font-size: 16px;
  box-shadow: 0 6px 14px -6px rgba(192, 95, 65, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform var(--t-slow) var(--ease-spring);
}

.workspace-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 25px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--rail-line);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.workspace-switcher small {
  display: block;
  font: 600 10px/1.3 var(--font-sans);
  letter-spacing: .12em;
  color: var(--faint);
  margin-bottom: 1px;
}

.chevron {
  margin-left: auto;
  color: var(--rail-muted);
}

.nav-list {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nav-item,
.filter-link {
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  min-width: 0;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
  position: relative;
  height: 38px;
  padding: 0 10px;
  gap: 11px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  box-shadow: none;
}

.nav-item span {
  font-size: 19px;
  width: 18px;
  text-align: center;
}

.nav-item b,
.filter-link b {
  margin-left: auto;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  min-width: 18px;
  text-align: right;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
}

.focus-card {
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 10px 4px;
}

.focus-card span,
.focus-card small {
  display: block;
  color: var(--muted);
}

.focus-card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 8px 0 2px;
  color: var(--ink);
}

.main-content {
  flex: 1;
  min-width: 0;
  margin: 10px 10px 10px 0;
  min-height: calc(100vh - 20px);
  background: var(--surface);
  border-radius: 18px;
  overflow: clip;
  box-shadow: 0 0 0 1px rgba(210, 203, 187, .6), 0 1px 2px rgba(64, 54, 42, .04), 0 24px 60px -40px rgba(64, 54, 42, .35);
}

#focusTime {
  font-variant-numeric: tabular-nums;
}

/* A terracotta tick marks the current view. */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: none;
  display: none;
}

.chevron .icon {
  stroke-width: 2;
}

.workspace-slot {
  position: relative;
  margin: 16px 0 18px;
}

.workspace-slot .workspace-switcher {
  margin: 0;
  cursor: pointer;
}

.workspace-switcher .chevron {
  transition: transform var(--t) var(--ease);
  color: var(--faint);
}

.workspace-switcher[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.workspace-switcher[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--rail-hover);
}

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: min(72vh, 520px);
  overflow-y: auto;
  transform-origin: top center;
  animation: wcMenuIn var(--t) var(--ease-out) both;
}

.account-menu.hidden {
  display: none;
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 11px;
  border-bottom: 1px solid var(--line);
}

.account-menu-identity {
  min-width: 0;
}

.account-menu-identity strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.account-menu-identity .name-tag {
  margin-top: 4px;
}

.account-menu-identity small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* 个性签名: the holder's own line, set like a handwritten note under the name. */
.signature {
  display: block;
  overflow: hidden;
  max-width: 100%;
  margin-top: 3px;
  font: italic 400 12px/1.4 var(--font-serif);
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-switcher .signature {
  max-width: 150px;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--muted);
}

.account-menu-head {
  flex-wrap: wrap;
}

.account-menu-head > .signature {
  flex-basis: 100%;
  margin-top: 0;
  white-space: normal;
}

.account-menu-group {
  display: grid;
  gap: 1px;
  padding: 5px 0;
}

.account-menu-group + .account-menu-group {
  border-top: 1px solid var(--line-soft);
}

.account-menu-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--faint);
  padding: 5px 10px 4px;
  text-transform: uppercase;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.account-menu-item:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.account-menu-item > small {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
}

.account-menu-item.danger {
  color: var(--danger);
}

.account-menu-item.danger:hover {
  background: var(--accent-soft-2);
}

.account-menu-item.switch > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.account-menu-item.switch small {
  color: var(--faint);
  font-size: 11px;
}

/* The chat entry sits at the right end of the brand row. */
.brand-chat {
  position: relative;
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
  color: var(--muted);
}

.brand-chat:hover {
  border-color: var(--rail-line);
  color: var(--accent-dark);
  background: var(--rail-hover);
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.brand strong {
  font-weight: 600;
  color: var(--ink);
}

.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.04);
}

.workspace-switcher strong {
  font-size: 13.5px;
  color: var(--ink);
}

.nav-item .icon-slot {
  width: 17px;
  height: 17px;
  font-size: 17px;
  color: var(--muted);
  transition: color var(--t) var(--ease), transform var(--t-slow) var(--ease-spring);
}

.nav-item:hover,
.filter-link:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.nav-item:hover .icon-slot {
  transform: translateX(1px) scale(1.06);
  color: var(--ink);
}

.nav-item.active {
  font-weight: 600;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(64, 54, 42, .07), 0 0 0 1px rgba(210, 203, 187, .55);
}

.sidebar-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rail-line);
  border-top-color: var(--line);
}

.filter-link {
  height: 34px;
  font-size: 13px;
}

.filter-link .dot {
  transition: transform var(--t-slow) var(--ease-spring);
}

.filter-link:hover .dot {
  transform: scale(1.5);
}

.focus-card::after {
  content: '';
  position: absolute;
  right: -26px;
  top: -26px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 249, .28);
  box-shadow: 0 0 0 14px rgba(255, 253, 249, .06);
  pointer-events: none;
  display: none;
}

.focus-card span {
  font: 600 10px/1.2 var(--font-sans);
  letter-spacing: .14em;
}

.focus-card small {
  font-size: 11.5px;
}

.focus-card .progress {
  height: 3px;
  margin-top: 12px;
  background: var(--line);
}

.nav-item.active .icon-slot {
  color: var(--ink);
}

.nav-item.active b,
.nav-item b,
.filter-link b {
  color: var(--faint);
}

.focus-card .progress i {
  background: var(--accent);
}

.workspace-switcher:hover {
  background: var(--paper-2);
  border-color: transparent;
  box-shadow: none;
}

/* New work waiting in the project space: a red dot that hops now and then
   until every new project and task in there has been opened. */
.nav-new-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--rail);
  animation: navDotHop 2.2s var(--ease) infinite;
}

@keyframes navDotHop {
  0%, 46%, 100% { transform: none; }
  14% { transform: translateY(-5px); }
  28% { transform: none; }
  37% { transform: translateY(-2px); }
}

/* 7 · Masthead · topbar and page heads ----------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  height: 60px;
  padding: 0 var(--page-x);
  background: rgba(255, 253, 249, .86);
  border-bottom: 1px solid var(--line-soft);
  gap: 16px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.page-intro {
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--hair);
  border-bottom-color: var(--line-soft);
  flex-wrap: wrap;
}

.panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 13px;
}

.panel-heading h2 {
  font-size: 19px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
}

/* The entry point sits with the rules it manages, not in the page header. */
.panel-heading .secondary-btn {
  flex-shrink: 0;
}

.page-intro h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.12;
  margin: 0 0 10px;
  color: var(--ink);
}

.breadcrumbs {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .16em;
  color: var(--faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs span:last-child {
  margin-left: 6px;
  color: var(--ink);
  letter-spacing: .08em;
}

.page-intro::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  transform-origin: left;
  animation: ledgerRule .9s var(--ease-out) .15s both;
  background: var(--ink);
  width: 40px;
}

.page-intro .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .18em;
  margin-bottom: 14px;
  opacity: 1;
  color: var(--muted);
}

.page-intro .eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* 8 · Overlays · modal, drawer, toast, search ---------------------------------- */

.drawer-backdrop,
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  animation: wcFadeIn var(--t) var(--ease-out) both;
  background: rgba(38, 34, 27, .34);
  backdrop-filter: blur(4px) saturate(.9);
  -webkit-backdrop-filter: blur(4px) saturate(.9);
}

.task-drawer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  width: min(540px, 100%);
  padding: 36px 40px 40px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px -30px rgba(45, 37, 27, .35);
  animation: wcDrawerIn .42s var(--ease-out) both;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--surface);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  animation: wcModalIn var(--t-slow) var(--ease-spring) both;
  width: min(520px, calc(100% - 32px));
  padding: 34px 36px 30px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.drawer-kicker {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  margin: 26px 0;
  background: none;
  border-top: 1px solid var(--ink-rule);
  border-radius: 0;
}

.detail-grid span {
  display: block;
  font: 600 10px/1.2 var(--font-sans);
  letter-spacing: .14em;
  margin-bottom: 6px;
}

.history-item i {
  border-radius: 50%;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 13px;
  width: 7px;
  height: 7px;
  margin: 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--success);
}

.drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.modal p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 18px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  gap: 10px;
}

.toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  color: var(--surface);
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .22s;
  z-index: 30;
  letter-spacing: .01em;
  border-radius: 10px;
  padding: 11px 16px;
  background: var(--ink-deep);
  box-shadow: var(--shadow-lg);
  font-weight: 500;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  animation: wcToastIn var(--t-slow) var(--ease-spring) both;
}

.repeat-admin-panel {
  border: 1px solid var(--line);
  padding: 18px;
  margin: 18px 0;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
  border-color: var(--line);
}

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

.repeat-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  flex-wrap: wrap;
}

.repeat-admin-item div {
  display: grid;
  gap: 3px;
}

.repeat-admin-item span,
.repeat-admin-item small {
  font-size: 12px;
  color: var(--muted);
}

.repeat-admin-item .repeat-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.edit-request-summary {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  padding: 13px;
  margin: 18px 0;
}

.edit-request-summary > strong {
  display: block;
  font-size: 13px;
  color: var(--accent);
}

.edit-request-summary > small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
}

.edit-request-summary ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}

.edit-request-summary li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  border-top: 1px solid var(--accent-line);
  padding-top: 6px;
}

.edit-request-summary li b {
  color: var(--muted);
  font-weight: 600;
}

.edit-request-summary li span {
  text-align: right;
  max-width: 70%;
  word-break: break-word;
}

.project-date-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.task-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
}

.task-form-grid .form-field {
  margin-top: 10px;
}

.approval-pending-note {
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 18px;
}

.rejection-note {
  background: var(--accent-soft-2);
  border: 1px solid var(--danger-line);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 18px;
  font-size: 13px;
}

.approval-actions {
  grid-template-columns: 1fr 1fr;
}

.completion-summary {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--surface-sunk);
  border-radius: 9px;
  border-left: 3px solid var(--accent);
}

.completion-summary span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 5px;
}

.completion-summary p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.danger-eyebrow {
  color: var(--p0) !important;
}

.danger-panel {
  background: var(--accent-soft-2);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}

.danger-panel p {
  color: var(--danger-ink);
}

.danger-impact {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--danger-ink);
}

.danger-impact strong {
  color: var(--p0);
}

.danger-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.danger-check input {
  margin-top: 2px;
  accent-color: var(--p0);
}

.danger-confirm {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}

.danger-confirm code {
  background: var(--surface-sunk);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

.danger-confirm input {
  height: 38px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  padding: 0 11px;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
}

.danger-confirm input:focus {
  outline: none;
  border-color: var(--p0);
  box-shadow: 0 0 0 3px rgba(196,86,63,.14);
}

.repeat-admin-panel:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.avatar-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.drawer-title,
.modal h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}

.drawer-kicker::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}

.drawer-title {
  font-size: 28px;
  line-height: 1.2;
  margin: 14px 0 10px;
}

.drawer-description {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

.detail-grid > div {
  padding: 13px 0 12px;
  border-bottom: 1px solid var(--hair);
}

.detail-grid > div:nth-child(odd) {
  padding-right: 16px;
}

.detail-grid > div:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid var(--hair);
}

.detail-grid strong {
  font-size: 14px;
  font-weight: 600;
}

.detail-grid > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  padding-right: 0;
}

.history {
  border-top: 0;
  padding-top: 6px;
}

.history h3 {
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  margin: 0 0 12px;
}

.history-item {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 18px;
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.history-item::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.history-item small {
  flex: none;
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
}

#adjustTaskAssignment,
#deleteTask {
  margin: 0 8px 8px 0;
}

.modal .eyebrow {
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  margin-bottom: 12px;
}

.modal h2 {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.notice-fields {
  margin: 4px 0 6px;
  border-top: 1px solid var(--ink-rule);
}

.notice-fields > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}

.notice-fields dt {
  font: 600 10.5px/1.9 var(--font-sans);
  letter-spacing: .14em;
  color: var(--faint);
}

.notice-fields dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.drawer-kicker,
.modal .eyebrow {
  color: var(--muted);
}

.detail-grid span,
.history h3 {
  color: var(--muted);
}

/* 9 · Today · the day sheet, task rows, multi-day marks ------------------------ */

.daily-progress {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 28px;
  padding: 0 0 26px;
  margin: 0 0 26px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
}

.daily-progress span,
.daily-progress strong {
  display: block;
}

.daily-progress span {
  font-size: 12px;
  color: var(--muted);
}

.daily-progress strong {
  font-size: 13px;
  margin-top: 3px;
}

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

.task-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  flex: none;
  max-width: 100%;
}

/* The name keeps its width; the marks beside it give theirs up first. */
.task-main > :not(.task-name) {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.defer-target {
  color: var(--c-purple);
  font-weight: 600;
}

.status-dot.defer {
  background: var(--c-purple);
}

.fixed-badge {
  color: var(--c-purple-ink);
  background: var(--c-purple-soft);
}

/* 未完成，递延 sits beside 记录完成 as its quieter twin: same shape, warm outline. */
.defer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--c-coral-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--c-coral-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.defer-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

.defer-btn .icon {
  width: 15px;
  height: 15px;
  flex: none;
}


/* One member scope shared by today, the week board and date details. */
.schedule-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 0;
  max-width: none;
  margin: 0;
  padding: 10px var(--page-x);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.schedule-scope strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
}

.schedule-scope span {
  display: block;
  font-size: 12px;
  margin: 0;
  color: var(--muted);
}

.schedule-scope label {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--faint);
}

.schedule-scope select {
  font: inherit;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  max-width: 230px;
  height: 34px;
  padding: 0 30px 0 10px;
  border-radius: 9px;
  background-color: var(--surface);
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.daily-project-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 0 6px 10px;
  border-bottom: 0;
}

.daily-project-meta {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .02em;
}

.daily-project-tasks {
  gap: 9px;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  counter-reset: row;
}

.daily-project-tasks .task-card {
  position: relative;
}

.daily-project-tasks .task-card::before {
  left: -16px;
  top: 50%;
}

.unattached-project .daily-project-kicker {
  color: var(--faint);
}

.assignee-load-hint {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--surface-sunk);
  font: 400 12px/1.6 var(--font-sans) !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
}

.task-card,
.daily-project-card {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.task-card:hover,
.daily-project-card:hover {
  border-color: var(--line-strong);
}

/* A quiet countdown, not an alarm, until the date is actually missed. */
.task-ddl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
  font-size: 12px;
  line-height: 20px;
  border-radius: 6px;
}

.task-ddl em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .7;
}

.task-ddl b {
  font-weight: 600;
}

/* Single-day tasks show the bare date. */
.task-ddl.plain {
  font-size: 12px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
}

.task-ddl.due em {
  opacity: .85;
}

.task-ddl.settled {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--c-green-line);
}

/* "3 天" chip beside the task name. */
.span-badge {
  font-weight: 600;
  border: 1px solid var(--accent-line);
  color: var(--muted);
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-serif);
}

.overdue-text {
  color: var(--danger);
}

/* Lineage marks: an occurrence replaced by its successor, or a carried task. */
.superseded-badge {
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
}

.carried-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--accent-dark);
}

.carried-badge .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.1;
}

.task-list > * {
  animation: wcRiseIn var(--t-slow) var(--ease-out) both;
}

.task-arrow,
.defer-target,
.fixed-badge,
.span-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Small glyphs need a slightly heavier stroke to hold their shape. */
.task-arrow .icon,
.defer-target .icon,
.fixed-badge .icon,
.span-badge .icon {
  stroke-width: 2.1;
}

.schedule-scope > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.schedule-scope select:hover {
  border-color: var(--line-strong);
}

.assignee-tag {
  color: var(--ink-2);
  background: none;
  padding: 0;
  font-weight: 500;
  border-radius: 0;
}

.edit-task-request-btn {
  margin: 0 8px 8px 0;
}

#dateChip {
  min-width: 72px;
  text-align: center;
}

#prevDay:hover {
  transform: translateX(-2px);
}

#nextDay:hover {
  transform: translateX(2px);
}

.daily-progress div span {
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  color: var(--muted);
}

.daily-progress div strong {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 8px;
  letter-spacing: -.01em;
}

.daily-progress .progress-percent {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  min-width: 64px;
  text-align: right;
  color: var(--ink);
}

/* Projects read as blocks: one tinted panel per project, no rules between its
   rows, and a hovered row lifts onto ivory. The edge between projects is the line that matters. */
.daily-project-card {
  margin: 0;
  box-shadow: none;
  overflow: visible;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 18px 18px 10px;
}

.daily-project-card:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.daily-project-kicker {
  display: block;
  font: 600 10px/1.2 var(--font-sans);
  letter-spacing: .18em;
  color: var(--muted);
}

.daily-project-heading h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.005em;
  margin: 6px 0 0;
  font-size: 22px;
}

.task-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px 34px minmax(0, 1fr) 72px 132px 178px 76px 16px;
  gap: 14px;
  align-items: center;
  min-height: 54px;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  counter-increment: row;
  transition: background var(--t) var(--ease);
}

.task-card:last-child {
  border-bottom: 0;
}

.task-card::before,
.daily-project-tasks .task-card::before {
  content: counter(row, decimal-leading-zero);
  position: static;
  display: block;
  width: auto;
  border: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--faint);
  transition: color var(--t) var(--ease);
}

.task-card::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--t-slow) var(--ease-out);
  width: 2px;
  left: 0;
}

.task-card:hover,
.daily-project-tasks .task-card:hover {
  transform: none;
}

.task-card:hover::after,
.task-card:focus-visible::after {
  transform: scaleY(1);
}

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

.task-card .priority {
  justify-self: start;
}

.task-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.task-card .project-tag {
  font-size: 12px;
  color: var(--muted);
  background: none;
  padding: 0;
}

.daily-project-tasks .project-tag {
  display: none;
}

.task-card .assignee-tag,
.task-time,
.task-when,
.task-status {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.task-status {
  display: inline-flex;
  align-items: center;
  color: var(--ink-2);
}

.task-arrow {
  color: var(--line-strong);
  font-size: 15px;
  transition: transform var(--t-slow) var(--ease-spring), color var(--t) var(--ease);
}

.task-card:hover .task-arrow {
  transform: translateX(3px);
  color: var(--ink-2);
}

.fixed-badge,
.span-badge,
.superseded-badge,
.carried-badge,
.defer-target {
  flex: none;
  font-size: 11px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.task-ddl.left {
  color: var(--ink-2);
  background: var(--surface-sunk);
  border-color: var(--line);
}

.task-ddl.due {
  color: var(--accent-dark);
  background: var(--surface);
  border-color: var(--accent-line);
}

.task-ddl.overdue {
  color: var(--danger);
  background: var(--surface);
  border-color: var(--danger-line);
}

.task-card:focus-visible,
.task-card:active {
  background: var(--surface-sunk);
}

.task-card:hover::before {
  color: var(--ink-2);
}

.daily-project-meta,
.task-time {
  color: var(--muted);
}

.task-card,
.daily-project-tasks .task-card {
  border-bottom: 0;
  border-radius: 10px;
  padding: 0 12px 0 6px;
}

.task-card:hover,
.daily-project-tasks .task-card:hover,
.task-card:focus-visible {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(64, 54, 42, .06), 0 0 0 1px var(--line-soft);
}

#todayView .page-intro {
  justify-content: flex-start;
  align-items: center;
  gap: 28px;
}

#todayView .page-intro > .date-chip {
  margin-left: auto;
}

.day-tab {
  position: relative;
  flex: none;
  display: grid;
  justify-items: center;
  width: 92px;
  padding: 14px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--surface) inset, 0 16px 30px -22px rgba(64, 54, 42, .55);
  transform-origin: top center;
}

.day-tab::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 22px;
  border-radius: 14px 14px 0 0;
  background: var(--accent);
}

.day-tab::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 21px;
  height: 0;
  border-top: 1px dashed rgba(255, 253, 249, .7);
}

.day-tab span {
  position: relative;
  z-index: 1;
  margin-top: -9px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--surface);
}

.day-tab strong {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
}

.day-tab small {
  margin-top: 8px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--muted);
}

.day-tab:not(.is-today)::before {
  background: var(--line-strong);
}

.day-tab.turn {
  animation: leafTurn .5s var(--ease-out) both;
}

/* 10 · Week board -------------------------------------------------------------- */

.week-nav {
  display: flex;
  gap: 6px;
}

.week-nav .secondary-btn {
  min-width: 38px;
  padding: 0 12px;
}

.week-nav #backTodayBtn.is-current {
  color: var(--muted);
}

.week-nav .secondary-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.week-board {
  margin-top: -6px;
}

.week-board[data-turn="next"] .week-grid {
  animation: weekFromNext .36s var(--ease-out) both;
}

.week-board[data-turn="prev"] .week-grid {
  animation: weekFromPrev .36s var(--ease-out) both;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: calc(100vh - 290px);
  border-top: 1px solid var(--ink);
}

.week-day {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 8px 52px;
  border-left: 1px solid var(--line-soft);
  transition: background var(--t) var(--ease);
}

.week-day:first-child {
  border-left: 0;
  padding-left: 0;
}

.week-day:last-child {
  padding-right: 0;
}

.week-day:hover {
  background: linear-gradient(180deg, var(--surface-sunk), rgba(247, 244, 237, 0) 60%);
}

.week-day.today {
  background: linear-gradient(180deg, var(--surface-sunk), rgba(247, 244, 237, 0) 75%);
}

.week-day.today::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  background: var(--accent);
}

.week-day.out {
  opacity: .4;
}

.week-day-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  padding: 16px 6px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.week-day:first-child .week-day-head {
  padding-left: 0;
}

.week-day-open {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  text-align: left;
}

.week-day-open span {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--muted);
}

.week-day-open strong {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color var(--t) var(--ease);
}

.week-day-open:hover strong {
  color: var(--accent-dark);
}

.week-day.past .week-day-open strong {
  color: var(--faint);
}

.week-day-open em {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: .1em;
  font-style: normal;
  color: var(--accent-dark);
}

.week-day-head small {
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.week-day-tasks {
  display: grid;
  gap: 6px;
  align-content: start;
}

.week-task {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 9px 8px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color var(--t) var(--ease), transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}

.week-task::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--p2);
}

.week-task.P0::before {
  background: var(--p0);
}

.week-task.P1::before {
  background: var(--p1);
}

.week-task:hover,
.week-task:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -16px rgba(64, 54, 42, .6);
  outline: none;
}

/* Merged periods sit on the board as a small stack of sheets. */
.week-task.is-stacked {
  margin: 0 5px 5px 0;
  box-shadow: 3px 3px 0 -1px var(--surface), 3px 3px 0 0 var(--line), 6px 6px 0 -1px var(--surface), 6px 6px 0 0 var(--line-soft);
}

.week-task.is-stacked:hover,
.week-task.is-stacked:focus-visible {
  box-shadow: 3px 3px 0 -1px var(--surface), 3px 3px 0 0 var(--line-strong), 6px 6px 0 -1px var(--surface), 6px 6px 0 0 var(--line), 0 12px 20px -16px rgba(64, 54, 42, .6);
}


.week-task-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.week-task-meta {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-task.cont {
  padding: 5px 9px 5px 12px;
  background: transparent;
  border-style: dashed;
}

.week-task.cont::before {
  top: 5px;
  bottom: 5px;
  opacity: .55;
}

.week-task.cont .week-task-name {
  font-size: 12px;
  color: var(--muted);
  -webkit-line-clamp: 1;
}

.week-task.cont .week-task-meta {
  display: none;
}

#calendarView .page-intro {
  border-bottom: 0;
  padding-bottom: 16px;
  margin-bottom: 0;
}

#calendarView .page-intro::after {
  display: none;
}

.week-task.done .week-task-name {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.week-task.done::before {
  background: var(--line-strong);
}

.week-day-more {
  padding: 4px 2px;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
}

.week-day-more:hover {
  color: var(--ink);
}

.week-day-carried {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 2px 0;
  font-size: 11.5px;
  color: var(--faint);
}

.week-day-carried .icon {
  width: 12px;
  height: 12px;
  flex: none;
}

.week-day-add {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.week-day:first-child .week-day-add {
  left: 0;
}

.week-day:hover .week-day-add,
.week-day-add:focus-visible {
  opacity: 1;
}

.week-day-add:hover {
  color: var(--accent-dark);
  border-color: var(--accent-line);
}

/* 11 · Projects ---------------------------------------------------------------- */

.project-tag {
  color: var(--ink-2);
  background: var(--surface-sunk);
  padding: 3px 7px;
  border-radius: 4px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 13px;
  margin-bottom: 25px;
}

.project-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.project-title h3 {
  font-size: 15px;
  margin: 0;
}

.project-status {
  font-size: 11px;
  color: var(--success);
  background: var(--success-soft);
  border-radius: 4px;
  padding: 4px 6px;
}

.project-status.is-overdue {
  color: var(--danger);
  background: rgba(190, 79, 62, .1);
}

.beyond-chip {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--danger);
  background: rgba(190, 79, 62, .1);
  white-space: nowrap;
}

.project-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 9px 0 17px;
  min-height: 32px;
}

.project-color {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 3px;
  background: var(--bar-ink);
}

.project-members {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.project-members .ghost-btn {
  font-size: 10px;
  padding: 6px 8px;
  white-space: nowrap;
}

#projectGrid {
  grid-template-columns: 1fr;
  gap: 18px;
}

.project-node-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 4px 6px 4px;
  flex-wrap: wrap;
}

.project-node .project-title {
  justify-content: flex-start;
  gap: 12px;
  align-items: baseline;
}

.project-node p {
  min-height: 0;
  line-height: 1.6;
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.project-node-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 8px;
}

.project-node-actions > button {
  flex: none;
}

.project-node .project-members {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 10px 6px 0;
  padding: 8px 0 4px;
  border-top: 0;
}

.project-tree-label span {
  border-radius: 5px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0;
  background: none;
  padding: 0;
  color: var(--muted);
}

.project-child-row::before {
  left: -22px;
  top: 50%;
  content: counter(prow, decimal-leading-zero);
  position: static;
  width: 22px;
  border: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--faint);
}

.project-task-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 64px 64px 56px 14px;
  align-items: center;
  gap: 14px;
  padding: 0;
  min-height: 54px;
}

.project-task-open strong {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-task-open > span:not(.priority) {
  color: var(--muted);
  white-space: nowrap;
  font-size: 12.5px;
}

.project-child-row .ghost-btn {
  flex-shrink: 0;
  font-size: 13px;
  background: transparent;
}

.project-task-empty {
  font-size: 14px;
  margin: 0;
  color: var(--muted);
  padding: 10px 6px 14px;
}

/* A fixed task under a project is listed once, as its rule. */
.project-fixed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 6px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.project-fixed-row small {
  font-size: 12px;
  color: var(--muted);
}

.project-node .project-status {
  white-space: nowrap;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: .14em;
  padding: 5px 8px;
  border-radius: 99px;
  color: var(--c-green-ink);
  background: var(--success-soft);
}

/* Sort control and drag-to-reorder for a project's task list. */
.project-tree-label {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  color: var(--faint);
  background: transparent;
  padding: 12px 6px 8px;
  border-top: 0;
  border-bottom: 0;
}

.project-task-sort {
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  margin-left: auto;
  height: 30px;
  font: 500 12px var(--font-sans);
  letter-spacing: 0;
  border-radius: 8px;
}

.project-child-row[draggable="true"] {
  cursor: grab;
  grid-template-columns: 22px minmax(0, 1fr) 88px;
}

.project-child-row.dragging {
  opacity: .5;
}

.drag-handle {
  color: var(--faint);
  font-size: 13px;
  letter-spacing: -2px;
  user-select: none;
  display: none;
}

.project-node {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  box-shadow: none;
  overflow: visible;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 18px 18px 10px;
}

/* The collaborator list inside the invite dialog. */
.member-checkboxes .member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-sunk);
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
}

.member-checkboxes .member-row strong {
  font-weight: 600;
}

.member-checkboxes .member-row small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}

.member-checkboxes .member-row .remove-member {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  flex: none;
}

.member-checkboxes .member-row .remove-member.is-armed {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--accent-soft-2);
}

.project-node:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.project-node .project-title h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
}

.project-node .secondary-btn,
.project-node .primary-btn {
  font-size: 13px;
}

.project-task-tree {
  margin: 0;
  padding: 0;
  border: 0;
  counter-reset: prow;
}

.project-child-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 54px;
  border: 0;
  background: transparent;
  counter-increment: prow;
  transition: background var(--t) var(--ease);
}

.project-child-row > .ghost-btn {
  grid-column: 3;
  justify-self: end;
}

.project-child-row:last-child {
  border-bottom: 0;
}

.project-child-row::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--t-slow) var(--ease-out);
  width: 2px;
  left: 0;
}

.project-child-row:hover {
  border-color: var(--hair);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(64, 54, 42, .06), 0 0 0 1px var(--line-soft);
}

.project-child-row:hover::after {
  transform: scaleY(1);
}

.project-task-open .child-assignee {
  color: var(--ink-2) !important;
}

.project-task-open > span[aria-hidden] {
  color: var(--line-strong);
  transition: transform var(--t-slow) var(--ease-spring), color var(--t) var(--ease);
}

.project-child-row:hover .project-task-open > span[aria-hidden] {
  transform: translateX(3px);
  color: var(--ink-2);
}

.project-child-row[draggable="true"]::before {
  content: '⋮⋮';
  letter-spacing: -2px;
  color: var(--line-strong);
  cursor: grab;
}

.project-child-row:hover::before {
  color: var(--ink-2);
}

/* One terracotta action per screen: per-project actions step down to quiet buttons. */
.project-node-actions .primary-btn {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}

.project-node-actions .primary-btn::after {
  display: none;
}

.project-node-actions .primary-btn .icon-slot {
  color: var(--accent);
}

.project-node-actions .primary-btn:hover {
  background: var(--surface-sunk);
  border-color: var(--line-strong);
  box-shadow: none;
}

.project-node-actions .ghost-btn {
  border-color: transparent;
  color: var(--muted);
}

.project-node-actions .ghost-btn:hover {
  color: var(--danger);
  background: transparent;
  border-color: transparent;
}

.project-child-row,
.project-child-row[draggable="true"] {
  border-bottom: 0;
  border-radius: 10px;
  padding: 0 10px 0 6px;
}

/* New to you: the project gets a 新 chip and each new task a red dot in place
   of its number, until it is opened. */
.new-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 99px;
  vertical-align: 3px;
  font: 600 10px/1 var(--font-sans);
  color: var(--surface);
  background: var(--danger);
  animation: wcPop var(--t) var(--ease-spring) both;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.project-node.is-seen .new-chip {
  opacity: 0;
  transform: scale(.6);
}

/* A new task keeps its number; the number turns red and wears a small dot. */
.project-child-row.is-new::before {
  color: var(--danger);
  font-weight: 600;
  background: radial-gradient(circle at calc(100% - 2px) 3px, var(--danger) 0 2.5px, transparent 3px);
  transition: color var(--t) var(--ease);
}

.project-child-row.is-new.is-seen::before {
  color: var(--faint);
  font-weight: 400;
  background: none;
}

/* 调整指派 on every row is noise; it comes up with the row under a pointer. */
@media (hover: hover) {
  .project-child-row > .assign-project-task {
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
  }

  .project-child-row:hover > .assign-project-task,
  .project-child-row:focus-within > .assign-project-task {
    opacity: 1;
  }
}


/* Handed-out 临时任务 name the other person, which needs a wider column. */
.temp-task-node .project-task-open {
  grid-template-columns: 34px minmax(0, 1fr) 96px 64px 56px 14px;
}

.temp-task-node .child-assignee {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* What closing a project early leaves undone, said before it happens. */
.project-close-note {
  display: grid;
  gap: 4px;
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  background: var(--warn-soft);
  font-size: 13px;
  color: var(--ink-2);
}

.project-close-note strong {
  color: var(--p1-ink);
}

/* 11b · 项目空间 — the directory rail at the far left, the page beside it ---- */
#projectsView.active-view {
  display: grid;
  grid-template-columns: var(--project-navigation-width, 220px) minmax(0, 1fr);
  transition: grid-template-columns var(--t) var(--ease-out);
  max-width: none;
  margin: 0;
  padding: 0;
}

.projects-page {
  width: 100%;
  max-width: 1240px;
  min-width: 0;
  margin: 0 auto;
  padding: 40px var(--page-x) 88px;
}

.project-space-main {
  min-width: 0;
}

.project-title-link { font: inherit; color: inherit; text-align: left; padding: 0; }
.project-title-link:hover { color: var(--accent-dark); }

.projects-view .project-node-actions {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
}

.project-nav-rail {
  min-width: 0;
  background: var(--surface-sunk);
  border-right: 1px solid var(--line-soft);
}

.project-nav {
  position: sticky;
  top: 60px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 22px 10px 24px;
  overscroll-behavior: contain;
  min-width: 0;
}


@media (min-width: 1181px) {
  .project-nav.is-nav-narrow .project-nav-add,
  .project-nav.is-nav-narrow .project-nav-edit,
  .project-nav.is-nav-narrow .project-nav-empty,
  .project-nav.is-nav-narrow .project-nav-label,
  .project-nav.is-nav-narrow .project-nav-caret,
  .project-nav.is-nav-narrow b { display: none; }
  .project-nav.is-nav-collapsed .nav-text { flex: 0; width: 0; opacity: 0; }
  .project-nav.is-nav-collapsed .project-nav-head { justify-content: center; padding-left: 0; padding-right: 0; }
  .project-nav.is-nav-narrow .new-chip {
    position: absolute; right: 2px; top: 3px; width: 6px; min-width: 0; height: 6px;
    padding: 0; border-radius: 50%; font-size: 0;
  }
  .project-nav.is-nav-collapsed .project-nav-item,
  .project-nav.is-nav-collapsed .project-nav-toggle { justify-content: center; gap: 0; padding-left: 4px; padding-right: 4px; }
  .project-nav.is-nav-narrow .nav-row[data-level="1"] { width: 100%; margin-left: 0; }
  .project-nav.is-nav-narrow .nav-row[data-level="1"]::before { display: none; }
}

.project-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  gap: 4px;
}

.project-nav-add,
.project-nav-edit {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.project-nav-add:hover,
.project-nav-edit:hover {
  background: var(--rail-hover);
  color: var(--ink);
}

.project-nav-add .icon,
.project-nav-edit .icon {
  width: 14px;
  height: 14px;
}

.project-nav-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-nav-item,
.project-nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.project-nav-item span,
.project-nav-toggle span:not(.nav-folder-icon) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-nav-item b,
.project-nav-toggle b {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
}

.project-nav-item:hover,
.project-nav-folder-row:hover {
  background: var(--rail-hover);
}

.project-nav-toggle:hover {
  background: transparent;
}

.project-nav-item.is-on,
.project-nav-folder-row.is-on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

.project-nav-item.is-on,
.project-nav-folder-row.is-on .project-nav-toggle {
  font-weight: 600;
}

.project-nav-item .icon,
.project-nav-toggle .icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--muted);
}

.project-nav-folder-row {
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 8px;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.project-nav-folder-row .project-nav-toggle {
  padding-left: 0;
}

.project-nav-caret {
  display: grid;
  place-items: center;
  width: 22px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.project-nav-caret .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--t-fast) var(--ease);
}

.project-nav-folder-row.is-open .project-nav-caret .icon {
  transform: rotate(90deg);
}

.project-nav-folder-row .project-nav-edit {
  opacity: 0;
  margin-right: 4px;
}

.project-nav-folder-row:hover .project-nav-edit,
.project-nav-edit:focus-visible {
  opacity: 1;
}

/* The folder glyph is two icons, shut and open, so it can open under a drag. */
.nav-folder-icon {
  position: relative;
  display: grid;
  width: 16px;
  height: 16px;
  flex: none;
}

.nav-folder-icon .icon {
  grid-area: 1 / 1;
  transition: opacity .16s var(--ease), transform .28s cubic-bezier(.3, 1.6, .5, 1);
}

.nav-folder-icon .is-open {
  opacity: 0;
}

.project-nav-folder-row.is-drop {
  background: var(--accent-soft);
  box-shadow: 0 0 0 1.5px var(--accent-line);
}

.project-nav-folder-row.is-drop .nav-folder-icon .is-shut {
  opacity: 0;
}

.project-nav-folder-row.is-drop .nav-folder-icon .is-open {
  opacity: 1;
  color: var(--accent-dark);
  transform: scale(1.22) translateY(-1px);
}

.project-nav-folder-row.is-swallow .nav-folder-icon .is-shut {
  animation: navGulp .5s cubic-bezier(.3, 1.6, .5, 1) both;
}

.project-nav-folder-row.is-swallow .nav-folder-icon .is-open {
  animation: navGulpOpen .24s var(--ease) both;
}

@keyframes navGulp {
  0% { opacity: 0; transform: scale(1.22); }
  40% { opacity: 1; transform: scale(.84); color: var(--accent-dark); }
  70% { transform: scale(1.08); }
  100% { transform: none; }
}

@keyframes navGulpOpen {
  from { opacity: 1; transform: scale(1.22); color: var(--accent-dark); }
  to { opacity: 0; transform: scale(.9); }
}

/* A folder's projects hang off one guide line. */
.nav-row[data-level="1"] {
  position: relative;
  width: calc(100% - 22px);
  margin-left: 22px;
  font-size: 12.5px;
}

.nav-row[data-level="1"]::before {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -11px;
  border-left: 1px solid var(--line);
}

.project-nav-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--success);
}

.project-nav-dot.is-pending,
.project-nav-dot.is-pending_completion {
  background: var(--warn);
}

.project-nav-dot.is-paused,
.project-nav-dot.is-rejected {
  background: var(--faint);
}

.project-nav-label,
.project-nav-empty {
  padding: 12px 8px 4px;
  font-size: 11px;
  color: var(--faint);
}

.project-nav-empty {
  margin: 0 0 0 22px;
  padding: 6px 8px;
}

/* Dragging. A row strains at its slot, then breaks loose with a little soil
   (is-tense, navPop, navCrumb); a line says where it would go — solid at the
   root, an indented elbow inside a folder — and it lands with a short wobble. */
.nav-row {
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), height .22s var(--ease), opacity .18s var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.nav-row.is-tense {
  transition: none;
}

.nav-row.is-lifted {
  height: 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.nav-row.is-lifted::before {
  display: none;
}

body.nav-dragging,
body.nav-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.nav-ghost {
  position: fixed;
  transition: none;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  background: var(--surface);
  color: var(--ink);
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -12px rgba(64, 54, 42, .45);
  will-change: transform;
  animation: navPop .36s cubic-bezier(.2, 1.7, .4, 1) both;
}

.nav-ghost::before {
  display: none;
}

.nav-ghost .project-nav-edit {
  display: none;
}

@keyframes navPop {
  0% { scale: 1; box-shadow: 0 0 0 1px var(--line); }
  45% { scale: 1.09; }
  100% { scale: 1.03; }
}

.nav-ghost-file {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  color: var(--accent-dark);
}

.nav-ghost-file .icon {
  width: 16px;
  height: 16px;
}

.nav-ghost.is-filing > :not(.nav-ghost-file) {
  opacity: 0;
  transition: opacity .1s var(--ease);
}

.nav-ghost.is-filing .nav-ghost-file {
  opacity: 1;
  transition: opacity .12s .06s var(--ease);
}

.nav-crumb {
  position: fixed;
  z-index: 89;
  width: 4px;
  height: 4px;
  border-radius: 1.5px;
  background: var(--line-strong);
  pointer-events: none;
  animation: navCrumb .55s cubic-bezier(.2, .7, .4, 1) forwards;
}

@keyframes navCrumb {
  0% { opacity: .9; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}

.nav-drop-line {
  position: absolute;
  top: -1px;
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: transform .14s var(--ease-out), left .22s cubic-bezier(.3, 1.6, .5, 1), opacity .12s var(--ease), background .15s var(--ease);
}

.nav-drop-line.is-on {
  opacity: 1;
}

.nav-drop-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-sunk);
}

.nav-drop-line.is-nested {
  left: 33px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 9px);
}

.nav-drop-line.is-nested::before {
  left: -22px;
  top: -14px;
  width: 20px;
  height: 15px;
  border: 0;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  border-radius: 0 0 0 6px;
  background: none;
}

.nav-row.is-landed {
  animation: navLand .62s cubic-bezier(.3, 1.4, .5, 1) both;
  transform-origin: 24px 50%;
}

@keyframes navLand {
  0% { transform: translateY(-3px) scale(.97); background: var(--accent-soft); }
  30% { transform: rotate(-2.2deg) scale(1.02); }
  52% { transform: rotate(1.4deg); }
  72% { transform: rotate(-.6deg); }
  100% { transform: none; }
}

.project-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -14px 0 14px;
}

.project-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.project-sort select {
  font: inherit;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
}

#projectGrid .project-card[data-project] {
  cursor: pointer;
}

#projectGrid .project-card[data-project]:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.project-space {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: spaceIn .32s var(--ease-out) both;
}

@keyframes spaceIn {
  from { opacity: 0; transform: translateY(6px); }
}

.space-description {
  margin: 0 2px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.space-section {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}

.space-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.space-head h2 {
  margin: 0;
  font-size: 15px;
}

/* Seven short day names need room to read as separate choices. */
.week-start-seg {
  gap: 2px;
  min-width: 0;
}

.week-start-seg .rule-opt {
  min-width: 42px;
  padding: 0 10px;
}

@media (max-width: 560px) {
  .week-start-seg .rule-opt {
    min-width: 0;
    padding: 0 4px;
  }
}

.space-head .primary-btn.is-idle {

  height: auto;
  padding: 0 2px;
  background: transparent;
  box-shadow: none;
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
  cursor: default;
}

.space-head .primary-btn.is-idle::after {
  display: none;
}

.space-head h2 span {

  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
}

.space-head h2 .space-window {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
}

.space-tasks .project-node {
  padding: 0;
  background: transparent;
  border: 0;
}

.space-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.space-section .doc-edit {
  min-height: 5em;
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-sunk);
}

.space-section .doc-edit:empty::before {
  content: attr(data-placeholder);
}

.space-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 16px;
}

.space-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  color: var(--faint);
  font-size: 12px;
}

.space-step::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}

.space-step.is-past::before,
.space-step.is-now::before {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}

.space-step.is-now::before {
  right: 50%;
}

.space-step i {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
}

.space-step.is-past i,
.space-step.is-now i {
  border-color: var(--accent);
  background: var(--accent);
}

.space-step.is-now i {
  box-shadow: 0 0 0 4px var(--accent-soft-2);
}

.space-step strong {
  color: var(--ink-2);
  font-size: 13px;
}

.space-step:not(.is-past):not(.is-now) strong {
  color: var(--muted);
}

.space-meters {
  display: grid;
  gap: 10px;
}

.space-meter {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.space-meter b {
  font-weight: 500;
  color: var(--ink-2);
}

.space-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--muted);
}

.space-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}

.space-folder select {
  min-width: 0;
  max-width: 100%;
  flex: 1;
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-2);
}

.staff-list {
  display: flex;
  flex-direction: column;
}

.staff-row {
  display: grid;
  grid-template-columns: auto 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}

.staff-row:first-child {
  border-top: 0;
}

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

.staff-name strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-name small,
.staff-load {
  font-size: 11px;
  color: var(--faint);
}

.staff-role {
  width: 100%;
  padding: 6px 9px;
  font: inherit;
  font-size: 12.5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.staff-role:hover {
  border-color: var(--line);
}

.staff-role:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--surface);
}

.staff-role-text {
  font-size: 12.5px;
  color: var(--ink-2);
}

.space-upload {
  cursor: pointer;
}

.file-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.file-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}

.file-row:first-child {
  border-top: 0;
}

.file-ext {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
}

.file-name:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.file-row small {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.file-delete {
  padding: 4px;
}

.file-delete .icon {
  width: 13px;
  height: 13px;
}

.space-drop-hint {
  margin: 0;
  padding: 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.space-files.is-over .space-drop-hint {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

@media (max-width: 1400px) {
  #projectsView.active-view {
    grid-template-columns: var(--project-navigation-width, 208px) minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  #projectsView.active-view {
    grid-template-columns: 1fr;
  }

  .project-nav-rail {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .project-nav {
    position: static;
    max-height: 260px;
    padding: 14px 12px;
  }
  .project-nav > .nav-resize-handle { display: none; }
  .project-nav.is-nav-collapsed > :not(.project-nav-head) { display: none; }
}

@media (max-width: 760px) {
  .space-section {
    padding: 14px;
  }

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

  .staff-role,
  .staff-role-text,
  .staff-load {
    grid-column: 1 / -1;
  }

  .file-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .file-row small {
    grid-column: 2;
    grid-row: 2;
  }

  .space-folder {
    margin-left: 0;
  }
}

/* 12 · Timeline ---------------------------------------------------------------- */

.timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -6px 0 16px;
}

.timeline-toolbar #timelineVisibleRange {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.timeline-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.timeline-controls .secondary-btn {
  height: 34px;
}

.timeline-controls button:first-child,
.timeline-controls button:last-child {
  padding: 0;
  width: 34px;
}

.timeline-scroll {
  width: 100%;
  overflow: auto;
  max-height: calc(100vh - 300px);
  min-height: 300px;
  overscroll-behavior-x: contain;
  outline-offset: 4px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-top: 0;
}

.gantt-grid {
  --label-width: 220px;
  width: calc(var(--label-width) + var(--track-width));
  min-height: 300px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.gantt-header,
.gantt-row {
  display: grid;
  grid-template-columns: var(--label-width) var(--track-width);
}

.gantt-header {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 85px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.gantt-corner {
  position: sticky;
  left: 0;
  z-index: 6;
  padding: 24px 18px 15px;
  box-shadow: 4px 0 8px rgba(64,54,42,.025);
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
}

.gantt-axis {
  width: var(--track-width);
}

.gantt-months {
  height: 30px;
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-sunk);
}

.gantt-months > span {
  position: absolute;
  height: 30px;
  line-height: 30px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
  padding: 0 10px;
  font-size: 11px;
  color: var(--ink-2);
}

.gantt-months b {
  font-weight: 600;
  position: sticky;
  left: calc(var(--label-width) + 10px);
  display: inline-block;
}

.gantt-dates {
  display: flex;
  height: 54px;
}

.gantt-date {
  width: var(--day-width);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--line-soft);
  font-size: 11px;
}

.gantt-date.weekend {
  color: var(--faint);
  background: var(--surface-sunk);
}

.gantt-date.is-today {
  background: var(--accent-soft-2);
  color: var(--danger);
}

.gantt-date.is-today strong {
  width: 24px;
  height: 23px;
  display: grid;
  place-items: center;
  color: var(--surface);
  background: var(--accent);
  border-radius: 6px;
  padding: 1px 5px;
}

.gantt-date.is-today small {
  color: var(--danger);
}

.gantt-row {
  min-height: 96px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t) var(--ease);
}

.gantt-row:last-child {
  border-bottom: 0;
}

.gantt-project {
  position: sticky;
  left: 0;
  z-index: 3;
  padding: 17px 18px;
  box-shadow: 4px 0 8px rgba(64,54,42,.035);
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
}

.gantt-project > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gantt-project strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.gantt-project small {
  display: block;
  font-size: 10px;
  margin: 7px 0 5px 16px;
}

.gantt-project small span {
  color: var(--faint);
}

.gantt-range {
  display: block;
  font-size: 9px;
  white-space: nowrap;
  margin-left: 16px;
  font-family: var(--font-serif);
}

.gantt-track {
  position: relative;
  background-image: repeating-linear-gradient(to right,transparent 0,transparent calc(var(--day-width) - 1px),var(--line-soft) calc(var(--day-width) - 1px),var(--line-soft) var(--day-width));
  isolation: isolate;
}

.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--accent);
  width: 2px;
  opacity: .8;
}

.gantt-bar {
  position: absolute;
  top: 25px;
  border: 1px solid var(--bar-border);
  background: var(--bar-bg);
  color: var(--bar-ink);
  display: flex;
  align-items: center;
  padding: 0 12px;
  white-space: nowrap;
  z-index: 1;
  height: 26px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}

.gantt-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  position: sticky;
  left: calc(var(--label-width) + 12px);
  max-width: 100%;
}

.gantt-bar:hover,
.gantt-bar:focus-visible {
  filter: saturate(1.3);
  outline-offset: 2px;
  z-index: 2;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -14px rgba(64, 54, 42, .6);
  outline: none;
}

.gantt-bar.open-ended {
  border-style: dashed;
  background: repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.3) 6px 12px),var(--bar-bg);
  border-radius: 8px 0 0 8px;
}

.gantt-bar.open-ended::after {
  content: '→';
  position: absolute;
  right: 5px;
  font-size: 19px;
}

.gantt-bar.awaiting {
  opacity: .65;
  border-style: dashed;
}

.gantt-invalid {
  display: block;
  margin: 32px 18px;
  font-size: 12px;
  color: var(--danger);
}

.gantt-date strong {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.timeline-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.timeline-toolbar strong {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
}

.gantt-months,
.gantt-corner {
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .12em;
}

.gantt-dates strong,
.gantt-date strong {
  font-family: var(--font-serif);
  font-weight: 600;
}

#timelineView .page-intro {
  border-bottom: 0;
  padding-bottom: 16px;
  margin-bottom: 8px;
}

#timelineView .page-intro::after {
  display: none;
}

#timelineVisibleRange {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .12em;
  color: var(--muted);
  margin-top: 6px;
}

.gantt-corner strong {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--muted);
}

.gantt-months span b {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--muted);
}

.gantt-date small {
  font-size: 10px;
  color: var(--faint);
}

.gantt-date.weekend strong {
  color: var(--faint);
}

.gantt-row:hover {
  background: var(--surface-sunk);
}

.gantt-row:hover .gantt-project {
  background: var(--surface-sunk);
}

.gantt-project small,
.gantt-range {
  color: var(--muted);
}

/* 13 · Inbox ------------------------------------------------------------------- */

.notification-dot {
  background: var(--accent);
  border-radius: 50%;
  position: absolute;
  animation: notifyPulse 2.4s var(--ease) infinite;
  right: 8px;
  top: 8px;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 2px var(--paper);
}

.inbox-icon {
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.inbox-copy {
  flex: 1;
  min-width: 0;
}

.unread-dot {
  display: inline-block;
  border-radius: 50%;
  margin: 0 0 2px 7px;
  animation: notifyPulse 1.6s infinite;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  vertical-align: 2px;
  background: var(--accent);
  box-shadow: none;
}

.inbox-actions {
  display: flex;
  margin-top: 14px;
  gap: 8px;
}

.notification-detail {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inbox-item:hover {
  border-color: var(--line-strong);
}

.inbox-list > * {
  animation: wcRiseIn var(--t-slow) var(--ease-out) both;
}

.inbox-icon .icon {
  stroke-width: 2.1;
}

.inbox-list {
  display: block;
  gap: 0;
  border-top: 1px solid var(--ink-rule);
}

.inbox-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  gap: 18px;
  align-items: start;
  padding: 20px 8px 20px 4px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--t) var(--ease), padding var(--t-slow) var(--ease-out);
}

.inbox-item::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--t-slow) var(--ease-out);
  width: 2px;
  left: -14px;
}

.inbox-item:hover,
.inbox-item:focus-visible {
  transform: none;
  box-shadow: none;
  outline: none;
  padding-left: 14px;
  background: var(--surface-sunk);
}

.inbox-item:hover::after,
.inbox-item:focus-visible::after {
  transform: scaleY(1);
}

.inbox-item.unread {
  border-left: 0;
}

.inbox-copy strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.inbox-item:not(.unread) .inbox-copy strong {
  font-weight: 500;
  color: var(--ink-2);
}

.inbox-copy p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
}

.inbox-copy small {
  display: block;
  margin-top: 8px;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .12em;
  color: var(--faint);
}

.inbox-item .task-arrow {
  margin-top: 12px;
}

.inbox-item:hover .task-arrow {
  transform: translateX(3px);
  color: var(--ink-2);
}

.inbox-actions .primary-btn,
.inbox-actions .secondary-btn {
  height: 32px;
  font-size: 12px;
  padding: 0 14px;
}

.inbox-item.approval-pending .inbox-icon {
  background: var(--warn-soft);
  color: var(--p1-ink);
  box-shadow: inset 0 0 0 1px var(--warn-line);
}

.inbox-item.unread .inbox-icon {
  animation: notifyPulse 2s infinite;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* 14b · Inbox housekeeping ------------------------------------------------- */

.inbox-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: -12px 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-sunk);
  font-size: 13px;
}

.inbox-toolbar .secondary-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
}

.inbox-pick-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

.inbox-picked {
  margin-right: auto;
  color: var(--muted);
}

.inbox-pick {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.inbox-pick input,
.inbox-pick-all input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

/* The card itself toggles the choice, so the box only shows it. */
.inbox-pick input {
  pointer-events: none;
}

.inbox-item.is-managing {
  cursor: pointer;
}

.inbox-item.is-picked {
  background: var(--accent-soft);
}

.inbox-delete {
  position: absolute;
  top: 14px;
  right: 30px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t) var(--ease-out), color var(--t), border-color var(--t), background var(--t);
}

.inbox-delete .icon {
  width: 15px;
  height: 15px;
}

.inbox-item:hover .inbox-delete,
.inbox-item:focus-within .inbox-delete {
  opacity: 1;
}

.inbox-delete:hover,
.inbox-delete:focus-visible {
  color: var(--p0);
  border-color: var(--line);
  background: var(--surface);
}

@media (hover: none) {
  .inbox-delete {
    opacity: 1;
  }
}

/* 14c · Archive room · one line-drawn archive box per month ------------------- */

.archive-cabinet {
  container-type: inline-size;
}

/* The box is drawn in one orthographic view (--view), receding to the upper
   left so that left on screen, like left on the ruler, is earlier. Sizes: box
   width, folder height, front, sides, folder spacing and how far a picked
   folder lifts. */
.archive-room {
  --ink-line: rgba(31, 27, 21, .6);
  --view: rotateX(-26deg) rotateY(36deg);
  --dw: 380px;
  --fh: 190px;
  --fp: 70px;
  --sh: 92px;
  --step: 18px;
  --lift: 118px;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: clamp(600px, calc(100vh - 270px), 800px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(circle at 1px 1px, rgba(31, 27, 21, .1) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--surface);
  isolation: isolate;
}

.archive-room.is-empty {
  display: grid;
  place-items: center;
}

.box-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px 0;
}

.box-title strong {
  font: 600 20px/1.3 var(--font-serif);
  color: var(--ink);
}

.box-title small {
  font-size: 12.5px;
  color: var(--muted);
}

/* The whole stage is the slide area: the pointer anywhere over it picks the
   nearest folder. Vertical swipes still scroll the page on touch screens. */
.box-stage {
  position: relative;
  min-height: 0;
}

.drawer-stage {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.box-step {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 8px 18px -14px rgba(31, 27, 21, .5);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}

.box-step.is-prev {
  left: 16px;
}

.box-step.is-next {
  right: 16px;
}

.box-step:hover:not(:disabled) {
  border-color: var(--accent-line);
  color: var(--accent-dark);
}

.box-step:disabled {
  opacity: .35;
  cursor: default;
}

.box-step svg {
  width: 18px;
  height: 18px;
}

.open-drawer {
  --dd: max(200px, calc(var(--n) * var(--step) + 48px));
  position: absolute;
  left: calc(50% - var(--dw) / 2);
  bottom: 10%;
  width: var(--dw);
  height: var(--fh);
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: translate(var(--shift, 0px), var(--shift-y, 0px)) scale3d(var(--fit, 1), var(--fit, 1), var(--fit, 1)) var(--view);
}

.open-drawer > span {
  position: absolute;
  bottom: 0;
  box-shadow: inset 0 0 0 1px var(--ink-line);
}

.open-drawer > .od-ground {
  left: -16px;
  bottom: -1px;
  width: calc(100% + 32px);
  height: calc(var(--dd) + 32px);
  border-radius: 4px;
  transform-origin: 50% 100%;
  transform: translateZ(16px) rotateX(90deg);
  background: rgba(31, 27, 21, .045);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.od-floor {
  left: 0;
  width: 100%;
  height: var(--dd);
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
  background: var(--paper-2);
}

/* Seen from the right, the left wall shows its outside and the right wall
   its inside. */
.od-side {
  width: var(--dd);
  height: var(--sh);
  background: #F2EEE4;
}

.od-side.is-left {
  left: 0;
  transform-origin: 0 100%;
  transform: rotateY(90deg);
}

.od-side.is-right {
  right: 0;
  transform-origin: 100% 100%;
  transform: rotateY(-90deg);
  background: var(--paper);
}

.od-back {
  left: 0;
  width: 100%;
  height: var(--sh);
  transform: translateZ(calc(var(--dd) * -1));
  background: var(--paper);
}

/* Each folder is a still box the size of its face; the tab hangs above it and
   the sheet is what lifts when the folder is picked. */
.archive-file {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: calc(var(--fh) - 25px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translateZ(calc(-28px - var(--i, 0) * var(--step)));
}

.archive-file .file-body {
  display: none;
}

.file-sheet {
  position: absolute;
  inset: 0;
  transition: transform .3s var(--ease-out), opacity .2s;
}

.file-tab {
  position: absolute;
  z-index: 1;
  top: -25px;
  left: calc(4% + var(--tab) * 23%);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  width: 21%;
  height: 26px;
  padding: 5px 10px 0;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--surface);
  font-size: 10.5px;
  white-space: nowrap;
  color: var(--muted);
}

.file-tab b {
  font: 600 14px/1 var(--font-serif);
  color: var(--ink);
}

.file-face {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink-line);
  border-radius: 2px 6px 2px 2px;
  background: var(--surface);
  transition: background-color .25s, border-color .25s;
}

/* Guides from the picked folder back down to its place in the stack. */
.file-sheet::before,
.file-sheet::after {
  content: '';
  position: absolute;
  top: 100%;
  height: var(--lift);
  border-left: 1.5px dashed var(--accent);
  opacity: 0;
  transition: opacity .2s;
}

.file-sheet::before {
  left: 10%;
}

.file-sheet::after {
  right: 10%;
}

.archive-file.is-picked .file-sheet {
  transform: translateY(calc(var(--lift) * -1));
}

.archive-file.is-picked .file-sheet::before,
.archive-file.is-picked .file-sheet::after {
  opacity: 1;
  transition-delay: .12s;
}

.archive-file.is-picked .file-tab {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.archive-file.is-picked .file-tab b {
  color: var(--accent-dark);
}

.archive-file.is-picked .file-face {
  border-color: var(--accent);
  background:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(217, 119, 87, .3) 13px 14.5px) 20px 26px / 60% 58% no-repeat,
    var(--accent-soft);
}

/* Opening: the folder rises a little further while the brief loads, then
   leaves the box while the dialog stands in for it. */
.archive-file.is-opening .file-sheet {
  transform: translateY(calc(var(--lift) * -1 - 26px));
}

.archive-file.is-out .file-sheet {
  opacity: 0;
}

.od-front {
  left: -6px;
  right: -6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--fp);
  border-radius: 3px;
  background: var(--surface);
  transform: translateZ(2px);
  transform-style: preserve-3d;
}

/* The front board's top and end, so it reads as a solid board. */
.od-front::before,
.od-front::after {
  content: '';
  position: absolute;
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--ink-line);
}

.od-front::before {
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}

.od-front::after {
  top: 0;
  left: 0;
  bottom: 0;
  width: 14px;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background: #F2EEE4;
}

.od-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 14px 3px;
  border-radius: 2px;
  background: var(--accent);
  color: rgba(255, 253, 249, .85);
  font-size: 10.5px;
  transform: translateZ(1px);
}

.od-label b {
  font: 600 15px/1.3 var(--font-serif);
  color: var(--surface);
}

.od-pull {
  width: 72px;
  height: 12px;
  border: 1.5px solid var(--ink-line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  transform: translateZ(1px);
}

/* Under the box: the picked brief in flat type, and the month's date ruler. */
.box-foot {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 0 24px 22px;
}

.drawer-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 26px -22px rgba(31, 27, 21, .45);
}

.caption-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.caption-body strong {
  font: 600 15px/1.35 var(--font-serif);
  color: var(--ink);
}

.archive-ruler {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  min-height: 64px;
  padding: 0 16px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
}

.archive-ruler:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ruler-end {
  font-size: 10.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.ruler-track {
  position: relative;
  height: 40px;
  border-bottom: 1px solid var(--line-strong);
}

.ruler-tick {
  position: absolute;
  bottom: 0;
  left: var(--at);
  width: 2px;
  height: 10px;
  border-radius: 1px 1px 0 0;
  background: var(--ink-line);
  transform: translateX(-50%);
  transition: height .2s var(--ease-out), background-color .2s;
  animation: archiveTickIn .36s var(--ease-out) both;
  animation-delay: calc(var(--k, 0) * 14ms);
}

@keyframes archiveTickIn {
  from {
    height: 0;
    opacity: 0;
  }
}

.ruler-tick b {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  font: 600 10px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transform: translateX(-50%);
}

.ruler-tick.is-picked {
  width: 3px;
  height: 18px;
  background: var(--accent);
}

/* The pointer carries the picked day, so that tick drops its own number. */
.ruler-tick.is-picked b {
  opacity: 0;
}

/* Needle, knob on the baseline and a label above. It springs to each pick
   and follows the hand exactly while dragged. */
.ruler-pointer {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: var(--at);
  width: 0;
  height: 26px;
  pointer-events: none;
  transition: left .42s cubic-bezier(.34, 1.4, .64, 1);
  animation: archivePointerIn .32s var(--ease-out) .18s both;
}

.ruler-pointer::before {
  content: '';
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
}

.ruler-pointer::after {
  content: '';
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  transition: transform .18s var(--ease-out), box-shadow .18s;
}

.ruler-pointer b {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2px);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 6px 12px -8px rgba(192, 95, 65, .8);
  font: 600 11px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--surface);
  transform: translateX(-50%);
}

/* With the hand on the ruler the pointer trails it closely instead of
   springing. */
.archive-ruler.is-tracking .ruler-pointer {
  transition: left .08s linear;
}

.archive-ruler.is-tracking .ruler-pointer::after,
.archive-ruler:focus-visible .ruler-pointer::after {
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(217, 119, 87, .18);
}

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

/* Opening a brief: the folder copy and the brief run their own motion, so the
   dialog's usual pop-in stays off. */
.modal.is-flown {
  animation: none;
}

.brief-folder {
  position: fixed;
  z-index: 11;
  pointer-events: none;
}

.brief-folder .file-tab {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.brief-folder .file-tab b {
  color: var(--accent-dark);
}

.brief-folder .file-face {
  border-color: var(--accent);
  background:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(217, 119, 87, .3) 13px 14.5px) 20px 26px / 60% 58% no-repeat,
    var(--accent-soft);
  box-shadow: 0 18px 40px -26px rgba(31, 27, 21, .55);
}

/* Typewriter: the untyped rest keeps its place, and the caret takes no room. */
.type-rest {
  visibility: hidden;
}

.type-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin: 0 -1px;
  border-radius: 1px;
  background: var(--accent);
  vertical-align: -.12em;
  animation: typeCaret .7s steps(1) infinite;
}

@keyframes typeCaret {
  50% {
    opacity: 0;
  }
}

@container (max-width: 760px) {
  .archive-room {
    --dw: 300px;
    --fh: 160px;
    --fp: 58px;
    --sh: 78px;
    --step: 14px;
    --lift: 80px;
    height: 640px;
  }

  .box-title strong {
    font-size: 18px;
  }

  .box-step {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }

  .box-step.is-prev {
    left: 8px;
  }

  .box-step.is-next {
    right: 8px;
  }

  .box-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0 12px 12px;
  }

  .file-tab {
    gap: 3px;
    width: 22%;
    padding: 5px 6px 0;
    font-size: 9.5px;
  }
}

/* Too narrow for every day number: the pointer's label is enough. The arrows
   move up beside the month so the box can use the full width. */
@container (max-width: 560px) {
  .archive-room {
    height: 600px;
  }

  .ruler-tick b {
    display: none;
  }

  .box-step {
    top: -42px;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .file-sheet,
  .file-face,
  .ruler-tick,
  .ruler-pointer,
  .ruler-pointer::after {
    transition: none;
    animation: none;
  }
}


/* The brief itself, opened from a folder or from the inbox. */
.modal.is-wide {
  width: min(760px, calc(100% - 32px));
}

.brief-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-rule);
}

.brief-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.brief-stats > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunk);
}

.brief-stats b {
  font: 600 20px/1.2 var(--font-serif);
  color: var(--ink);
}

.brief-stats span {
  font-size: 11.5px;
  color: var(--muted);
}

.brief-section {
  margin-top: 22px;
}

.brief-section h3 {
  margin: 0 0 10px;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  color: var(--muted);
}

.brief-risks {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.brief-entry {
  padding: 12px 0 4px;
  border-top: 1px solid var(--line-soft);
}

.brief-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 4px;
}

.brief-entry-head strong {
  font: 600 15px/1.4 var(--font-serif);
  color: var(--ink);
}

.brief-entry-head span {
  font-size: 12px;
  color: var(--muted);
}

.brief-text {
  margin: 4px 0 8px;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink-2);
}

/* Archives are edited where they are read: each collected block is plain text
   that takes a cursor, marked only while hovered or being edited. */
.doc-edit {
  min-height: 1.7em;
  margin: 0 -8px;
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  cursor: text;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.doc-edit:hover {
  background: var(--surface-sunk);
}

.doc-edit:focus {
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--accent-line);
}

.doc-edit:empty::before {
  content: '—';
  color: var(--faint);
}

/* 随记 is a page left blank to write on, so it reads as room to write in. */
.diary-note .doc-edit {
  min-height: calc(1.7em * 4 + 4px);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.diary-note .doc-edit:focus {
  box-shadow: 0 0 0 1.5px var(--accent-line);
}

.diary-note .doc-edit:empty::before {
  content: attr(data-placeholder);
}

.notice-fields.is-editable dd {
  min-width: 0;
}

.doc-edited {
  font-size: 11px;
  font-style: normal;
  color: var(--c-gold-ink);
}

.doc-log {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-log-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  margin: 0 -8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.doc-log-item:hover {
  background: var(--surface-sunk);
}

.doc-log-item time {
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.doc-log-item small {
  font-size: 11.5px;
  color: var(--muted);
}

.archive-ledger {
  margin-top: 22px;
}

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

/* The week a 周报 covers: a band on the ruler behind the ticks, and while the
   周报 button is in reach those folders' tabs light up in the box. */
.ruler-week {
  position: absolute;
  bottom: -3px;
  left: var(--from, 0%);
  width: calc(var(--to, 0%) - var(--from, 0%));
  height: 3px;
  margin-left: -4px;
  padding-right: 8px;
  border-radius: 2px;
  background: var(--line);
  transition:
    left .42s cubic-bezier(.34, 1.4, .64, 1),
    width .42s cubic-bezier(.34, 1.4, .64, 1),
    background-color .2s,
    height .2s var(--ease-out);
}

.archive-cabinet.show-week .ruler-week {
  height: 24px;
  background: var(--accent-soft-2);
}

.archive-file.in-week .file-tab {
  transition: background-color .2s, border-color .2s, color .2s;
}

.archive-cabinet.show-week .archive-file.in-week:not(.is-picked) .file-tab {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* 周报, read in place. Sections rise one after another, the day bars grow
   from the baseline and the meters fill; paging slides from that side. */
.week-report > * {
  animation: ledgerRise .48s var(--ease-out) both;
}

.week-report > *:nth-child(2) { animation-delay: 60ms; }

.week-report > *:nth-child(3) { animation-delay: 120ms; }

.week-report > *:nth-child(4) { animation-delay: 180ms; }

.week-report > *:nth-child(n + 5) { animation-delay: 240ms; }

.week-report.from-next {
  animation: weekFromNext .32s var(--ease-out) both;
}

.week-report.from-prev {
  animation: weekFromPrev .32s var(--ease-out) both;
}

.week-report-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.week-report-top .eyebrow {
  margin: 0;
}

.week-report-nav {
  display: flex;
  gap: 2px;
}

.week-report-nav .icon-btn {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.week-report-nav .icon-btn:disabled {
  opacity: .35;
  cursor: default;
}

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

.week-cell {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}

.week-cell:not(:disabled):hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.week-cell:disabled {
  cursor: default;
  opacity: .55;
}

.week-cell.is-today {
  border-color: var(--accent-line);
}

.week-cell-bar {
  position: relative;
  width: 14px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 4px;
  background: var(--line-soft);
  overflow: hidden;
}

.week-cell-bar i {
  position: absolute;
  inset: auto 0 0;
  height: var(--h);
  border-radius: 4px;
  background: linear-gradient(to top, var(--accent) var(--done), var(--accent-line) var(--done));
  transform-origin: bottom;
  animation: weekBarGrow .6s var(--ease-out) both;
  animation-delay: 260ms;
}

@keyframes weekBarGrow {
  from { transform: scaleY(0); }
}

.week-cell b {
  font: 600 16px/1.1 var(--font-serif);
  color: var(--ink);
}

.week-cell small {
  font-size: 11px;
  color: var(--muted);
}

.week-cell em {
  min-height: 1.2em;
  font: 600 11px/1.2 var(--font-sans);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--accent-dark);
}

.week-report .brief-risks time {
  margin-right: 10px;
  font-size: 12px;
  color: var(--faint);
}

.week-rows {
  display: grid;
  gap: 2px;
}

.week-row {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}

.week-row strong {
  overflow: hidden;
  font: 600 14px/1.4 var(--font-serif);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.week-row > span:last-child {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
}

.week-meter {
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
}

.week-meter i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: left;
  animation: weekMeterFill .7s var(--ease-out) both;
  animation-delay: calc(320ms + var(--k, 0) * 40ms);
}

@keyframes weekMeterFill {
  from { transform: scaleX(0); }
}

/* 14 · Summary · diary and notebooks ------------------------------------------- */

.diary-week,
.diary-admin {
  display: grid;
  gap: 18px;
}

.diary-week-toolbar,
.notebook-shelf-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
}

.diary-week-toolbar h2,
.notebook-shelf-heading h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.diary-week-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 18px;
}

.diary-day-card {
  flex: 0 0 178px;
  min-height: 170px;
  text-align: left;
  border: 1px solid var(--line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diary-day-card:hover,
.diary-day-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  box-shadow: 0 14px 28px rgba(64,54,42,.12);
  outline: none;
}

.diary-day-card.today {
  border: 2px solid var(--accent);
  padding: 15px;
}

.diary-day-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diary-day-top b {
  font-size: 13px;
}

.diary-day-top strong {
  font-size: 19px;
}

.diary-day-status {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
}

.diary-day-preview {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.diary-stat-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.diary-stat-strip span {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
}

.diary-stat-strip b {
  font-size: 17px;
  color: var(--ink);
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}

.notebook-shelf {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 8px 4px 16px;
}

.notebook-cover {
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 600;
  background: var(--surface-sunk) !important;
  color: var(--ink);
  text-shadow: none;
  box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 1px var(--line);
}

.member-notebook small {
  color: var(--muted);
  font-size: 11px;
}

.diary-admin-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}

.diary-log-panel,
.diary-load-panel {
  border: 1px solid var(--line);
  padding: 18px;
}

.diary-log-list {
  display: grid;
  gap: 0;
}

.diary-log-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  font-size: 12px;
}

.diary-log-item i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.diary-log-item span {
  color: var(--ink);
}

.diary-log-item small {
  color: var(--muted);
}

.diary-load-row {
  display: grid;
  grid-template-columns: 75px 85px 1fr 40px;
  gap: 9px;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding: 13px 0;
  font-size: 12px;
  border-bottom-color: var(--hair);
}

.diary-load-row .progress {
  height: 7px;
}

.diary-load-row .progress i {
  background: var(--success);
}

.diary-load-row > b {
  text-align: right;
  color: var(--accent);
}

.diary-notebook {
  max-width: 760px;
  margin: 0 auto;
}

.notebook-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.notebook-toolbar h2 {
  font-size: 24px;
  margin: 4px 0;
}

.notebook-state {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--success-soft);
  color: var(--success);
}

.notebook-paper {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 28px 32px;
  box-shadow: 0 12px 26px rgba(68,53,31,.08);
  background-image: linear-gradient(var(--line-soft) 1px,transparent 1px);
  background-size: 100% 34px;
}

.notebook-date {
  font-family: serif;
  color: var(--accent-dark);
  font-size: 14px;
  margin-bottom: 20px;
}

.notebook-paper label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 20px 0;
}

.notebook-paper textarea {
  display: block;
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  padding: 8px 2px;
  font-family: inherit;
  line-height: 1.8;
  outline: none;
}

.notebook-paper textarea:focus {
  border-bottom-color: var(--accent);
}

.notebook-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.diary-projects {
  border-top: 1px solid var(--line);
  margin-top: 17px;
  padding-top: 14px;
}

.diary-projects h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

.diary-project-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  border-top: 1px solid var(--line-soft);
  padding: 9px 0;
}

.diary-project-progress strong {
  font-size: 12px;
}

.diary-project-progress span {
  font-size: 11px;
  color: var(--accent);
}

.diary-week-actions {
  display: flex;
  gap: 8px;
}

.diary-week-actions .secondary-btn {
  height: 34px;
  font-size: 12px;
}

.diary-date-nav,
.diary-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 auto 14px;
  max-width: 760px;
  flex-wrap: wrap;
}

.diary-date-nav span {
  font-size: 12px;
  color: var(--muted);
}

.diary-log-toolbar {
  max-width: none;
  justify-content: flex-end;
}

.diary-log-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.diary-log-toolbar input {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--ink);
}

.diary-log-project {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.diary-notebook textarea[readonly] {
  color: var(--ink-2);
  cursor: default;
}

.diary-notebook textarea[readonly]:focus {
  border-bottom-color: var(--line-strong);
}

.diary-log-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.diary-log-button:hover {
  background: var(--surface-sunk);
  border-radius: 7px;
  padding-left: 8px;
  padding-right: 8px;
}

.diary-log-button > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.diary-day-card,
.member-notebook {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.member-notebook {
  flex: 0 0 160px;
  display: grid;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  padding: 13px;
  border-radius: 14px;
  transition: transform var(--t-slow) var(--ease-spring), box-shadow var(--t-slow) var(--ease-out), border-color var(--t) var(--ease);
}

.notebook-shelf-heading h2,
.diary-week-toolbar h2,
.diary-log-panel h2,
.diary-load-panel h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
}

.notebook-shelf-heading .eyebrow {
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  color: var(--muted);
}

.member-notebook:hover {
  transform: translateY(-4px) rotate(-.6deg);
  box-shadow: 0 24px 40px -26px rgba(64, 54, 42, .55);
  border-color: var(--line-strong);
}

.member-notebook strong {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.diary-log-panel,
.diary-load-panel,
.diary-day-card {
  border-radius: 16px;
}

.diary-log-panel,
.diary-load-panel,
.member-notebook,
.diary-day-card {
  background: var(--surface);
  box-shadow: none;
  border-color: var(--line);
}

/* 15 · Achievements ------------------------------------------------------------ */

.achievement-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.achievement-stat {
  border: 1px solid var(--line);
  padding: 15px 17px;
  border-radius: 14px;
}

.achievement-stat span,
.achievement-stat small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

/* Numbers line up in stat strips, counters and the gantt axis. */
.achievement-stat strong {
  display: block;
  font-size: 26px;
  margin: 5px 0 2px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}

.achievement-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.achievement-card {
  border: 1px solid var(--line);
  padding: 20px 22px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  border-radius: 16px;
}

.achievement-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.achievement-kicker {
  font-size: 10px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.achievement-card h2 {
  font-size: 20px;
  margin: 4px 0 5px;
  letter-spacing: -.03em;
}

.achievement-card-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.achievement-status {
  font-size: 11px;
  color: var(--success);
  background: var(--success-soft);
  border-radius: 5px;
  padding: 5px 8px;
  white-space: nowrap;
}

.achievement-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-top: 17px;
  padding: 11px 0;
  color: var(--muted);
  font-size: 12px;
}

.achievement-meta b {
  color: var(--ink);
  font-weight: 700;
}

.achievement-lifecycle {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 21px 4px 13px;
  margin: 0;
  overflow-x: auto;
}

.achievement-lifecycle li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 130px;
  flex: 1;
}

.achievement-lifecycle li:last-child {
  min-width: 112px;
  flex: 0;
}

.achievement-lifecycle li i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  display: block;
  flex: none;
  z-index: 1;
}

.achievement-lifecycle li.is-complete i {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-2);
}

.achievement-lifecycle li span {
  display: grid;
  gap: 3px;
  margin-top: -2px;
}

.achievement-lifecycle li b {
  font-size: 12px;
  white-space: nowrap;
}

.achievement-lifecycle li small {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.achievement-lifecycle li em {
  position: absolute;
  left: 15px;
  right: 8px;
  top: 6px;
  height: 2px;
  background: var(--line);
}

.achievement-lifecycle li.is-complete em {
  background: var(--accent-line);
}

.achievement-report {
  padding: 12px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  margin-top: 2px;
}

.achievement-report span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 5px;
}

.achievement-report p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.achievement-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}

.achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.achievement-stat,
.achievement-card {
  background: var(--surface);
  box-shadow: none;
  border-color: var(--line);
}

/* 16 · Accounts ---------------------------------------------------------------- */

.account-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
  border-radius: 16px;
  padding: 20px 24px;
  background: var(--surface-sunk);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line-soft);
}

.account-banner strong,
.account-banner span {
  display: block;
}

.account-banner span {
  font-size: 12px;
  margin-top: 4px;
  color: var(--muted);
}

.account-banner .permission-pill {
  margin-left: auto;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.account-banner .secondary-btn {
  color: var(--ink);
  margin-left: auto;
}

.account-list {
  margin-bottom: 18px;
  display: grid;
  gap: 16px;
}

.account-item {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  row-gap: 10px;
}

.account-copy {
  flex: 1 1 220px;
  min-width: 0;
}

/* Actions travel as one group: when the row runs out they move under the name together. */
.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 11px;
}

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

.account-copy span {
  font-size: 12px;
  margin-top: 3px;
}

.account-copy small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.automation-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.automation-card {
  border: 1px solid var(--accent-line);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
  border-color: var(--line);
}

.automation-card h2 {
  margin: 0;
  font-size: 18px;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
}

/* Rule groups (规则组): the groups that exist read as a list in 系统设置; a group
   is made or changed on a card in a dialog, every rule one click. */
.creation-card {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.creation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.creation-head h2 {
  margin: 0;
  font: 600 18px/1.3 var(--font-serif);
}

.rule-list {
  display: grid;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.rule-row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.rule-row + .rule-row {
  border-top: 1px solid var(--line-soft);
}

.rule-row:hover,
.rule-row:focus-visible {
  outline: none;
  background: var(--surface-sunk);
}

.rule-row-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rule-row-name strong {
  overflow: hidden;
  font: 600 14.5px/1.3 var(--font-serif);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rule-row-name small {
  font-size: 11px;
  color: var(--muted);
}

.rule-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rule-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rule-tag small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* A rule is a choice, not a warning: open is green, asks-first is amber, the
   assistant's read-only mode is blue, and "not allowed" / "off" stay neutral. */
.rule-tag.is-direct,
.rule-tag.is-operate { color: var(--c-green-ink); background: var(--c-green-soft); }
.rule-tag.is-approval { color: var(--c-gold-ink); background: var(--c-gold-soft); }
.rule-tag.is-read { color: var(--c-blue-ink); background: var(--c-blue-soft); }
.rule-tag.is-none,
.rule-tag.is-off { color: var(--muted); background: var(--surface-sunk); }

.rule-row-people {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.rule-row-people .avatar {
  width: 24px;
  height: 24px;
  margin-right: -6px;
  font-size: 10px;
  box-shadow: 0 0 0 2px var(--surface);
}

.rule-row-people span {
  margin-left: 12px;
}

.rule-row .task-arrow svg {
  width: 15px;
  height: 15px;
  color: var(--faint);
}

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

  .rule-row-tags {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.rule-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.rule-card.is-editing {
  margin-top: 4px;
}

.rule-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The group's name is an input that looks like a title; a pencil says so. */
.rule-name-wrap {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.rule-name-wrap .rule-name {
  padding-right: 34px;
}

.rule-name-icon {
  position: absolute;
  right: 10px;
  width: 15px;
  height: 15px;
  color: var(--faint);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease);
}

.rule-name-wrap:hover .rule-name-icon,
.rule-name:focus + .rule-name-icon {
  color: var(--accent);
}

.rule-members-note {
  font-size: 11.5px;
  color: var(--faint);
}

/* 默认规则 lists who falls back to it; the chips are not choices there. */
.rule-person:disabled.is-on {
  border-color: var(--line-soft);
  background: var(--surface-sunk);
  font-weight: 500;
}

.collection-form {
  display: grid;
  gap: 12px;
}

.collection-form .form-field {
  margin: 0;
}

.creation-card .eyebrow {
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  color: var(--muted);
}

.rule-seg.is-multi .rule-opt.is-on {
  background: var(--accent-soft-2);
  color: var(--accent-dark);
  font-weight: 600;
}


.rule-name {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  margin-left: -8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 600 22px/1 var(--font-serif);
}

.rule-name:hover {
  border-color: var(--line);
}

.rule-name:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.rule-badge {
  flex: none;
  font-size: 11px;
  color: var(--muted);
}

.rule-lines {
  display: grid;
  gap: 8px;
}

.rule-line {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.rule-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.rule-opt {
  min-width: 0;
  height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.rule-opt:hover {
  color: var(--ink);
}

.rule-opt.is-on {
  background: var(--ink-deep);
  color: var(--surface);
  font-weight: 600;
}

.rule-members {
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.rule-members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

.rule-members-head .ghost-btn {
  height: 26px;
  padding: 0 9px;
  font-size: 11.5px;
}

.rule-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 38vh;
  overflow-y: auto;
}

.rule-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 3px 11px 3px 3px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.rule-person .avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.rule-person span {
  display: grid;
  line-height: 1.2;
}

.rule-person small {
  font-size: 10.5px;
  color: var(--faint);
}

.rule-person.is-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

.rule-person:disabled {
  cursor: default;
}

.modal-footer .rule-delete {
  margin-right: auto;
  color: var(--danger);
}

.account-group {
  margin-bottom: 18px;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 16px 12px 8px;
}

.account-group-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  margin-bottom: 0;
  padding: 0 8px 8px;
  border-bottom: 0;
}

.account-group-heading strong {
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.account-group-heading span {
  background: var(--line-soft);
  color: var(--ink-2);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

.account-item,
.automation-card {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.account-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.account-name strong {
  font-size: 14px;
}

.automation-card .eyebrow {
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .16em;
  color: var(--muted);
}

.account-banner strong {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
}

.account-group .account-item,
.account-list .account-item {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: background var(--t) var(--ease), padding var(--t-slow) var(--ease-out);
  border-bottom: 0;
  border-radius: 10px;
  padding: 12px 8px;
}

.account-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-sunk);
}

.account-copy strong {
  font-size: 15px;
  font-weight: 600;
}

.account-item .ghost-btn,
.account-item .secondary-btn {
  height: 30px;
  font-size: 12px;
  padding: 0 11px;
  box-shadow: none;
}

.account-group .account-item:hover,
.account-item.current-account {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(64, 54, 42, .06), 0 0 0 1px var(--line-soft);
  padding-left: 8px;
}

.account-group > .muted {
  padding: 4px 8px 10px;
  margin: 0;
}

/* 账户管理: drag by the grip (superadmin), 管理 mode picks several at once. */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-rows .account-empty {
  padding: 4px 8px 10px;
  margin: 0;
}

.account-rows:has(.account-item) .account-empty {
  display: none;
}

.account-group-heading .group-manage {
  height: 28px;
  margin-left: auto;
  padding: 0 11px;
  font-size: 12px;
}

.group-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  animation: wcFadeIn var(--t) var(--ease-out) both;
}

.group-tools .ghost-btn,
.group-tools .primary-btn {
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

.group-tools .ghost-btn.is-danger:not(:disabled) {
  color: var(--danger);
}

.group-tools button:disabled {
  opacity: .4;
  cursor: default;
}

.account-group-heading {
  flex-wrap: wrap;
}

.account-group-heading strong {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .group-tools {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.group-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}

.account-group-heading .group-picked {
  background: none;
  padding: 0 4px;
  font-weight: 500;
  color: var(--muted);
}

.account-group.is-managing .account-item {
  cursor: pointer;
}

.account-group.is-managing .account-item.is-picked {
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.account-pick {
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  accent-color: var(--accent);
  animation: wcFadeIn var(--t) var(--ease-out) both;
}

.account-item.is-off .avatar,
.account-item.is-off .account-copy {
  opacity: .55;
}

.name-tag.self {
  color: var(--ink-2);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
}

.name-tag.off {
  color: var(--danger-ink);
  background: var(--c-coral-soft);
  border: 1px solid var(--danger-line);
}

.account-grip {
  display: grid;
  place-items: center;
  width: 18px;
  height: 30px;
  margin: 0 -4px 0 -2px;
  border-radius: 6px;
  color: var(--faint);
  cursor: grab;
  touch-action: none;
  opacity: .5;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.account-grip svg {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.account-item:hover .account-grip {
  opacity: 1;
}

.account-grip:hover {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

/* The row being dragged leaves a dashed slot; a lifted copy follows the pointer. */
.account-list .account-item.is-placeholder {
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.account-item.is-placeholder > * {
  visibility: hidden;
}

.account-ghost {
  position: fixed;
  z-index: 40;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-line);
  pointer-events: none;
  transform: scale(1.02);
  transform-origin: 20% 50%;
}

.account-ghost .account-grip {
  opacity: 1;
  cursor: grabbing;
}

body.is-dragging-account,
body.is-dragging-account * {
  cursor: grabbing !important;
  user-select: none;
}

.account-group:has(.is-placeholder) {
  border-color: var(--accent-line);
}

.account-name-list {
  display: grid;
  gap: 8px;
  max-height: 52vh;
  margin: 6px 0 4px;
  overflow-y: auto;
}

.account-name-row {
  display: grid;
  grid-template-columns: auto 90px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.account-name-row input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.account-name-row input:focus {
  outline: none;
  border-color: var(--accent);
}

/* 17 · Team chat --------------------------------------------------------------- */

/* Unread count per room. */
.chat-channel-badge {
  display: inline-block;
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--surface);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.chat-channel.is-on .chat-channel-badge {
  background: var(--accent);
  color: var(--surface);
}

/* 所有人 reads as a broadcast, not a person. */
.chat-mention-all {
  background: var(--accent-soft-2);
  border-color: var(--danger-line);
}

.chat-mention-option.is-everyone .icon {
  color: var(--accent-dark);
}

/* A pasted link, kept inside the bubble however long it is. */
.chat-link {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 2px;
  word-break: break-all;
}

.chat-link:hover {
  text-decoration-color: var(--accent-dark);
}

/* A count, not a dot: the number says whether it is worth going in. */
.brand-chat .chat-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--accent);
  color: var(--surface);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1.5px var(--rail);
  animation: wcPop var(--t) var(--ease-spring) both;
}

.chat-room {
  display: flex;
  flex-direction: row;
  height: min(620px, calc(100vh - 235px));
  overflow: hidden;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  min-height: calc(100vh - 300px);
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}


.chat-day {
  align-self: center;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 10px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  background: var(--surface);
}

.chat-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 78%;
}

.chat-message.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-body {
  min-width: 0;
}

.chat-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--faint);
}

.chat-message.mine .chat-meta {
  flex-direction: row-reverse;
}

.chat-meta strong {
  font-weight: 600;
  color: var(--ink-2);
}

.chat-meta time {
  font-variant-numeric: tabular-nums;
}

.chat-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  border: 1px solid var(--line-soft);
  padding: 8px 11px;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 12px;
  background: var(--surface-sunk);
  border-color: var(--line-soft);
}

.chat-message.mine .chat-text {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.chat-empty {
  margin: auto;
  font-size: 13px;
  color: var(--faint);
  text-align: center;
}

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  position: relative;
  background: transparent;
  border-top: 1px solid var(--line-soft);
  padding-left: 20px;
}

.chat-compose textarea {
  flex: 1;
  min-height: 38px;
  max-height: 120px;
  resize: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 11px;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--t) var(--ease);
  border-radius: 12px;
  background: var(--surface);
}

.chat-compose textarea:focus {
  border-color: var(--accent-line);
  outline: none;
}

.chat-log.chat-archive {
  flex: none;
  max-height: 46vh;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 14px 16px;
}

.chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 12px;
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  padding-left: 20px;
}

.chat-channels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 10px;
}

.chat-channels::-webkit-scrollbar {
  display: none;
}

.chat-channel {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 8px 9px;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.chat-channel.is-on {
  background: var(--surface);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-sm);
}

/* Everyone in the room, with whoever is away dimmed by .chat-presence. */
.chat-members {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  max-width: 62%;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-online {
  font-size: 11px;
  color: var(--faint);
  margin-right: 4px;
  white-space: nowrap;
}

.chat-presence {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  filter: saturate(.35);
  opacity: .55;
  transition: opacity var(--t) var(--ease), filter var(--t) var(--ease);
}

.chat-presence.is-on {
  filter: none;
  opacity: 1;
}

.chat-presence.is-on::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 1.5px var(--surface-sunk);
}

/* The mention picked out of the message body. */
.chat-mention {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0 3px;
}

/* @ completion, floating above the composer. */
.chat-mention-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 6px);
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: wcRiseIn var(--t) var(--ease-out) both;
}

.chat-mention-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--ink);
}

.chat-mention-option + .chat-mention-option {
  border-top: 1px solid var(--line-soft);
}

.chat-mention-option.is-on {
  background: var(--accent-soft);
}

.chat-mention-option small {
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
}

/* Every channel is a conversation down the left, and the unread count sits on
   the conversation that owns it. */
.chat-side {
  flex: none;
  width: var(--chat-navigation-width, 208px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: transparent;
  border-right: 1px solid var(--line-soft);
  padding: 14px 12px 14px 0;
  position: relative;
  transition: width var(--t) var(--ease-out);
}

.chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-bottom: 8px; }
.chat-side-head .chat-side-title { min-width: 0; flex: 1; padding-bottom: 0; overflow: hidden; white-space: nowrap; }
.chat-side-head .nav-collapse-toggle { margin-right: 4px; }
@media (min-width: 761px) {
  .chat-side.is-nav-collapsed .chat-side-title,
  .chat-side.is-nav-collapsed .chat-channel-time { display: none; }
  .chat-side.is-nav-collapsed .chat-side-head { justify-content: center; }
  .chat-side.is-nav-collapsed .chat-channel { position: relative; justify-content: center; gap: 0; padding: 8px 4px; }
  .chat-side.is-nav-collapsed .chat-channel-body { flex: 0; width: 0; opacity: 0; overflow: hidden; }
  .chat-side.is-nav-collapsed .chat-channel-side { position: absolute; right: 0; top: 1px; }
  .chat-side.is-nav-collapsed .chat-channel-badge { min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; font-size: 9px; }
}

.chat-side-title {
  flex: none;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--muted);
  padding: 0 8px 10px;
}

.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.chat-current {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
  font-size: 18px;
}

/* The mark left of each conversation: an icon for the standing rooms, the
   project's first glyph otherwise. */
.chat-mark {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

.chat-mark .icon {
  width: 16px;
  height: 16px;
}

.chat-channel.is-on .chat-mark {
  border-color: var(--accent-line);
  color: var(--accent-dark);
}

.chat-mark.is-project {
  background: hsl(var(--avatar-hue, 18) 38% 56%);
  border-color: transparent;
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
}

.chat-channel-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-channel-name {
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.chat-channel-preview {
  font-size: 11px;
  line-height: 1.4;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-channel-idle {
  font-style: italic;
  opacity: .8;
}

.chat-channel-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.chat-channel-time {
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chat-members::-webkit-scrollbar {
  display: none;
}

.chat-presence-more {
  flex: none;
  font-size: 11px;
  color: var(--faint);
  padding: 0 2px;
  white-space: nowrap;
}

#chatView .page-intro {
  border-bottom: 0;
  padding-bottom: 16px;
  margin-bottom: 8px;
}

#chatView .page-intro::after {
  display: none;
}

.chat-channel:hover {
  background: var(--surface-sunk);
}

.chat-channel.active,
.chat-channel[aria-selected="true"] {
  background: var(--surface-sunk);
  border-color: var(--line-soft);
  box-shadow: none;
}

/* 18 · Assistant --------------------------------------------------------------- */

.agent-panel {
  position: fixed;
  container: assistant / inline-size;
  z-index: 25;
  right: 24px;
  bottom: 24px;
  width: min(390px,calc(100vw - 32px));
  height: min(590px,calc(100vh - 48px));
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  border-radius: 18px;
  border-color: var(--line);
  box-shadow: 0 30px 80px -24px rgba(40, 33, 25, .4);
}

.agent-panel.hidden {
  display: none;
}

.agent-header {
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agent-header strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
}

.agent-kicker {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 3px;
  letter-spacing: .18em;
}

.agent-header-actions {
  display: flex;
  gap: 3px;
}

.agent-icon-btn {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  color: var(--faint);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.agent-icon-btn:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.agent-capability {
  margin: 12px 14px 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--surface-sunk);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  display: none;
}

.agent-messages {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.agent-message {
  max-width: 88%;
  padding: 10px 12px;
  background: var(--surface-sunk);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 14px;
}

.agent-message.user {
  justify-self: end;
  background: var(--accent-soft-2);
  border-radius: 12px 12px 5px 12px;
}

.agent-message.error {
  background: var(--accent-soft-2);
  color: var(--danger);
}

.agent-form {
  border-top: 1px solid var(--line);
  padding: 11px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.agent-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
  line-height: 1.4;
  outline: none;
  font-size: 13px;
}

.agent-form textarea:focus {
  border-color: var(--accent);
}

.agent-form .primary-btn {
  height: 36px;
  padding: 0 13px;
}

.agent-config {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: var(--surface);
  padding: 18px;
  overflow: auto;
}

.agent-config.hidden {
  display: none;
}

.agent-config-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.agent-config-title strong {
  font-size: 16px;
}

.agent-text-btn {
  color: var(--accent);
  font-size: 12px;
}

.agent-config label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin: 13px 0;
}

.agent-config input,
.agent-config select {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  margin-top: 6px;
  outline: none;
  font-size: 13px;
  background: var(--surface);
}

.agent-config input:focus,
.agent-config select:focus {
  border-color: var(--accent);
}

.agent-config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.agent-action {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 12px 14px;
  display: grid;
  gap: 9px;
  max-width: 100%;
}

.agent-action-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
}

.agent-action-payload {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-2);
  overflow: auto;
  max-height: 220px;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-action-buttons .ghost-btn,
.agent-action-buttons .primary-btn {
  height: 32px;
  font-size: 12px;
  padding: 0 13px;
}

.agent-action-done {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
}

.agent-time {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: var(--faint);
  font-weight: 400;
}

.agent-history-list {
  display: grid;
  gap: 9px;
  max-height: min(58vh,520px);
  overflow-y: auto;
  margin: 12px 0;
  padding: 2px;
}

.agent-history-list .agent-message {
  max-width: 100%;
}

.agent-action-record {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}

.agent-top-btn,
.agent-icon-btn {
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

/* The planning button and the 逐步确认 / 替我确认 switch sit above the composer,
   so the pace is visible before any card asks for it. */
.agent-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.agent-tools .ghost-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.agent-mode {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-sunk);
}

.agent-mode-opt {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 7px 11px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.agent-mode-opt:hover {
  color: var(--ink);
}

.agent-mode-opt.is-on {
  background: var(--surface);
  color: var(--accent-dark);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* 规划草稿: the panel opens wider while a draft is out, and the draft is a set
   of filled-in cards the user edits in place before confirming. */
.agent-panel.is-planning {
  width: min(1080px, calc(100vw - 48px));
  height: min(800px, calc(100vh - 48px));
}

.agent-workspace { display: flex; flex: 1; min-height: 0; }
.agent-conversation { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.agent-draft-area {
  flex: 1.35; min-width: 0; overflow: auto; padding: 18px;
  border-right: 1px solid var(--line); background: var(--paper);
}
.agent-draft-area.hidden { display: none; }
.agent-draft-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.agent-draft-heading strong { font: 600 20px/1.4 var(--font-serif); }
#agentDraftCards { display: grid; gap: 16px; }
.agent-message-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; white-space: normal; }
.agent-message-tools button { padding: 2px 0; font: inherit; font-size: 11px; color: var(--muted); }
.agent-message-tools button:hover { color: var(--accent-dark); text-decoration: underline; }
.plan-draft-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.plan-draft-tools > span { width: 100%; color: var(--muted); font-size: 11px; }
.plan-card.needs-info { border-color: var(--danger); }
.plan-card [aria-invalid="true"] { border-color: var(--danger); background: var(--c-coral-soft); }
.plan-validation { margin: 0; color: var(--danger); font-size: 12px; line-height: 1.5; }
.plan-validation:empty { display: none; }
.agent-draft-area .plan-foot { position: sticky; bottom: -18px; padding: 12px 0; background: var(--paper); z-index: 1; }
.agent-form { flex-wrap: wrap; }
.agent-form #agentInput { flex-basis: 100%; }

@media (max-width: 760px) {
  .agent-panel.is-planning { width: calc(100vw - 24px); }
  .agent-workspace { flex-direction: column; }
  .agent-draft-area { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .agent-panel.is-planning .agent-conversation { flex: none; }
  .agent-panel.is-planning .agent-messages { display: none; }
  .agent-draft-heading strong { font-size: 17px; }
  .agent-draft-heading { margin-bottom: 12px; }
  .agent-draft-area .plan-foot { bottom: -12px; }
}

.agent-panel {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), width var(--t-slow) var(--ease-out), height var(--t-slow) var(--ease-out);
}

.agent-panel.is-plan-mode .agent-mode {
  display: none;
}

.agent-message.agent-drafting {
  color: var(--muted);
  animation: ledgerPulse 1.6s var(--ease-out) infinite;
}

.agent-message.plan-board {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: none;
  white-space: normal;
}

.plan-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--ink);
}

.plan-board-head svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  align-self: center;
}

.plan-board-head strong {
  font: 600 15px/1.3 var(--font-serif);
}

.plan-board-head span {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--ink-2);
}

.plan-hint {
  margin: 4px 0 10px;
  font-size: 11.5px;
  color: var(--muted);
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 10px;
}

/* Cards are dealt onto the table one after another as the draft arrives. */
.plan-cards.is-entering .plan-card {
  animation: planDeal 420ms var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes planDeal {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}

.plan-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.plan-card.is-project {
  border-color: var(--accent-line);
  background: linear-gradient(var(--accent-soft), var(--surface) 60%);
}

.plan-card.is-none {
  opacity: .72;
}
.plan-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}

.plan-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  font-weight: 600;
}

.plan-kind svg {
  width: 13px;
  height: 13px;
}

.plan-state {
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.plan-state.is-direct { color: var(--c-green-ink); background: var(--c-green-soft); }
.plan-state.is-approval { color: var(--c-gold-ink); background: var(--c-gold-soft); }
.plan-state.is-wait { color: var(--c-blue-ink); background: var(--c-blue-soft); }
.plan-state.is-none { color: var(--danger-ink); background: var(--c-coral-soft); }

.plan-remove {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--faint);
}

.plan-remove:hover {
  background: var(--surface-sunk);
  color: var(--danger);
}

.plan-remove svg {
  width: 13px;
  height: 13px;
}

.plan-prio {
  display: inline-flex;
  gap: 2px;
}

.plan-prio .priority {
  border: 0;
  cursor: pointer;
  opacity: .38;
  transition: opacity var(--t-fast) var(--ease);
}

.plan-prio .priority.is-on,
.plan-prio .priority:hover {
  opacity: 1;
}

.plan-title {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  margin: 0 -6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 600 14px/1.35 var(--font-sans);
}

.plan-title:hover,
.plan-desc:hover {
  border-color: var(--line);
}

.plan-title:focus,
.plan-desc:focus,
.plan-grid select:focus,
.plan-grid input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.plan-desc {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

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

.plan-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
}

.plan-grid .is-wide {
  grid-column: 1 / -1;
}

.plan-grid select,
.plan-grid input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}

.plan-grid select:disabled {
  background: var(--surface-sunk);
  color: var(--ink-2);
  opacity: 1;
}

.plan-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}

.plan-people > span:first-child {
  margin-right: 2px;
}

.plan-person {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
}

.plan-person.is-on {
  border-color: var(--ink-deep);
  background: var(--ink-deep);
  color: var(--surface);
}

.plan-note,
.plan-error {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.plan-error {
  color: var(--danger);
}
.plan-card.is-done {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-style: dashed;
  background: var(--surface-sunk);
  box-shadow: none;
  font-size: 12px;
  color: var(--muted);
}

.plan-card.is-done svg {
  width: 14px;
  height: 14px;
  color: var(--success);
}

.plan-card.is-done strong {
  overflow: hidden;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.plan-foot {
  position: sticky;
  bottom: -14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 0 2px;
  background: linear-gradient(transparent, var(--surface) 30%);
}

.plan-foot.is-closed {
  position: static;
  background: none;
}

.plan-sum {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.plan-reopen-history {
  display: block;
  height: 26px;
  margin-top: 6px;
  font-size: 11.5px;
}

/* One quiet receipt per executed step, so a multi-step run stays scannable. */
.agent-step {
  align-self: stretch;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-sunk);
  border-left: 2px solid var(--accent-line);
  border-radius: 0 7px 7px 0;
  padding: 7px 10px;
  animation: wcRiseIn var(--t-slow) var(--ease-out) both;
}

/* A settled run folds its cards and receipts under one line. */
.agent-run {
  align-self: stretch;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.agent-run > summary {
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--muted);
  list-style-position: inside;
}

.agent-run > summary:hover {
  color: var(--ink);
}

.agent-run[open] {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
}

.agent-run[open] > :not(summary) {
  margin: 0 8px;
}

.agent-form .secondary-btn {
  height: 36px;
  padding: 0 12px;
  flex-shrink: 0;
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--accent-soft-2);
}

.agent-form .secondary-btn:hover {
  border-color: var(--danger);
  background: var(--accent-soft-2);
}

.agent-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  gap: 7px;
  border: 1px solid var(--accent-line);
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  white-space: nowrap;
}

.agent-icon-btn .icon-slot {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* The tools and the box they act on read as one surface. */
.agent-composer {
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
  padding: 10px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-composer .agent-tools {
  margin-bottom: 0;
}

.agent-composer .agent-form {
  border-top: 0;
  padding: 0;
  background: none;
}

/* 规划任务 is a switch, not a submit: it marks the next message. */
.agent-plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.agent-plan-toggle:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.agent-plan-toggle.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-dark);
  font-weight: 600;
}

.agent-plan-toggle .icon-slot {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

/* Voice input: the mic sits in the composer and pulses while listening. */
.agent-mic-btn {
  width: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.agent-mic-btn.is-on {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
  animation: agent-mic-pulse 1.4s ease-in-out infinite;
}

.agent-mic-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* Speech-to-text settings sit under the chat settings in the config panel. */
.agent-asr-config {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.agent-asr-config.hidden {
  display: none;
}

.agent-asr-config .agent-config-title {
  margin-bottom: 6px;
}

.agent-asr-config label {
  margin-top: 10px;
}

.agent-asr-config .agent-config-actions {
  margin-top: 12px;
}

/* The chip that says what a message is asking for. */
.agent-intent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.agent-message.user .agent-intent {
  background: var(--surface);
}

/* Role and model state, at a glance. */
.agent-role-chip {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

.agent-role-chip.is-operator {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-dark);
}

.agent-model {
  max-width: 118px;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--faint);
  font-size: 10px;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-model.ready {
  color: var(--success);
  border-color: var(--c-green-line);
  background: var(--success-soft);
}

/* Sample prompts on an empty transcript. */
.agent-samples {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-sample {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 12px;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}

.agent-sample:hover {
  border-style: solid;
  border-color: var(--accent-line);
  background: var(--surface-sunk);
  color: var(--ink);
  transform: translateX(3px);
}

.agent-sample.is-plan {
  color: var(--accent-dark);
  border-color: var(--accent-line);
}

.agent-top-btn:active {
  transform: translateY(0) scale(.97);
}

.agent-top-btn:hover {
  transform: translateY(-1px);
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.agent-top-btn .icon-slot {
  transition: transform .5s var(--ease-spring);
  width: 15px;
  height: 15px;
  font-size: 15px;
  color: var(--accent);
}

.agent-top-btn:hover .icon-slot {
  transform: rotate(18deg) scale(1.12);
}

/* 19 · Sign-in ----------------------------------------------------------------- */

.auth-locked .app-shell {
  display: none;
}

.auth-locked {
  background: var(--paper);
}

.auth-card {
  width: min(420px,calc(100% - 32px));
  margin: 12vh auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 22px 60px rgba(40,33,25,.12);
}

.auth-card .brand {
  color: var(--ink);
  margin-bottom: 35px;
}

.auth-card h1 {
  font-size: 30px;
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}

.auth-card label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 15px 0;
}

.auth-card input {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  outline: none;
}

.auth-card input:focus {
  border-color: var(--accent);
}

.auth-card .primary-btn {
  width: 100%;
  margin-top: 9px;
}

.login-error {
  min-height: 20px;
  color: var(--danger);
  font-size: 12px;
  margin-top: 8px;
}

/* 20 · Focus ------------------------------------------------------------------- */

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, .14);
}

/* The ring follows each element's own radius. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 21 · Responsive ------------------------------------------------------------- */

/* Three page widths: desktop above 1180px, tablet from 761px to 1180px, phone
   at 760px and below. Task rows and project rows follow the width of their own
   list instead (container queries further down), so a row gets the layout that
   fits the column it sits in, whatever the screen. */

@media (max-width: 1180px) {
  .sidebar {
    width: var(--main-navigation-width, 216px);
    padding: 20px 10px 14px 12px;
  }
  /* The assistant keeps its glyph; 新建项目 lives on the projects page. */
  .top-actions .agent-top-btn {
    width: 38px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }
  .top-actions .agent-top-btn .icon-slot {
    font-size: 15px;
  }
  .topbar #addProjectTopBtn {
    display: none;
  }
  .week-board {
    overflow-x: auto;
  }
  .week-grid {
    min-width: 1050px;
  }
  .gantt-grid {
    --label-width: 174px;
  }
  .gantt-project {
    padding-left: 12px;
    padding-right: 10px;
  }
  .gantt-project small,
  .gantt-range {
    margin-left: 0;
  }
  .gantt-range {
    font-size: 8px;
  }
  .diary-admin-grid {
    grid-template-columns: 1fr;
  }
  .chat-side {
    width: var(--chat-navigation-width, 184px);
  }
}

@media (max-width: 760px) {
  #mainNavToggle,
  .sidebar > .nav-resize-handle,
  .chat-side > .nav-resize-handle { display: none; }
  .sidebar-top { display: block; }
  .week-cells {
    gap: 4px;
  }

  .week-cell {
    padding: 8px 2px 6px;
  }

  .week-row {
    grid-template-columns: minmax(0, 6em) minmax(0, 1fr) auto;
    gap: 10px;
  }
  .view {
    padding: 26px 16px 64px;
  }
  .app-shell {
    display: block;
  }
  .sidebar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 25;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 10px 0 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
    background: var(--paper);
  }
  .brand {
    padding: 0 60px 10px 16px;
    border: 0;
    margin: 0;
    font-size: 15px;
  }
  .brand-mark {
    width: 28px;
    height: 28px;
  }
  /* The account menu stays one tap away: the switcher folds to its avatar at
     the right end of the brand row. */
  .workspace-slot {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 30;
    margin: 0;
  }
  .workspace-switcher {
    margin: 0;
    padding: 4px;
    gap: 0;
  }
  .workspace-switcher > span:not(.avatar) {
    display: none;
  }
  .account-menu {
    left: auto;
    right: 0;
    width: min(300px, calc(100vw - 24px));
  }
  .sidebar-section,
  .sidebar-footer {
    display: none;
  }
  .nav-list {
    display: flex;
    overflow: auto;
    margin: 0;
    padding: 0 12px 10px;
    gap: 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .nav-list::-webkit-scrollbar {
    display: none;
  }
  .nav-item {
    width: auto;
    white-space: nowrap;
    height: 34px;
    padding: 0 12px;
    border-radius: 99px;
    font-size: 13px;
    flex: none;
  }
  .nav-item b {
    display: none;
  }
  .nav-item.active {
    background: var(--surface-sunk);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .nav-item.active .icon-slot {
    color: var(--accent);
  }
  .main-content {
    margin: 0 8px 8px;
    min-height: 0;
    border-radius: 16px;
  }
  .topbar {
    position: static;
    height: 52px;
    padding: 0 16px;
  }
  .breadcrumbs,
  .top-actions #inboxBtn {
    display: none;
  }
  .top-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .top-actions .agent-top-btn,
  .top-actions .icon-btn {
    width: 36px;
    height: 36px;
  }
  .top-actions .primary-btn {
    padding: 0 11px;
    height: 36px;
  }
  .page-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
  }
  .page-intro h1 {
    font-size: 28px;
  }
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .schedule-scope label {
    justify-content: space-between;
    width: 100%;
  }
  #todayView .page-intro {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  #todayView .page-intro > .date-chip {
    margin-left: 0;
  }
  .date-chip {
    flex-shrink: 0;
  }
  .day-tab {
    width: 72px;
    padding: 12px 0 10px;
  }
  .day-tab strong {
    font-size: 34px;
    margin-top: 14px;
  }
  .daily-progress {
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .daily-progress .progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .daily-progress div strong,
  .daily-progress .progress-percent {
    font-size: 22px;
  }
  .progress-percent {
    grid-column: 2;
    grid-row: 1;
  }
  .quick-tabs {
    gap: 22px;
  }
  .daily-project-card {
    padding: 14px 10px 8px;
    border-radius: 14px;
  }
  .daily-project-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px 12px;
  }
  .daily-project-meta {
    text-align: left;
  }
  .week-board {
    overflow: visible;
  }
  .week-grid {
    display: block;
    min-width: 0;
    min-height: 0;
  }
  .week-day,
  .week-day:first-child {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 12px;
    padding: 12px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .week-day.today::before {
    top: 0;
    bottom: 0;
    left: -16px;
    right: auto;
    width: 3px;
    height: auto;
  }
  .week-day-head,
  .week-day:first-child .week-day-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2px 0;
    margin: 0;
    border: 0;
  }
  .week-day-open {
    flex-direction: column;
    gap: 4px;
  }
  .week-day-tasks:empty::before {
    content: '—';
    color: var(--line-strong);
  }
  .week-day.is-quiet {
    padding: 6px 0;
  }
  .week-day.is-quiet .week-day-open {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
  .week-day.is-quiet .week-day-open strong {
    font-size: 16px;
  }
  .week-day.is-quiet .week-day-tasks:empty::before {
    content: none;
  }

  .week-day-add,
  .week-day:first-child .week-day-add {
    position: static;
    grid-column: 2;
    margin-top: 6px;
    opacity: 1;
    height: 28px;
  }
  .project-node {
    padding: 14px 10px 8px;
    border-radius: 14px;
  }
  .project-node-heading {
    flex-direction: column;
    padding: 20px 18px 4px;
    gap: 14px;
  }
  .project-node .project-title h3 {
    font-size: 21px;
  }
  .project-node-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .project-node .project-members {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    margin: 14px 18px 0;
  }
  .project-node .project-members > span {
    display: block;
  }
  .project-tree-label {
    padding: 12px 18px;
    flex-wrap: wrap;
  }
  .timeline-toolbar {
    gap: 8px;
  }
  .timeline-toolbar #timelineVisibleRange {
    font-size: 9px;
  }
  .timeline-controls {
    gap: 4px;
  }
  .timeline-controls .secondary-btn {
    font-size: 11px;
    padding: 0 8px;
  }
  .timeline-scroll {
    max-height: 60vh;
  }
  .gantt-grid {
    --label-width: 128px;
  }
  .gantt-range {
    display: none;
  }
  .inbox-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 4px;
  }
  .inbox-icon {
    width: 34px;
    height: 34px;
  }
  .inbox-item .task-arrow {
    display: none;
  }
  .diary-week-toolbar,
  .notebook-shelf-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .diary-day-card {
    flex-basis: 155px;
  }
  .notebook-paper {
    padding: 22px 18px;
  }
  .diary-load-row {
    grid-template-columns: 65px 72px 1fr 36px;
  }
  .diary-date-nav {
    max-width: none;
  }
  .diary-log-toolbar {
    justify-content: space-between;
    align-items: flex-start;
  }
  .diary-log-toolbar label {
    flex-direction: column;
    align-items: flex-start;
  }
  .achievement-stats {
    grid-template-columns: 1fr;
  }
  .achievement-card {
    padding: 16px;
  }
  .achievement-card-head {
    flex-direction: column;
    gap: 8px;
  }
  .achievement-lifecycle li {
    min-width: 116px;
  }
  .achievement-meta {
    gap: 8px 14px;
  }
  .account-banner {
    flex-wrap: wrap;
  }
  .account-banner .permission-pill {
    margin-left: 0;
  }
  .automation-card {
    display: block;
  }
  .automation-card .secondary-btn {
    margin-top: 14px;
  }
  /* The channel list becomes a strip above the messages, each channel
     without its preview. */
  .chat-room {
    flex-direction: column;
  }
  .chat-side {
    width: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--line);
  }
  .chat-side-head { flex: none; padding: 0 4px; }
  .chat-side.is-nav-collapsed .chat-channels { display: none; }
  .chat-side.is-nav-collapsed .chat-side-title { display: block; }
  .chat-side-title,
  .chat-channel-preview {
    display: none;
  }
  .chat-channels {
    flex-direction: row;
    padding: 8px;
  }
  .chat-channel,
  .chat-channel-body {
    flex: none;
  }
  .chat-channel {
    width: auto;
  }
  .chat-channel-side {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .chat-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }
  .chat-message {
    max-width: 92%;
  }
  .modal {
    padding: 28px 22px 24px;
    border-radius: 16px;
  }
  .task-drawer {
    padding: 28px 20px 32px;
  }
  .drawer-actions,
  .task-form-grid,
  .project-date-fields {
    grid-template-columns: 1fr;
  }
  .project-date-fields {
    gap: 0;
  }
  .task-form-grid .form-field {
    margin-top: 6px;
  }
  .agent-panel {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
    height: min(620px, calc(100vh - 32px));
  }
}

/* Task rows: the full row needs about 800px; below that the index and the
   time go, then the deadline, and under 400px the row folds onto two lines. */
.task-list,
.daily-project-tasks,
.project-task-tree {
  container-type: inline-size;
}

@container (max-width: 800px) {
  .task-card,
  .daily-project-tasks .task-card {
    grid-template-columns: 34px minmax(0, 1fr) 72px 156px 76px 16px;
  }
  .task-card::before,
  .daily-project-tasks .task-card::before,
  .task-time {
    display: none;
  }
}

@container (max-width: 560px) {
  .task-card,
  .daily-project-tasks .task-card {
    grid-template-columns: 34px minmax(0, 1fr) 72px 76px 16px;
  }
  .task-when {
    display: none;
  }
  /* Project rows drop the date and the arrow. */
  .project-task-open {
    grid-template-columns: 34px minmax(0, 1fr) 64px 56px;
  }
  .project-task-open .child-date,
  .project-task-open > span[aria-hidden] {
    display: none;
  }
}

@container (max-width: 420px) {
  .project-child-row,
  .project-child-row[draggable="true"] {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 18px;
    row-gap: 6px;
  }
  .project-child-row > .drag-handle,
  .project-child-row::before {
    display: none;
  }
  .project-child-row > .ghost-btn {
    grid-column: 1;
    justify-self: start;
  }
  .project-task-open {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    row-gap: 2px;
    min-height: 0;
  }
  .project-task-open .priority {
    grid-row: 1 / 3;
    align-self: start;
  }
  .project-task-open .child-assignee {
    grid-column: 2;
    grid-row: 2;
    color: var(--muted);
  }
}

@container (max-width: 400px) {
  .task-card,
  .daily-project-tasks .task-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    row-gap: 4px;
    padding: 12px 16px;
    min-height: 0;
  }
  .task-card .priority {
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 2px;
  }
  .task-main {
    flex-wrap: wrap;
  }
  .task-when {
    display: block;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  .task-ddl em {
    display: none;
  }
  .task-ddl {
    flex-wrap: wrap;
    row-gap: 0;
    max-width: 100%;
  }
  .task-status {
    grid-column: 3;
    grid-row: 1;
  }
  .task-card .assignee-tag {
    display: block;
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    color: var(--muted);
  }
  .task-time,
  .task-arrow {
    display: none;
  }
}

/* 22 · Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .agent-mic-btn.is-on {
    animation: none;
  }
}

/* AI 接入配置: test the address before saving; the header chip switches models. */
.agent-config .agent-config-hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--faint);
}

.agent-config-test {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 2px;
}

.agent-config-test .secondary-btn {
  flex: none;
}

.agent-config-status {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.agent-config-status.is-busy {
  color: var(--muted);
}

.agent-config-status.is-ok {
  color: var(--success);
}

.agent-config-status.is-fail {
  color: var(--danger);
}

.agent-model-slot {
  position: static;
  display: inline-flex;
}

.agent-header { position: relative; }

.agent-model.is-switch {
  cursor: pointer;
}

.agent-model.is-switch::after {
  content: ' ▾';
}

.agent-model-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 12px;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100% - 24px);
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 34px -14px rgba(40, 33, 25, .4);
}

.agent-model-menu.hidden {
  display: none;
}

.agent-model-opt {
  flex: none;
  padding: 7px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--ink-2);
  white-space: normal;
  overflow-wrap: anywhere;
}

.agent-model-opt:hover {
  background: var(--surface-sunk);
}

.agent-model-opt.is-on {
  color: var(--success);
  font-weight: 600;
}

/* 对话记录: the assistant's conversations in a side list, like a general agent's.
   It opens to the left of the transcript, as the plan draft does. */
.agent-panel.is-browsing {
  width: min(700px, calc(100vw - 48px));
}

.agent-panel.is-browsing.is-planning {
  width: min(1240px, calc(100vw - 48px));
}

.agent-sessions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 224px;
  flex: none;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  background: var(--surface-sunk);
  border-right: 1px solid var(--line);
  animation: agentSessionsIn .26s var(--ease-out) both;
}

.agent-sessions.hidden {
  display: none;
}

@keyframes agentSessionsIn {
  from { opacity: 0; transform: translateX(-10px); }
}

.agent-sessions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 4px;
  font-size: 12px;
  color: var(--muted);
}

.agent-sessions-head .icon {
  width: 15px;
  height: 15px;
}

.agent-sessions-user {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
}

.agent-session-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-session {
  display: flex;
  align-items: center;
  border-radius: 9px;
  transition: background var(--t-fast) var(--ease);
}

.agent-session:hover {
  background: var(--rail-hover);
}

.agent-session.is-on {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

.agent-session-open {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.agent-session-open span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--ink);
}

.agent-session.is-on .agent-session-open span {
  font-weight: 600;
}

.agent-session-open small {
  font-size: 10.5px;
  color: var(--faint);
}

.agent-session-act {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-right: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.agent-session:hover .agent-session-act,
.agent-session.is-on .agent-session-act,
.agent-session-act:focus-visible,
.agent-session-act.is-armed {
  opacity: 1;
}

.agent-session-act:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.agent-session-act.is-armed {
  background: var(--danger);
  color: var(--surface);
}

.agent-session-act .icon {
  width: 13px;
  height: 13px;
}

.agent-session-rename {
  flex: 1;
  min-width: 0;
  margin: 3px 4px;
  padding: 5px 7px;
  font: inherit;
  font-size: 12.5px;
  border: 1px solid var(--accent-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}

.agent-sessions-empty {
  padding: 10px 6px;
}

.agent-review-banner {
  display: none;
}

.agent-panel.is-reviewing .agent-review-banner {
  display: block;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--c-blue-ink);
  background: var(--c-blue-soft);
  border-bottom: 1px solid var(--c-blue-line);
}

.agent-panel.is-reviewing .agent-composer {
  display: none;
}

.agent-panel.is-reviewing .agent-draft-area,
.agent-panel.is-reviewing #agentDraftToggle { display: none; }

/* Invisible hit areas: resizing remains available without slider chrome. */
.agent-resize-edge { position: absolute; z-index: 6; touch-action: none; outline-offset: -3px; }
.agent-resize-edge.edge-w { left: 0; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.agent-resize-edge.edge-n { left: 12px; right: 12px; top: 0; height: 8px; cursor: ns-resize; }
.agent-resize-edge.edge-nw { left: 0; top: 0; width: 14px; height: 14px; cursor: nwse-resize; }
body.is-resizing-agent { user-select: none; }
.is-resizing-agent .agent-panel { transition: none; }

/* Respond to the panel's own width as well as the browser viewport. */
@container assistant (max-width: 760px) {
  .agent-panel.is-planning .agent-workspace { flex-direction: column; }
  .agent-panel.is-planning .agent-sessions { width: auto; max-height: 140px; flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .agent-panel.is-planning .agent-draft-area { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .agent-panel.is-planning .agent-conversation { flex: none; }
  .agent-panel.is-planning .agent-messages { display: none; }
  .agent-panel.is-planning .agent-draft-heading { margin-bottom: 12px; }
  .agent-panel.is-planning .agent-draft-heading strong { font-size: 17px; }
  .agent-panel.is-planning .agent-draft-area .plan-foot { bottom: -12px; }
}
@container assistant (max-width: 560px) {
  .agent-workspace { flex-direction: column; }
  .agent-sessions { width: auto; max-height: 140px; flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* 复制 / 修改重发 / 回退 as quiet icons that come up with the message. */
.agent-message-tools {
  gap: 2px;
  margin-top: 6px;
}

.agent-message-tools .agent-tool-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  color: var(--faint);
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.agent-message-tools .agent-tool-btn:hover {
  background: var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}

.agent-message-tools .agent-tool-btn.is-done {
  color: var(--success);
}

.agent-message-tools .agent-tool-btn .icon {
  width: 13px;
  height: 13px;
}

@media (hover: hover) {
  .agent-message .agent-message-tools {
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
  }

  .agent-message:hover .agent-message-tools,
  .agent-message:focus-within .agent-message-tools {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .agent-panel.is-browsing {
    width: calc(100vw - 24px);
  }

  .agent-sessions {
    width: auto;
    max-height: 200px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Quiet evidence of on-demand retrieval, without exposing SQL in the chat. */
.agent-query-summary { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.plan-card.is-delete { border-color: var(--danger); background: var(--c-coral-soft); }
.plan-target { margin: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--ink-2); }
.plan-delete-impact { margin: 0; color: var(--danger-ink); font-size: 12px; line-height: 1.6; }
.plan-delete-confirm, .plan-change-reason { display: grid; gap: 6px; font-size: 12px; }
.plan-delete-confirm:has(input[type="checkbox"]) { display: flex; align-items: start; }
.plan-delete-confirm input:not([type="checkbox"]), .plan-change-reason textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 7px; background: var(--surface); color: var(--ink); font: inherit; }
.plan-diff { display: grid; gap: 6px; padding: 8px; background: var(--surface-sunk); border-radius: 8px; font-size: 11px; line-height: 1.5; }
.plan-diff > div { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 2px 8px; overflow-wrap: anywhere; }
.plan-diff > div > span { grid-row: span 2; color: var(--muted); }
.plan-diff del { color: var(--muted); }
.plan-diff strong { color: var(--ink); font-weight: 500; }
.plan-diff p { margin: 0; color: var(--muted); }
.plan-reload { justify-self: start; font-size: 11px; }

.plan-selection { position: sticky; top: 0; z-index: 2; background: var(--paper); display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; margin: 12px 0; padding: 10px 0; border-block: 1px solid var(--line); font-size: 12px; }
.plan-select-label, .plan-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.plan-select-label input, .plan-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.plan-select-count { flex: 1; min-width: 64px; color: var(--muted); font-size: 11px; }
.plan-selection button { font-size: 11px; padding: 5px 8px; }
.plan-card.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.plan-card-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.plan-card-actions button { padding: 5px 13px; min-height: 30px; font-size: 12px; }
.plan-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; text-align: center; font-size: 12px; }
.plan-empty svg { color: var(--success); width: 22px; height: 22px; }
.plan-empty strong { color: var(--ink); font: 600 16px/1.4 var(--font-serif); }

/* Reviewed assistant states: selection scope, recovery and narrow chat access. */
.agent-status { margin: 0; padding: 0 16px; color: var(--muted); font-size: 12px; }
.agent-status:empty { display: none; }
.agent-pane-tabs { display: none; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.agent-pane-tabs button { border: 1px solid transparent; border-radius: 7px; padding: 8px 12px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; }
.agent-pane-tabs [aria-selected="true"] { background: var(--surface); border-color: var(--line); color: var(--accent-dark); }
#agentReplyBadge { color: var(--accent-dark); }
.plan-pick { min-width: 36px; min-height: 36px; justify-content: center; margin: -8px -5px -8px -8px; flex-shrink: 0; }
.plan-select-label { min-height: 36px; padding: 0 4px; }
.plan-selection .plan-accept-selected { font-weight: 600; }
.plan-save-status { color: var(--muted); font-size: 11px; }
.plan-foot .plan-sum { min-width: 70px; font-size: 11px; }
.agent-action-fields { margin: 0; display: grid; gap: 8px; }
.agent-action-fields > div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; }
.agent-action-fields dt { color: var(--muted); }
.agent-action-fields dd { margin: 0; overflow-wrap: anywhere; }
.agent-action-impact { margin: 0; color: var(--muted); font-size: 12px; }
.agent-action-details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-account-password { display: grid; gap: 6px; }
.agent-account-password input { min-width: 0; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.agent-account-password small { color: var(--muted); }
.agent-config .agent-key-choice { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.agent-config .agent-key-choice input { width: 18px; height: 18px; margin: 0; }
.agent-setup p { color: var(--muted); }
@container assistant (max-width: 760px) {
  .agent-panel.is-planning .agent-pane-tabs:not(.hidden) { display: flex; }
  .agent-panel.is-planning.is-chat-pane .agent-draft-area { display: none; }
  .agent-panel.is-planning.is-chat-pane .agent-conversation { flex: 1; min-height: 0; }
  .agent-panel.is-planning.is-chat-pane .agent-messages { display: grid; }
}
@media (max-width: 760px) {
  .agent-panel.is-planning .agent-pane-tabs:not(.hidden) { display: flex; }
  .agent-panel.is-planning.is-chat-pane .agent-draft-area { display: none; }
  .agent-panel.is-planning.is-chat-pane .agent-conversation { flex: 1; min-height: 0; }
  .agent-panel.is-planning.is-chat-pane .agent-messages { display: grid; }
}
@container assistant (max-width: 560px) {
  .plan-foot { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .plan-foot .plan-add { grid-column: 1; grid-row: 1; justify-self: start; }
  .plan-foot .plan-cancel { grid-column: 2; grid-row: 1; }
  .plan-foot .plan-sum { grid-column: 1; grid-row: 2; align-self: center; }
  .plan-foot .plan-confirm { grid-column: 2; grid-row: 2; }
}
@media (pointer: coarse) { .plan-pick { min-width: 44px; min-height: 44px; } }

/* One control scale for the assistant, independent of page-level button sizes. */
.agent-panel :is(.primary-btn, .secondary-btn, .ghost-btn) {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0;
  box-shadow: none;
}
.agent-panel .primary-btn { border-color: transparent; }
.agent-panel .primary-btn::after { display: none; }
.agent-panel :is(.primary-btn, .secondary-btn):hover { transform: none; box-shadow: none; }
.agent-panel .plan-card-actions button { min-width: 64px; }
.agent-panel .plan-selection button { min-width: 90px; }
.plan-selection-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.agent-action-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.agent-panel .agent-action-buttons button { min-width: 0; padding-inline: 8px; }
.agent-panel .agent-config-actions button { flex: 1; }
.agent-panel .agent-config-actions { width: 100%; max-width: 360px; margin-left: auto; }
.agent-panel :is(.agent-plan-toggle, .agent-mode-opt) { height: 32px; min-height: 32px; box-sizing: border-box; }
.agent-panel .agent-mode { align-items: center; padding: 0; }
.agent-panel .agent-mic-btn { width: 32px; padding: 0; flex-shrink: 0; }
.agent-panel .agent-header-actions { align-items: center; }
.agent-panel .agent-header-actions > button { height: 28px; min-height: 28px; }
.plan-save-status:empty, .plan-board-head > span:empty, .plan-note:empty { display: none; }
.plan-draft-tools { margin: 10px 0; }

/* Message actions sit below the bubble; small glyphs keep the text dominant. */
.agent-message.has-tools { padding: 0; background: transparent; }
.agent-message-body { padding: 10px 12px; background: var(--surface-sunk); border-radius: 14px; }
.agent-message.user .agent-message-body { background: var(--accent-soft-2); border-radius: 12px 12px 5px 12px; }
.agent-message.has-tools .agent-message-tools { height: 22px; gap: 1px; margin: 3px 0 0; line-height: 1; }
.agent-message.user .agent-message-tools { justify-content: flex-end; }
.agent-message-tools .agent-tool-btn { width: 22px; height: 22px; min-height: 0; flex: 0 0 22px; padding: 0; border: 0; background: transparent; line-height: 1; }
.agent-message-tools .agent-tool-btn .icon { width: 12px; height: 12px; stroke-width: 1.5; }
.agent-message-tools .agent-tool-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) {
  .agent-message.has-tools .agent-message-tools { height: 32px; gap: 4px; }
  .agent-message-tools .agent-tool-btn { width: 32px; height: 32px; flex-basis: 32px; }
}

/* Fixed-period multiplicity stays subordinate to the task name. */
.stack-badge { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--accent-line); border-radius: 5px; background: var(--accent-soft); color: var(--accent-dark); font: 600 11px/1.2 var(--font-sans); white-space: nowrap; vertical-align: middle; }
/* The name may be cut to two lines; the badge sits beside it, never inside the cut. */
.week-task-title { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.week-task-title .week-task-name { flex: 1 1 auto; min-width: 0; }
.week-task-title .stack-badge { flex: none; margin: 1px 0 0; padding: 1px 4px; font-size: 10px; }

/* Binary settings save immediately; multi-value rules keep segmented choices. */
.repeat-stacking-card { display: flex; align-items: center; gap: 16px; }
.week-start-card { flex-wrap: wrap; }
.week-start-card > div:first-child { flex: 1 1 260px; min-width: 0; }
.week-start-card .week-start-seg { flex: none; }
.settings-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.settings-switch-control { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; flex: none; }
.settings-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.settings-switch-track { position: relative; width: 36px; height: 22px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface-sunk); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.settings-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.settings-switch input:checked + .settings-switch-track { background: var(--accent); border-color: var(--accent); }
.settings-switch input:checked + .settings-switch-track::after { transform: translateX(14px); background: var(--surface); }
.settings-switch input:focus-visible + .settings-switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.settings-switch:has(input:disabled) { opacity: .6; cursor: wait; }
.settings-switch input:disabled { cursor: wait; }
.project-automation-card { display: block; }
.automation-setting-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.automation-setting-head > div:first-child { min-width: 0; }
.project-automation-card .automation-actions { margin-top: 14px; }
.project-automation-card .secondary-btn { margin-top: 0; }

#settingsView .automation-card + .automation-card { margin-top: 18px; }

.stack-period-list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.stack-period-list > span { white-space: nowrap; }

.history-period { margin-top: 14px; }
.history-period h4 { margin: 0 0 8px; color: var(--ink-2); font: 600 12px/1.4 var(--font-sans); }
.history-dates { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 4px; color: var(--muted); font-size: 11px; }
.history-dates > span { white-space: nowrap; }
.task-main:has(> .stack-badge) .task-name { flex: 0 1 auto; max-width: calc(100% - 40px); }
.task-main > .stack-badge { display: inline-flex; flex-shrink: 0; margin-left: 0; overflow: visible; }
/* The period badge replaces redundant fixed/carry labels in a compact row. */
.task-main:has(> .stack-badge) > :is(.fixed-badge,.carried-badge,.defer-target) { display: none; }

/* A group that just took in another period: the count gives one small bump. */
.stack-badge.is-bumped {
  animation: stackBump .55s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes stackBump {
  0% { transform: scale(.7); background: var(--accent-soft-2); }
  45% { transform: scale(1.18); }
  100% { transform: none; }
}

/* Shared dictation keeps textareas and their existing form semantics intact. */
.voice-field { position: relative; display: block; min-width: 0; width: 100%; }
.voice-field > textarea { display: block; width: 100%; resize: none; }
.voice-field:has(> .field-voice-btn:not([hidden])) > textarea { padding-right: 42px; }
.chat-compose > .voice-field { flex: 1; width: auto; }
.field-voice-btn { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: var(--surface); cursor: pointer; }
.field-voice-btn[hidden] { display: none; }
.field-voice-btn .icon-slot, .field-voice-btn svg { width: 14px; height: 14px; }
.field-voice-btn:hover, .field-voice-btn.is-on { color: var(--accent); background: var(--surface-sunk); }
.field-voice-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

.field-voice-btn.is-transcribing svg { visibility: hidden; }
.field-voice-btn.is-transcribing::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--line); border-top-color: currentColor; border-radius: 50%; animation: fieldVoiceSpin .8s linear infinite; }
@keyframes fieldVoiceSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .field-voice-btn.is-transcribing::after { animation: none; } }

/* 项目会议：原稿与纪要分栏前的轻量编辑结构，沿用项目空间的线条和间距。 */
.meeting-list { display: grid; gap: 6px; }
.space-tabs { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--line-soft); }
.space-tab { padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.space-tab.is-on { border-bottom-color: var(--accent); color: var(--ink); }
.space-tab:focus-visible, .project-nav-resource:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.meeting-workspace { display: grid; grid-template-columns: minmax(170px, 0.65fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.meeting-detail { min-width: 0; padding-left: 24px; border-left: 1px solid var(--line-soft); }
.meeting-detail h2 { margin: 0 0 18px; font-size: 20px; }
.space-empty { padding: 20px 0; }
.project-nav-project { display: flex; align-items: center; min-width: 0; }
.project-nav-project > .project-nav-item { flex: 1; min-width: 0; }
.project-nav-project[data-node-level="1"] { margin-left: 20px; }
.project-nav-project > .nav-row[data-level="1"] { padding-left: 10px; }
.project-nav.is-nav-collapsed .project-node-caret, .project-nav.is-nav-collapsed .project-nav-resources { display: none; }
.project-nav.is-nav-collapsed .project-nav-project { margin-left: 0; }
.project-node-caret { flex: 0 0 24px; width: 24px; height: 28px; display: grid; place-items: center; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.project-node-caret .icon { width: 12px; height: 12px; }
.project-node-caret[aria-expanded="true"] .icon { transform: rotate(90deg); }
.project-nav-resources { display: grid; gap: 2px; margin: 2px 8px 8px 28px; padding-left: 8px; border-left: 1px solid var(--line-soft); }
.project-nav-resource { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 7px; border: 0; background: none; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 12px; text-align: left; cursor: pointer; }
.project-nav-resource:hover { background: var(--surface-sunk); color: var(--ink); }
.project-nav-resource > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-nav-resource .icon { width: 13px; height: 13px; flex-shrink: 0; }
.nav-node.is-drag-source { display: none; }
@media (max-width: 800px) { .meeting-workspace { grid-template-columns: 1fr; gap: 16px; } .meeting-detail { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--line-soft); } }
.meeting-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.meeting-row:hover { border-color: var(--accent-line); background: var(--surface-sunk); }
.meeting-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }
.meeting-icon .icon { width: 15px; height: 15px; }
.meeting-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.meeting-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.meeting-copy small { color: var(--muted); font-size: 11px; }
.meeting-arrow .icon { width: 14px; height: 14px; color: var(--faint); }
.meeting-editor-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.meeting-live-bar { display: flex; align-items: center; gap: 10px; margin: -2px 0 12px; }
.meeting-live-bar .muted { font-size: 11px; }
.meeting-minutes-preview { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.meeting-minutes-preview h3 { margin: 0; font-size: 14px; }
.meeting-minutes-body { min-height: 70px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface-sunk); white-space: pre-wrap; line-height: 1.65; font-size: 13px; }
@media (max-width: 640px) { .meeting-editor-grid { grid-template-columns: 1fr; } .meeting-live-bar { align-items: flex-start; flex-direction: column; } }

.settings-prompt { display: block; width: 100%; min-height: 130px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; line-height: 1.6; resize: none; }
.settings-prompt:focus { outline: none; border-color: var(--accent-line); }
#meetingPromptSetting .automation-setting-head { align-items: flex-start; }

.space-file-create { position: relative; }
.space-file-create summary { list-style: none; cursor: pointer; }
.space-file-create summary::-webkit-details-marker { display: none; }
.space-file-options { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); min-width: 145px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 5px 18px #00000012; }
.space-file-options button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 6px; padding: 9px 10px; background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.space-file-options button:hover, .space-file-options button:focus-visible { background: var(--surface-sunk); }
.project-file-meetings { margin-top: 6px; }

/* 23 · 系统设置 — categories, search, one row per setting ------------------- */
.settings-layout {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.settings-nav-item .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.settings-nav-item:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.settings-nav-item.is-on {
  background: var(--surface-sunk);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}

.settings-nav-item.is-empty {
  opacity: .38;
}

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

.settings-search {
  position: sticky;
  top: 72px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--faint);
  box-shadow: 0 12px 18px -16px rgba(64, 54, 42, .35);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.settings-search:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 12px 18px -16px rgba(64, 54, 42, .35);
}

.settings-search .icon-slot,
.settings-search .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.settings-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.settings-empty {
  margin: 0;
  padding: 56px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.settings-group {
  padding-top: 34px;
  scroll-margin-top: 136px;
}

.settings-group-title {
  margin: 0 0 4px;
  font: 600 19px/1.3 var(--font-serif);
  color: var(--ink);
}

.setting-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 40px;
  padding: 18px 4px 18px 18px;
  border-top: 1px solid var(--line-soft);
  transition: opacity var(--t) var(--ease);
}

.settings-group-title + .setting-row {
  border-top: 0;
}

.setting-row.is-wide {
  grid-template-columns: minmax(0, 1fr);
}

/* A setting that differs from its default carries a bar, as in an editor. */
.setting-row::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--t) var(--ease);
}

.setting-row.is-modified::before {
  background: var(--c-blue);
}

.setting-row.is-forbidden,
.setting-row.is-filtered,
.settings-group.is-forbidden,
.settings-group.is-filtered {
  display: none;
}

.setting-row.is-muted .setting-body {
  opacity: .45;
}

.setting-text h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.setting-text p {
  max-width: 62ch;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

.setting-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.setting-status {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--success);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.setting-status.is-on {
  opacity: 1;
  transform: none;
}

.setting-reset {
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-blue-ink);
}

.setting-reset:hover {
  text-decoration: underline;
}

.setting-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.setting-control .settings-switch > span:first-child {
  color: var(--muted);
  font-size: 12.5px;
}

.setting-body {
  min-width: 0;
}

.setting-row .rule-list {
  margin-top: 2px;
}

.rule-add {
  margin-top: 10px;
}

.setting-row .collection-form {
  max-width: 520px;
}

.settings-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
}

.settings-input.is-time {
  width: 132px;
}

.settings-input:focus {
  outline: none;
  border-color: var(--accent-line);
}

.collection-hint:empty {
  display: none;
}

.collection-hint {
  margin: 0;
  font-size: 12px;
}

.setting-row .settings-prompt {
  margin-top: 4px;
}

.setting-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .settings-nav {
    top: 60px;
    z-index: 5;
    flex-direction: row;
    gap: 4px;
    margin: 0 calc(var(--page-x) * -1);
    padding: 8px var(--page-x);
    overflow-x: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    scrollbar-width: none;
  }

  .settings-nav-item {
    flex: none;
    height: 32px;
  }

  .settings-nav-item.is-on {
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .settings-search {
    position: static;
    margin-top: 14px;
  }

  .settings-group {
    scroll-margin-top: 120px;
  }

  .setting-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .setting-control {
    justify-content: flex-start;
  }
}

/* 系统设置 · 子页面: a setting with several controls opens on its own page. */
.setting-row.is-link {
  cursor: pointer;
  border-radius: 10px;
}

.setting-row.is-link:hover,
.setting-row.is-link:focus-visible {
  background: var(--surface-sunk);
  outline: none;
}

.setting-row.is-link:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-line);
}

.setting-summary {
  margin-right: 10px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.setting-chevron {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--faint);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.setting-row.is-link:hover .setting-chevron {
  color: var(--ink-2);
  transform: translateX(2px);
}

.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.settings-back .icon {
  width: 13px;
  height: 13px;
}

.settings-back:hover {
  color: var(--accent-dark);
}

.settings-page {
  max-width: 860px;
  animation: wcFadeIn .2s var(--ease) both;
}

.settings-sheet + .settings-sheet {
  margin-top: 36px;
}

.settings-sheet-lead {
  max-width: 64ch;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.settings-loading {
  padding: 40px 0;
}

.prompt-vars {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 8px;
  font-size: 12.5px;
}

.prompt-vars dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent-dark);
}

.prompt-vars dd {
  margin: 0;
  color: var(--muted);
}

.settings-page .settings-prompt {
  min-height: 300px;
}

/* 来源 */
.ai-sources {
  display: grid;
  gap: 10px;
}

.ai-source,
.ai-source-editor {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.ai-source {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}

.ai-source-main {
  min-width: 0;
}

.ai-source-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-source-title strong {
  font-size: 14px;
}

.ai-chip {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--c-blue-soft);
  color: var(--c-blue-ink);
  font-size: 11px;
  font-weight: 600;
}

.ai-chip.is-speech {
  background: var(--c-green-soft);
  color: var(--c-green-ink);
}

.ai-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.ai-source-status {
  margin: 8px 0 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ai-source-status.is-ok {
  color: var(--success);
}

.ai-source-status.is-fail {
  color: var(--danger);
}

.ai-source-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.ai-source-actions .ghost-btn.is-armed {
  color: var(--danger);
}

.ai-empty {
  margin: 0;
  padding: 14px 0;
}

.ai-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ai-source-editor {
  padding: 16px;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ai-editor-title {
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 600;
}

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

.ai-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.ai-field.is-wide {
  grid-column: 1 / -1;
}

.ai-field input,
.ai-field select,
#aiContextChars {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.ai-field input:focus,
.ai-field select:focus,
#aiContextChars:focus {
  outline: none;
  border-color: var(--accent-line);
}

.ai-field input:disabled {
  background: var(--surface-sunk);
  color: var(--muted);
}

.ai-check {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--ink-2);
}

.ai-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* 使用场景 */
.ai-scene {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.ai-scene-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-scene-controls .ai-field {
  flex: 1 1 160px;
}

.ai-scene-controls .ai-field.is-short {
  flex: 0 1 90px;
}

#aiContextChars {
  width: auto;
  min-width: 180px;
}

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

  .ai-source {
    flex-direction: column;
  }

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

  .setting-summary {
    display: none;
  }
}

.ai-source-actions .secondary-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}

/* 项目空间 · 导航 → 项目 → 文件 ------------------------------------------------
   全部项目 and a folder show each project as a short summary; the project's
   page holds its work, behind tabs, with one primary action in view. */
#projectGrid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

#projectGrid .temp-task-node {
  grid-column: 1 / -1;
}

.project-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.summary-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.summary-head .project-title-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card.project-summary .summary-desc {
  margin: 0;
  min-height: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.summary-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.summary-progress .progress {
  flex: 1;
}

.summary-progress .progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.summary-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
}

.summary-people {
  display: flex;
  align-items: center;
  margin-right: auto;
  padding-left: 2px;
}

.summary-people .avatar {
  width: 24px;
  height: 24px;
  margin-left: -2px;
  font-size: 10px;
  box-shadow: 0 0 0 2px var(--surface);
}

.summary-people b {
  margin-left: 6px;
  font-weight: 500;
}

.summary-mine {
  color: var(--accent-dark);
  font-weight: 600;
}

/* The eyebrow names the levels above; each one opens. */
.space-crumb {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

.space-crumb:hover,
.space-crumb:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* One line of facts and the project's actions, then the tabs. */
#projectSpace {
  display: block;
}

#projectSpace > .space-description {
  margin: -14px 2px 14px;
}

.space-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 18px;
}

.space-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.space-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.space-more {
  position: relative;
}

.space-more summary {
  list-style: none;
  cursor: pointer;
}

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

.space-more summary .icon {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

.space-more[open] summary .icon {
  transform: rotate(180deg);
}

.space-more .space-file-options {
  min-width: 156px;
}

.space-more .space-file-options .is-danger {
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 6px 6px;
  color: var(--danger);
}

.space-more .space-file-options .is-danger:hover {
  background: var(--c-coral-soft);
}

.space-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}

.space-tab {
  position: relative;
  flex: none;
  padding: 10px 12px 11px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}

.space-tab span {
  margin-left: 2px;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.space-tab:hover {
  color: var(--ink);
}

.space-tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
}

.space-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.space-tab:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: -2px;
  border-radius: 6px;
}

.space-panel {
  display: grid;
  gap: 14px;
}

.space-panel[hidden] {
  display: none;
}

/* Keep deletion visible alongside the item it affects. */
.space-files .file-list {
  display: grid;
}

.space-files .file-row {
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  width: 100%;
  padding: 9px 6px;
  border-radius: 8px;
  border-top: 0;
  border-bottom: 1px solid var(--line-soft);
}

.space-files .file-row:hover {
  background: var(--surface-sunk);
}

.space-files .meeting-row {
  display: grid;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 8px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.space-files .file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink);
}

.space-files button.file-name {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.file-actions .text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 6px;
  font-size: 12px;
  text-decoration: none;
}

.project-file-details {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.project-file-details > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.project-file-details dt { color: var(--muted); }
.project-file-details dd { margin: 0; overflow-wrap: anywhere; }

.space-files .file-row small {
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-ext.is-meeting {
  background: var(--c-blue-soft);
  color: var(--c-blue-ink);
}

.space-files .meeting-arrow {
  display: grid;
  place-items: center;
}

.space-files .file-delete {
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
  padding: 0;
  border: 0;
  color: var(--danger);
  opacity: 1;
  font-size: 12px;
}

.space-files .file-delete:hover {
  color: var(--danger);
  background: transparent;
}

.space-empty {
  margin: 0;
  padding: 26px 0 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.space-files .space-drop-hint {
  padding: 10px 0 0;
  border: 0;
  background: none;
  font-size: 11.5px;
}

.space-files.is-over {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
  background: var(--accent-soft);
}

/* 分工 reads as text until it is edited. */
#projectSpace .staff-role {
  background: transparent;
  border-color: transparent;
}

#projectSpace .staff-role:hover {
  border-color: var(--line);
}

#projectSpace .staff-role:focus {
  border-color: var(--accent-line);
  background: var(--surface);
  outline: none;
}

/* On a phone the directory is the 全部项目 page itself; inside a project the
   crumbs lead back up, so the tree steps aside. */
@media (max-width: 760px) {
  #projectsView.is-in-project .project-nav-rail {
    display: none;
  }
}

@media (max-width: 760px) {
  #projectGrid {
    grid-template-columns: 1fr;
  }

  #projectSpace > .space-description {
    margin-top: -8px;
  }

  .space-actions {
    width: 100%;
  }

  .space-actions .primary-btn {
    flex: 1;
    justify-content: center;
  }

  .space-files .file-row {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: 2px;
  }

  .space-files .file-ext {
    grid-row: 1 / span 2;
  }

  .space-files .file-row small {
    grid-column: 2;
    grid-row: 2;
  }

  .space-files .file-row > :last-child {
    grid-column: 2;
    grid-row: 3;
  }
}


.setting-row.is-link,
.setting-row.is-link .setting-control {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: flex-end;
}

/* 系统设置 · button roles. One filled primary per editing context (save, or the
   first step of an empty page); a quiet outline for commands that run now; text
   buttons for add and edit, with add in the accent ink; delete stays muted until
   armed, then turns red. Going elsewhere is a row with a chevron, not a button. */
/* Roles differ in colour and emphasis, never in the height of peer actions. */
#settingsView .primary-btn,
#settingsView .secondary-btn,
#settingsView .text-btn {
  height: 32px;
}

#settingsView .primary-btn {
  box-shadow: none;
}

#settingsView .primary-btn::after {
  display: none;
}

#settingsView .primary-btn:hover {
  transform: none;
  box-shadow: none;
}

#settingsView .secondary-btn {
  padding: 0 12px;
  border-color: var(--line-strong);
  border-radius: 8px;
  font-size: 12.5px;
  box-shadow: none;
}

#settingsView .secondary-btn:hover {
  transform: none;
  background: var(--surface-sunk);
}

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.text-btn:hover,
.text-btn:focus-visible {
  background: var(--surface-sunk);
  color: var(--ink);
  outline: none;
}

.text-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-line);
}

.text-btn .icon {
  width: 14px;
  height: 14px;
}

.text-btn.is-add {
  margin-left: -9px;
  color: var(--accent-dark);
}

.text-btn.is-add:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

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

.text-btn.is-danger:hover {
  background: var(--c-coral-soft);
  color: var(--danger);
}

.text-btn.is-danger.is-armed {
  background: var(--danger);
  color: var(--surface);
}

/* The way back is a control, not an eyebrow. */
#settingsView .page-intro .eyebrow:has(.settings-back) {
  letter-spacing: 0;
  text-transform: none;
}

#settingsView .page-intro .eyebrow:has(.settings-back)::before {
  display: none;
}

.settings-back {
  height: 30px;
  margin-left: -10px;
  padding: 0 10px 0 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.settings-back:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.settings-back .icon {
  width: 15px;
  height: 15px;
}

.ai-source-usage {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}

.ai-source-actions {
  gap: 2px;
}

.ai-empty-state {
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface-sunk);
}

.ai-empty-state strong {
  font-size: 14px;
}

.ai-empty-state p {
  margin: 6px 0 14px;
  font-size: 12.5px;
  color: var(--muted);
}

.ai-empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ai-scene-empty {
  align-self: center;
  font-size: 12.5px;
  color: var(--faint);
}

.ai-scene-controls .ai-field.is-short {
  flex: 0 0 72px;
}

.ai-scene-controls .ai-field:not(.is-short) {
  flex: 1 1 180px;
  min-width: 0;
}

/* Model ids are long (Qwen/Qwen3-ASR-0.6B): give the controls the wider share
   on desktop, and one select per line on a phone, so a chosen id reads whole. */
@media (min-width: 901px) {
  .ai-scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
}

@media (max-width: 560px) {
  .ai-scene-controls .ai-field:not(.is-short) {
    flex-basis: 100%;
  }
}

/* Selected choices sit raised on a sunk track instead of a dark fill, so the
   only colour left among the controls is a switch that is on. */
#settingsView .rule-seg {
  background: var(--surface-sunk);
  border-color: transparent;
}

#settingsView .rule-opt.is-on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(64,54,42,.10), 0 0 0 1px var(--line-strong);
}

/* 项目空间 v2 · 目录 → 项目 → 文件 ------------------------------------------
   The directory sits on the page's own surface and runs the full height. A
   folder's projects and a project's meetings and files hang off fork lines,
   and the selection is one marker that travels between rows. Names wrap
   rather than end in an ellipsis. */
#projectsView.active-view {
  min-height: calc(100vh - 80px);
}

.project-nav-rail {
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
}

.project-nav {
  padding: 18px 10px 28px;
}

.project-nav-tree {
  gap: 1px;
  z-index: 1;
}

.project-nav-all {
  z-index: 1;
}

.nav-node {
  position: relative;
}

.nav-branch {
  position: relative;
  margin-left: 12px;
  padding-left: 12px;
}

/* Each child takes an elbow off the spine; every child but the last also
   carries the spine on down past itself. */
.nav-branch > .nav-node::before,
.nav-branch > .nav-node:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -12px;
  pointer-events: none;
  border-color: var(--line);
  border-style: solid;
  border-width: 0;
}

.nav-branch > .nav-node::before {
  top: 0;
  width: 10px;
  height: 16px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-bottom-left-radius: 8px;
}

.nav-branch > .nav-node:not(:last-child)::after {
  top: 0;
  bottom: 0;
  border-left-width: 1px;
}

.project-nav-resources > .nav-node::before,
.project-nav-resources .nav-branch > .nav-node::before {
  height: 15px;
}

/* Rows: caret, icon, name. The old per-level indents are replaced by branches. */
.project-nav-project,
.project-nav-folder-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 32px;
  height: auto;
  margin-left: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  transition: background var(--t-fast) var(--ease);
}

.project-nav-project[data-node-level="1"] {
  margin-left: 0;
}

.project-nav-project:hover,
.project-nav-folder-row:hover {
  background: color-mix(in srgb, var(--surface-sunk) 70%, transparent);
}

.project-node-caret,
.project-nav-caret {
  flex: 0 0 20px;
  width: 20px;
  height: 32px;
  border-radius: 6px;
}

.nav-row[data-level="1"] {
  width: auto;
  margin-left: 0;
  font-size: 13px;
}

.nav-row[data-level="1"]::before {
  display: none;
}

.project-nav-item,
.project-nav-toggle {
  height: auto;
  min-height: 32px;
  padding: 7px 8px 7px 2px;
  align-items: flex-start;
  line-height: 18px;
}

.project-nav-all {
  padding-left: 8px;
}

.project-nav-item .icon,
.project-nav-toggle .icon,
.project-nav-toggle .nav-folder-icon {
  margin-top: 1.5px;
}

.project-nav-item span.nav-text,
.project-nav-toggle span.nav-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.project-nav-item.is-on,
.project-nav-folder-row.is-on,
.project-nav-folder-row.is-on .project-nav-toggle {
  background: transparent;
  box-shadow: none;
}

.project-nav-item:hover {
  background: transparent;
}

.project-nav-item b,
.project-nav-toggle b,
.project-nav-resource b {
  margin-left: auto;
  padding-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* A project's meetings and files. */
.project-nav-resources {
  display: block;
  margin: 0 0 4px 12px;
  padding-left: 12px;
  border-left: 0;
}

.project-nav-resource {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  min-height: 30px;
  padding: 6px 8px 6px 4px;
  line-height: 18px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.project-nav-resource.is-group {
  color: var(--muted);
  font-weight: 500;
}

.project-nav-resource > span {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.project-nav-resource .icon {
  margin-top: 2px;
}

.project-nav-resource b {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
}

/* The travelling selection. */
@property --nav-y1 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --nav-y2 { syntax: '<length>'; inherits: false; initial-value: 0px; }

.nav-indicator {
  position: absolute;
  z-index: 0;
  top: var(--nav-y1);
  height: calc(var(--nav-y2) - var(--nav-y1));
  border-radius: 8px;
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  pointer-events: none;
  opacity: 0;
}

.nav-indicator.is-down {
  transition: --nav-y2 .22s cubic-bezier(.2, .8, .2, 1), --nav-y1 .36s cubic-bezier(.2, .8, .2, 1) .04s,
    left .3s var(--ease), width .3s var(--ease);
}

.nav-indicator.is-up {
  transition: --nav-y1 .22s cubic-bezier(.2, .8, .2, 1), --nav-y2 .36s cubic-bezier(.2, .8, .2, 1) .04s,
    left .3s var(--ease), width .3s var(--ease);
}

.project-nav-project.is-on .project-nav-item,
.project-nav-folder-row.is-on .project-nav-toggle,
.project-nav-all.is-on {
  color: var(--ink);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition: none !important; }
}

.nav-dragging .nav-indicator {
  opacity: 0 !important;
}

/* Project page: name and actions on one line, then facts, then one tab bar. */
#projectActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#projectActions.hidden {
  display: none;
}

#projectSpace > .space-description {
  margin: -10px 0 12px;
  max-width: 72ch;
  color: var(--ink-2);
}

.space-facts {
  margin-bottom: 20px;
}

.space-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.space-owner .avatar {
  width: 20px;
  height: 20px;
  font-size: 9.5px;
}

.space-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.space-progress .progress {
  width: 72px;
}

.space-progress .progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.space-tabs {
  position: sticky;
  top: 60px;
  z-index: 6;
  background: var(--surface);
}

/* Panels sit on the page; only lists keep their hairlines. */
.space-panel > .space-section {
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.space-panel > .space-section + .space-section {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

/* Task names wrap to a second line instead of ending in an ellipsis. */
.space-tasks .project-task-open strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}

@media (min-width: 761px) {
  .space-tasks .project-task-open strong { padding: 8px 0; }
}

@media (max-width: 1180px) {
  .space-tabs { top: 56px; }
}

.space-head.is-toolbar {
  justify-content: flex-end;
  min-height: 0;
  margin-bottom: 6px;
}

.space-head.is-toolbar:empty {
  display: none;
}

/* Meetings: a list of rows on the left, the open meeting on the right. */
.space-meetings .meeting-workspace {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
}

.space-meetings .meeting-list {
  gap: 0;
}

.space-meetings .meeting-row {
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 8px;
  background: transparent;
}

.space-meetings .meeting-row:hover {
  background: var(--surface-sunk);
}

.meeting-list-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
}

.space-meetings .meeting-list-row .meeting-row {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}

.content-row-delete {
  flex: none;
  width: 44px;
  height: 28px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--danger);
}

.content-row-delete:hover, .content-delete {
  color: var(--danger);
}

.content-delete {
  margin-right: auto;
}

.md-editor ~ .modal-footer,
.project-file-details ~ .modal-footer {
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .md-editor ~ .modal-footer,
  .project-file-details ~ .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md-editor ~ .modal-footer > *,
  .project-file-details ~ .modal-footer > * {
    width: 100%;
    margin: 0;
    justify-content: center;
  }
}

.space-meetings .meeting-copy small {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 使用教程 ------------------------------------------------------------------ */
.guide-layout {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.guide-toc {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 2px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.guide-toc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.guide-toc-item .icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.guide-toc-item:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.guide-toc-item.is-on {
  background: var(--surface-sunk);
  color: var(--ink);
  font-weight: 600;
}

.guide-content {
  display: grid;
  gap: 8px;
  max-width: 760px;
}

.guide-chapter {
  scroll-margin-top: 84px;
  padding: 8px 0 34px;
  border-bottom: 1px solid var(--line-soft);
}

.guide-chapter:last-child {
  border-bottom: 0;
}

.guide-chapter header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  margin-bottom: 14px;
}

.guide-index {
  grid-row: span 2;
  font: 500 13px/1 var(--font-serif);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.guide-chapter h2 {
  margin: 0;
  font: 400 26px/1.25 var(--font-serif);
  color: var(--ink);
}

.guide-chapter header p {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.guide-chapter section {
  margin-top: 18px;
}

.guide-chapter h3 {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.guide-chapter ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.guide-chapter li {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.guide-chapter li::marker {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; gap: 20px; }
  .guide-toc { position: static; max-height: none; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Keep the meeting editor readable when the workspace stacks on a phone. */
@media (max-width: 800px) {
  .space-meetings .meeting-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1181px) {
  .project-nav.is-nav-collapsed .nav-branch { margin-left: 0; padding-left: 0; }
  .project-nav.is-nav-collapsed .nav-branch > .nav-node::before,
  .project-nav.is-nav-collapsed .nav-branch > .nav-node::after { display: none; }
}

.project-nav-folder-row { height: auto; min-height: 32px; align-items: flex-start; }

/* 项目目录 at every width ------------------------------------------------------
   Names take at most two lines and show in full on hover. Narrow: projects
   only, tighter branches. Collapsed: icons only, the marker still on the row.
   Between a phone and a wide screen the directory stays a side column. */
.project-nav-item .nav-text,
.project-nav-toggle .nav-text,
.project-nav-resource > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.project-nav.is-nav-narrow .project-nav-resources,
.project-nav.is-nav-narrow .project-node-caret,
.project-nav.is-nav-narrow .project-nav-item b,
.project-nav.is-nav-narrow .project-nav-toggle b,
.project-nav.is-nav-narrow .project-nav-edit,
.project-nav.is-nav-narrow .project-nav-add {
  display: none;
}

.project-nav.is-nav-narrow .nav-branch {
  margin-left: 6px;
  padding-left: 10px;
}

.project-nav.is-nav-narrow .project-nav-item {
  padding-left: 6px;
}

.project-nav.is-nav-collapsed .nav-text,
.project-nav.is-nav-collapsed .project-nav-resources,
.project-nav.is-nav-collapsed .project-node-caret,
.project-nav.is-nav-collapsed .project-nav-caret,
.project-nav.is-nav-collapsed .project-nav-empty,
.project-nav.is-nav-collapsed .project-nav-label,
.project-nav.is-nav-collapsed b {
  display: none;
}

.project-nav.is-nav-collapsed .nav-branch {
  margin-left: 0;
  padding-left: 0;
}

.project-nav.is-nav-collapsed .nav-branch > .nav-node::before,
.project-nav.is-nav-collapsed .nav-branch > .nav-node::after {
  display: none;
}

.project-nav.is-nav-collapsed .project-nav-project,
.project-nav.is-nav-collapsed .project-nav-folder-row {
  justify-content: center;
}

.project-nav.is-nav-collapsed .project-nav-item,
.project-nav.is-nav-collapsed .project-nav-toggle,
.project-nav.is-nav-collapsed .project-nav-all {
  flex: 0 0 auto;
  width: 36px;
  min-height: 34px;
  justify-content: center;
  padding: 0;
  align-items: center;
}

.project-nav.is-nav-collapsed .project-nav-all {
  align-self: center;
}

.project-nav.is-nav-collapsed .project-nav-item .icon,
.project-nav.is-nav-collapsed .project-nav-toggle .icon,
.project-nav.is-nav-collapsed .project-nav-toggle .nav-folder-icon {
  margin-top: 0;
}

.project-nav.is-nav-collapsed .new-chip {
  position: absolute;
  right: 4px;
  top: 5px;
  width: 6px;
  min-width: 0;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}

@media (min-width: 761px) and (max-width: 1180px) {
  #projectsView.active-view {
    grid-template-columns: var(--project-navigation-width, 216px) minmax(0, 1fr);
  }

  .project-nav-rail {
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
  }

  .project-nav {
    position: sticky;
    max-height: calc(100vh - 80px);
    padding: 18px 10px 28px;
  }

  .project-nav > .nav-resize-handle {
    display: block;
  }

  .project-nav.is-nav-collapsed > .project-nav-all,
  .project-nav.is-nav-collapsed > .project-nav-tree {
    display: flex;
  }

  .project-nav.is-nav-collapsed > .nav-resize-handle {
    display: block;
  }
}

/* The directory changes width at once: an animated column width could stop
   between sizes and leave the rows laid out for the wrong width. */
#projectsView.active-view {
  transition: none;
}

/* 导览 -------------------------------------------------------------------------
   The page dims except one lit control; the light and the card glide to the
   next control, the same hand-off the directory's selection uses. */
.tour-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.tour-spot {
  position: fixed;
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px var(--accent);
  pointer-events: none;
  transition: left .36s cubic-bezier(.2, .8, .2, 1), top .36s cubic-bezier(.2, .8, .2, 1),
    width .36s cubic-bezier(.2, .8, .2, 1), height .36s cubic-bezier(.2, .8, .2, 1);
}

.tour-veil.is-centered .tour-spot {
  box-shadow: none;
}

.tour-card {
  position: fixed;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 50px -20px rgba(31, 27, 21, .45);
  outline: none;
  transition: left .36s cubic-bezier(.2, .8, .2, 1), top .36s cubic-bezier(.2, .8, .2, 1);
}

.tour-card::-webkit-scrollbar { display: none; }
.tour-card.is-compact .guide-demo { display: none; }

.tour-chapters {
  display: flex;
  gap: 2px;
  margin: -4px -6px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tour-chapters::-webkit-scrollbar { display: none; }

.tour-chapters button {
  flex: none;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--faint);
  cursor: pointer;
}

.tour-chapters button:hover { color: var(--ink); background: var(--surface-sunk); }
.tour-chapters .is-on { color: var(--accent-dark); font-weight: 600; background: var(--accent-soft); }

.tour-progress {
  height: 2px;
  margin-bottom: 14px;
  border-radius: 1px;
  background: var(--line-soft);
  overflow: hidden;
}

.tour-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .36s cubic-bezier(.2, .8, .2, 1);
}

.tour-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.tour-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

.tour-card.has-demo {
  width: min(440px, calc(100vw - 32px));
}

.tour-card kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin: 0 1px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  vertical-align: 1px;
}

.tour-try {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px dashed var(--accent-line);
  border-radius: 9px;
  background: var(--accent-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.tour-try b { margin-right: 6px; color: var(--accent-dark); }

.tour-try .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--accent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.tour-try.is-done { border-style: solid; }
.tour-try.is-done .icon { opacity: 1; transform: none; }

.tour-card .guide-demo {
  margin: 12px 0 0;
  border-radius: 10px;
}

.tour-card .demo-stage {
  min-height: 0;
  padding: 12px;
  zoom: .8;
}

.tour-card .guide-demo figcaption {
  padding: 7px 10px;
}

.tour-card .demo-caption { font-size: 12px; color: var(--ink-2); }

/* Clicks land only where the light is, and only on a 试一试 step. */
.tour-veil { pointer-events: none; }
.tour-block, .tour-card { pointer-events: auto; }
.tour-block {
  position: fixed;
  background: rgba(31, 27, 21, .46);
  transition: left .36s cubic-bezier(.2, .8, .2, 1), top .36s cubic-bezier(.2, .8, .2, 1),
    width .36s cubic-bezier(.2, .8, .2, 1), height .36s cubic-bezier(.2, .8, .2, 1);
}

.tour-block[data-side="hole"] { background: none; }
.tour-veil.is-try .tour-block[data-side="hole"] { pointer-events: none; }

.tour-veil.is-try .tour-spot {
  animation: tour-pulse 1.6s var(--ease) infinite;
}

@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--accent); }
  50% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 6px var(--accent-soft-2); }
}

.tour-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.tour-count {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.tour-gap {
  flex: 1;
}

.tour-foot .secondary-btn,
.tour-foot .primary-btn {
  height: 32px;
  padding: 0 14px;
}

@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card, .tour-block, .tour-progress i { transition: none; }
  .tour-veil.is-try .tour-spot { animation: none; }
}


/* 使用教程 · 演示 ----------------------------------------------------------------
   A miniature of the real screen. Steps are classes s1…sN on the figure;
   elements declare when they appear, leave, move, type or fill. */
.guide-demo {
  margin: 6px 0 22px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-sunk);
  overflow: hidden;
}

.demo-stage {
  position: relative;
  min-height: 236px;
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
  font-size: 12px;
  color: var(--ink-2);
}

.guide-demo figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.demo-caption {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ink);
}

.demo-dots {
  display: flex;
  gap: 6px;
}

.demo-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.demo-dot.is-on {
  background: var(--accent);
  transform: scale(1.25);
}

.demo-play {
  font-size: 12px;
}

/* Step rules. */
.guide-demo [data-in],
.guide-demo [data-out] {
  transition: opacity .45s var(--ease), transform .45s var(--ease), max-height .45s var(--ease);
}

.guide-demo [data-in] {
  opacity: 0;
  transform: translateY(6px);
}

.guide-demo.s1 [data-in="1"],
.guide-demo.s2 [data-in="2"],
.guide-demo.s3 [data-in="3"],
.guide-demo.s4 [data-in="4"],
.guide-demo.s5 [data-in="5"],
.guide-demo.s6 [data-in="6"],
.guide-demo.s7 [data-in="7"],
.guide-demo.s8 [data-in="8"] {
  opacity: 1;
  transform: none;
}

.guide-demo.s1 [data-out="1"],
.guide-demo.s2 [data-out="2"],
.guide-demo.s3 [data-out="3"],
.guide-demo.s4 [data-out="4"],
.guide-demo.s5 [data-out="5"],
.guide-demo.s6 [data-out="6"],
.guide-demo.s7 [data-out="7"],
.guide-demo.s8 [data-out="8"] {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.guide-demo [data-move] {
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .45s var(--ease);
}

.guide-demo.s1 [data-move="1"],
.guide-demo.s2 [data-move="2"],
.guide-demo.s3 [data-move="3"],
.guide-demo.s4 [data-move="4"],
.guide-demo.s5 [data-move="5"],
.guide-demo.s6 [data-move="6"],
.guide-demo.s7 [data-move="7"],
.guide-demo.s8 [data-move="8"] {
  transform: var(--to);
}

.guide-demo [data-type] {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  transition: max-width 1.1s steps(14);
}

.guide-demo.s1 [data-type="1"],
.guide-demo.s2 [data-type="2"],
.guide-demo.s3 [data-type="3"],
.guide-demo.s4 [data-type="4"],
.guide-demo.s5 [data-type="5"],
.guide-demo.s6 [data-type="6"],
.guide-demo.s7 [data-type="7"],
.guide-demo.s8 [data-type="8"] {
  max-width: 40em;
}

.guide-demo [data-fill] {
  width: 0;
  transition: width .9s cubic-bezier(.2, .8, .2, 1);
}

.guide-demo.s1 [data-fill="1"],
.guide-demo.s2 [data-fill="2"],
.guide-demo.s3 [data-fill="3"],
.guide-demo.s4 [data-fill="4"],
.guide-demo.s5 [data-fill="5"],
.guide-demo.s6 [data-fill="6"],
.guide-demo.s7 [data-fill="7"],
.guide-demo.s8 [data-fill="8"] {
  width: var(--w);
}


/* Mini components. */
.dm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.dm-pane {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(64, 54, 42, .05);
}

.dm-pane h6 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.dm-pane h6 .icon {
  width: 13px;
  height: 13px;
}

.dm-dialog label {
  display: grid;
  gap: 3px;
  font-size: 10.5px;
  color: var(--muted);
}

.dm-dialog label i,
.dm-sheet i {
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-style: normal;
  font-size: 12px;
  color: var(--ink);
}

.dm-btn {
  position: relative;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

.dm-btn.is-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.dm-btn .icon {
  width: 12px;
  height: 12px;
}

.dm-tap {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(31, 27, 21, .25);
  box-shadow: 0 0 0 4px rgba(31, 27, 21, .1);
}

.dm-tap.is-left {
  right: auto;
  left: 128px;
  top: 34px;
  bottom: auto;
}

.dm-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.dm-card .dm-prio {
  grid-row: span 2;
}

.dm-card .dm-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.dm-card small {
  grid-column: 2;
  font-size: 10.5px;
  color: var(--muted);
}

.dm-card .dm-state {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.dm-card.is-muted {
  opacity: .55;
}

.guide-demo.s1 .dm-card.is-muted[data-in="1"] {
  opacity: .55;
}

.dm-card.is-carried,
.dm-card.is-returned {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.dm-card.is-draft {
  border-style: dashed;
}

.dm-prio {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
}

.dm-prio.is-p0 { background: var(--c-coral-soft); color: var(--c-coral-ink); }
.dm-prio.is-p1 { background: var(--c-gold-soft); color: var(--c-gold-ink); }

.dm-state {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.dm-state .icon {
  width: 11px;
  height: 11px;
}

.dm-state.is-doing { color: var(--c-blue-ink); }
.dm-state.is-done { color: var(--success); }


.dm-card > .dm-state {
  justify-self: end;
}

.dm-bell {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.dm-bell > i {
  margin-left: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.dm-clock {
  margin-left: auto;
  min-width: 36px;
  font-weight: 500;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

.dm-clock i {
  font-style: normal;
}

.dm-wide {
  max-width: 520px;
}

.dm-sheet {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-sunk);
  font-size: 10.5px;
  color: var(--muted);
}

.dm-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--muted);
}

.dm-bar {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
}

.dm-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--accent);
}

.dm-bar i.is-full {
  background: var(--success);
}

.dm-meter b {
  min-width: 34px;
  font-weight: 600;
  color: var(--ink);
}

.dm-meter b i {
  font-style: normal;
}

.dm-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.dm-week.is-two {
  position: relative;
  grid-template-columns: 1fr 1fr;
}

.dm-col {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 120px;
  padding: 8px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}

.dm-col h6 {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.dm-col > .dm-card + .dm-card {
  margin-top: -6px;
}


.dm-week.is-two .dm-col > .dm-card {
  grid-row: 2;
  grid-column: 1;
}

.dm-week.is-two .dm-col {
  grid-template-columns: 1fr;
}

.dm-ghost {
  position: absolute;
  left: calc(-100% - 4px);
  top: 32px;
  width: calc(100% - 16px);
  height: 44px;
  border: 1.5px dashed var(--accent-line);
  border-radius: 8px;
  pointer-events: none;
}

.dm-night {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
}

.guide-demo.s1 .dm-night[data-in="1"] {
  transform: translateX(-50%);
}

.dm-mini {
  padding: 5px 7px;
  border-radius: 6px;
  border-left: 3px solid var(--c-gold-ink);
  background: var(--c-gold-soft);
  font-size: 11px;
  color: var(--ink);
}

.dm-mini.is-skipped {
  border-left-color: var(--line-strong);
  background: var(--surface-sunk);
  color: var(--faint);
  text-decoration: line-through;
}


.dm-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.dm-rule span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
}

.dm-rule .icon {
  width: 13px;
  height: 13px;
}

.dm-rule b {
  color: var(--accent-dark);
  font-weight: 600;
}

.dm-rule small {
  color: var(--muted);
}

.dm-stack {
  position: relative;
  display: grid;
  gap: 6px;
}

.dm-stack > .is-stacked {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.dm-count {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-style: normal;
  font-size: 10px;
}

.dm-notice {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.dm-notice b {
  font-size: 10.5px;
  color: var(--accent-dark);
}

.dm-notice.is-unread {
  box-shadow: inset 3px 0 0 var(--accent);
}

.dm-notice > div {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.dm-tree {
  position: relative;
  display: grid;
  gap: 2px;
  width: 220px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
  float: left;
}

.dm-mark {
  position: absolute;
  left: 34px;
  right: 10px;
  top: 10px;
  height: 30px;
  border-radius: 7px;
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.dm-mark {
  left: 10px;
  transform: translateY(0);
}

.guide-demo.s1 .dm-mark {
  left: 34px;
}

.dm-tnode {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--ink-2);
}

.dm-tnode .icon {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.dm-tnode.is-sub {
  height: 26px;
  font-size: 11.5px;
  color: var(--muted);
}

.dm-tbranch {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.dm-tbranch .dm-tbranch[data-in] {
  max-height: 0;
  overflow: hidden;
}

.guide-demo.s2 .dm-tbranch .dm-tbranch[data-in] {
  max-height: 60px;
}

.dm-page {
  margin-left: 236px;
}

.dm-tabs {
  display: flex;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--muted);
}

.dm-tabs b {
  color: var(--ink);
  box-shadow: 0 7px 0 -5px var(--ink);
}

.dm-file {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.dm-file b,
.dm-drag b {
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 9px;
}

.dm-file span {
  color: var(--ink);
}

.dm-file small {
  min-width: 96px;
  color: var(--faint);
  font-size: 10.5px;
}

.dm-file small i {
  font-style: normal;
}

.dm-pane.is-drop {
  outline: 2px dashed transparent;
  outline-offset: -6px;
  transition: outline-color .3s var(--ease);
}

.guide-demo.s1:not(.s2) .dm-pane.is-drop {
  outline-color: var(--accent);
  background: var(--accent-soft);
}

.dm-drag {
  position: absolute;
  right: -10px;
  top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 24px -10px rgba(31, 27, 21, .5);
  font-size: 11px;
}

.dm-drag b {
  width: 30px;
}

.dm-rec {
  margin-left: auto;
  color: var(--danger);
  font-weight: 500;
  font-size: 10.5px;
}

.dm-line {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
}

.dm-min {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--surface-sunk);
}

.dm-min b {
  font-size: 10.5px;
  color: var(--ink);
}

.dm-min span {
  font-size: 11px;
}

.guide-demo [data-in].dm-min:nth-of-type(2) { transition-delay: .15s; }
.guide-demo [data-in].dm-min:nth-of-type(3) { transition-delay: .3s; }

.dm-life {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.dm-life > i {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.dm-stage {
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

.dm-trophy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--success);
}

.dm-trophy .icon {
  width: 14px;
  height: 14px;
}

.dm-msg {
  display: grid;
  gap: 2px;
  justify-self: start;
  max-width: 85%;
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--surface-sunk);
}

.dm-msg.is-mine {
  justify-self: end;
  background: var(--accent-soft);
}

.dm-msg b {
  font-size: 10px;
  color: var(--muted);
}

.dm-msg mark,
.dm-input mark {
  background: none;
  color: var(--accent-dark);
  font-weight: 600;
}

.dm-mention {
  display: grid;
  width: 120px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px -12px rgba(31, 27, 21, .5);
}

.dm-mention span {
  padding: 4px 6px;
  border-radius: 5px;
}

.dm-mention .is-on {
  background: var(--surface-sunk);
  color: var(--ink);
  font-weight: 600;
}

.dm-input {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.dm-input i {
  font-style: normal;
}

.dm-ping {
  position: absolute;
  right: 12px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
}

.dm-ping .icon {
  width: 11px;
  height: 11px;
}

.dm-kpis {
  display: flex;
  gap: 14px;
}

.dm-kpis span {
  display: grid;
  font-size: 10px;
  color: var(--muted);
}

.dm-kpis b {
  font: 400 20px/1.2 var(--font-serif);
  color: var(--ink);
}

.dm-drafts {
  display: grid;
  gap: 6px;
}

.dm-pip {
  justify-self: center;
  display: grid;
  gap: 8px;
  width: 250px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 40px -18px rgba(31, 27, 21, .55), 0 0 0 1px var(--line-soft);
}

.dm-pip h6 {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 12px;
  color: var(--ink);
}

.dm-pip small {
  min-width: 52px;
  color: var(--muted);
  font-weight: 400;
}

.dm-pip small i {
  font-style: normal;
}

.dm-num {
  vertical-align: bottom;
}

.dm-pomo {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 9px;
  background: var(--surface-sunk);
}

.dm-pomo b {
  min-width: 70px;
  text-align: center;
  font: 400 26px/1.1 var(--font-serif);
  color: var(--ink);
}

.dm-pomo b i {
  font-style: normal;
}


.dm-pomo span {
  font-size: 10.5px;
  color: var(--muted);
}

.dm-ring {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}

.dm-ring i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.dm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.dm-box {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
}

.dm-box b {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
}

.dm-box .icon {
  width: 10px;
  height: 10px;
}

.dm-seg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}

.dm-seg b {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--c-gold-soft);
  color: var(--c-gold-ink);
  font-size: 10.5px;
}

.dm-seg b.is-ok {
  background: var(--c-green-soft);
  color: var(--c-green-ink);
}


/* Callouts: 例子 · 注意 · 谁能用. */
.guide-callout {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--surface-sunk);
}

.guide-callout b {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ink);
}

.guide-callout p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.guide-callout p + p {
  margin-top: 4px;
}

.guide-callout.is-example {
  border-color: var(--c-blue-line);
  background: var(--c-blue-soft);
}

.guide-callout.is-note {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.guide-chapter ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.guide-chapter ul li {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .dm-split { grid-template-columns: 1fr; }
  .dm-week { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .dm-tree { float: none; width: auto; }
  .dm-page { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-demo * { transition: none !important; }
}

/* Alternatives that replace each other share one grid cell. */
.dm-clock, .dm-meter b, .dm-pomo b, .dm-num, .dm-file small, .dm-input, .dm-bell > i, .dm-swap {
  display: inline-grid;
}

.dm-clock > *, .dm-meter b > *, .dm-pomo b > *, .dm-num > *, .dm-file small > *, .dm-input > *, .dm-bell > i > *, .dm-swap > * {
  grid-area: 1 / 1;
}

.dm-pomo b {
  justify-items: center;
}

.dm-seg {
  display: grid;
  grid-template-columns: 1fr auto;
}

.dm-seg b {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.dm-col > .dm-mini {
  grid-column: 1;
}

.dm-col > .dm-mini[data-in="2"] {
  grid-row: 2;
}

.dm-col > .dm-mini[data-out] {
  grid-row: 2;
}

.dm-swap {
  margin-left: auto;
}

.guide-demo .dm-mark {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), left .5s cubic-bezier(.2, .8, .2, 1);
}

.dm-swap.is-block {
  display: grid;
  margin: 0;
}

.guide-demo[data-demo="inbox"].s3 .dm-notice.is-unread {
  box-shadow: none;
}

.dm-mini {
  white-space: nowrap;
  overflow: hidden;
  font-size: 10.5px;
}

/* A demo narrower than its two panes stacks them. */
.demo-stage {
  container-type: inline-size;
}

@container (max-width: 560px) {
  .dm-split { grid-template-columns: 1fr; }
  .dm-tree { float: none; width: auto; }
  .dm-page { margin-left: 0; }
  .dm-week { gap: 4px; }
  .dm-col { padding: 6px 4px; }
}
/* Weekly outcomes reuse the archive document's type and spacing. */
.week-work-list { list-style: none; padding: 0; margin: 0 0 22px; }
.week-work-list > li { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.week-work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.week-work-head strong { overflow-wrap: anywhere; min-width: 0; }
.week-work-head time, .week-work-head > span { flex: none; font-size: 12px; color: var(--muted); }
.week-work-list small { color: var(--muted); display: block; min-width: 0; overflow-wrap: anywhere; }
.week-work-list p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 7px 0 0; }
.week-daily-links { display: flex; flex-wrap: wrap; gap: 8px; }
.week-daily-links .week-cell { width: auto; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }

.week-report .brief-section > h3 { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); letter-spacing: 0; }
.week-report .brief-section > h4 { margin: 24px 0 4px; font-size: 13px; font-weight: 600; }

.week-remaining-list { list-style: none; margin: 14px 0 0; padding-left: 14px; border-left: 1px solid var(--line); }
.week-remaining-list > li { padding: 10px 0; }
.week-remaining-list strong { font-size: 13px; }

/* 沟通区 · older history */
.chat-more {
  display: block;
  margin: 4px auto 14px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.chat-more:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.chat-more:disabled {
  cursor: progress;
  opacity: .7;
}

/* The quick filter that is narrowing 今日任务. */
.filter-link.is-on {
  font-weight: 600;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(64, 54, 42, .07), 0 0 0 1px rgba(210, 203, 187, .55);
}

.file-preview {
  color: var(--accent-dark);
  text-decoration: none;
}

.file-preview:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Markdown ---------------------------------------------------------------------
   Rendered text keeps the page's type; the editor is a textarea with a small
   bar for 编辑 / 预览 and the common marks. */
.md-body {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }

.md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  margin: 16px 0 6px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.md-body h2 { font-size: 16px; }
.md-body h3 { font-size: 14.5px; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 13.5px; }

.md-body p { margin: 0 0 8px; }

.md-body ul, .md-body ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.md-body li { margin: 2px 0; }

.md-body li.md-task {
  list-style: none;
  margin-left: -18px;
}

.md-body li.md-task input {
  margin: 0 4px 0 0;
  vertical-align: -1px;
  accent-color: var(--accent);
}

.md-body blockquote {
  margin: 0 0 8px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}

.md-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-sunk);
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.md-body pre {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-sunk);
  overflow-x: auto;
}

.md-body pre code { padding: 0; background: none; }

.md-body a {
  color: var(--accent-dark);
  text-underline-offset: 2px;
}

.md-body hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

.md-body table {
  width: 100%;
  margin: 0 0 10px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.md-body th, .md-body td {
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.md-body th {
  background: var(--surface-sunk);
  font-weight: 600;
  color: var(--ink);
}

.md-empty {
  margin: 0;
  color: var(--faint);
}

.md-editor {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.md-editor:focus-within {
  border-color: var(--accent-line);
}

.md-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-sunk);
}

.md-tabs, .md-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.md-tabs button, .md-tools button {
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.md-tabs button.is-on {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--line-soft);
}

.md-tools button:hover, .md-tabs button:hover {
  color: var(--ink);
}

.md-tools button:hover {
  background: var(--surface);
}

.md-editor[data-mode="preview"] .md-tools,
.md-editor[data-mode="preview"] .md-input,
.md-editor[data-mode="edit"] .md-view {
  display: none;
}

.md-input {
  display: block;
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
}

.md-view {
  min-height: 80px;
  padding: 12px 14px;
}

.md-editor.is-readonly {
  border-color: var(--line-soft);
}

.md-editor.is-readonly .md-bar {
  display: none;
}

.meeting-minutes-preview .md-editor {
  margin-top: 2px;
}

/* Dictation belongs to the text box, so it hides while the box shows its preview. */
.md-editor[data-mode="preview"] .field-voice-btn {
  display: none;
}

/* 使用教程 · 演示指针. The pointer travels to the control each step uses
   (data-point) and taps it. */
.demo-pointer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 18px;
  height: 18px;
  margin: -3px 0 0 -3px;
  opacity: 0;
  pointer-events: none;
  transform: translate(60%, 70%);
  transition: transform .6s cubic-bezier(.3, .7, .2, 1), opacity .3s var(--ease);
}

.demo-pointer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 0 78%, 24% 60%, 40% 96%, 54% 90%, 39% 55%, 70% 55%);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}

.demo-pointer::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  transform: scale(.3);
}

.demo-pointer.is-on { opacity: 1; }

.demo-pointer.is-tap::after {
  animation: demo-tap .6s var(--ease) both;
}

@keyframes demo-tap {
  0% { opacity: .9; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

.guide-demo .dm-tap { display: none; }

.guide-demo [data-narrow] {
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}

.guide-demo.s1 [data-narrow="1"],
.guide-demo.s2 [data-narrow="2"],
.guide-demo.s3 [data-narrow="3"],
.guide-demo.s4 [data-narrow="4"] {
  width: var(--narrow);
}

@media (prefers-reduced-motion: reduce) {
  .demo-pointer { transition: opacity .2s; }
  .demo-pointer.is-tap::after { animation: none; }
}

/* 登录与账户 */
.dm-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.dm-menu {
  display: grid;
  width: 160px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(64, 54, 42, .1);
}

.dm-menu span {
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--ink);
}

.dm-menu span:first-child { background: var(--surface-sunk); }
.dm-menu .is-muted { color: var(--muted); }

.dm-acct {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-top: 1px solid var(--line-soft);
}

.dm-acct b { font-weight: 600; color: var(--ink); }
.dm-acct small { font-size: 10.5px; color: var(--muted); }
.dm-acct em { font-style: normal; font-size: 10.5px; color: var(--success); }
.dm-acct em.is-off { color: var(--muted); }
.dm-acct > em, .dm-acct > .dm-swap { min-width: 3.6em; margin: 0; justify-items: end; text-align: right; }

/* 界面与导航 */
.dm-shell {
  display: flex;
  min-height: 200px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
  overflow: hidden;
}

.dm-side {
  position: relative;
  flex: none;
  display: grid;
  align-content: start;
  gap: 2px;
  width: 150px;
  padding: 30px 6px 8px;
  border-right: 1px solid var(--line-soft);
  background: var(--surface-sunk);
  overflow: hidden;
}

.dm-side small {
  margin: 8px 8px 2px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.dm-collapse {
  position: absolute;
  top: 6px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--muted);
  transition: transform .5s var(--ease);
}

.guide-demo.s2 .dm-collapse { transform: rotate(180deg); right: 12px; }

.dm-collapse .icon,
.dm-nav .icon,
.dm-top .icon { width: 13px; height: 13px; }

.dm-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  white-space: nowrap;
  color: var(--ink-2);
}

.dm-nav:first-of-type { background: var(--surface); color: var(--ink); }
.dm-nav em { flex: 1; font-style: normal; }
.dm-nav b { font-size: 10px; font-weight: 500; color: var(--muted); }

.guide-demo.s1 .dm-nav.is-filter[data-point="1"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.dm-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

.dm-dot.is-p0 { background: var(--danger); }
.dm-dot.is-doing { background: var(--c-blue-ink); }

.dm-main {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px 12px 12px;
}

.dm-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  color: var(--muted);
}

.dm-top > span { position: relative; display: inline-flex; }

.dm-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--danger);
  font: 600 9px/13px var(--font-sans, inherit);
  font-style: normal;
  text-align: center;
  color: #fff;
}

.dm-main .dm-card[data-out] {
  max-height: 60px;
}

.guide-demo.s1 .dm-main .dm-card[data-out="1"] {
  max-height: 0;
  padding-block: 0;
  border-width: 0;
  margin-top: -6px;
  overflow: hidden;
}

/* 项目时间轴 */
.dm-arrows {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  color: var(--muted);
}

.dm-gbody {
  display: grid;
  grid-template-columns: 92px 1fr;
}

.dm-gnames,
.dm-gscroll {
  display: grid;
  grid-auto-rows: 22px;
  row-gap: 5px;
}

.dm-gnames span {
  font-size: 11px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.dm-gcanvas {
  overflow: hidden;
  border-left: 1px solid var(--line-soft);
}

.dm-gscroll {
  position: relative;
  width: 125%;
}

.dm-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.dm-months span {
  padding-left: 5px;
  border-left: 1px solid var(--line-soft);
  font-size: 10px;
  line-height: 22px;
  color: var(--muted);
}

.dm-lane { position: relative; }

.dm-lane > i {
  position: absolute;
  top: 4px;
  height: 14px;
  border-radius: 4px;
  background: var(--c-blue-soft);
  border: 1px solid var(--c-blue-line);
}

.dm-lane > i.is-long {
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, var(--c-green-soft) 75%, transparent);
  border-color: var(--c-green-line);
}

.dm-lane > i.is-bad {
  background: var(--accent-soft);
  border: 1px dashed var(--danger-line);
}

.dm-lane > em {
  position: absolute;
  top: 3px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--accent-soft);
  font-style: normal;
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
  color: var(--danger);
}

.dm-today {
  position: absolute;
  top: 18px;
  bottom: -2px;
  border-left: 1.5px solid var(--accent);
}

.dm-today::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--accent);
}

/* 成果库 */
.dm-kpis.is-row {
  gap: 28px;
  padding: 0 4px;
}

.dm-life.is-dots {
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
}

.dm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dm-links span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11px;
  color: var(--ink);
}

/* 搜索与快捷键 */
.dm-keys {
  display: inline-grid;
  justify-self: center;
}

.dm-keys > kbd { grid-area: 1 / 1; justify-self: center; }

.guide-demo kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
}

.dm-keys kbd.is-hit {
  min-width: 34px;
  height: 30px;
  font-size: 14px;
  border-color: var(--accent);
  color: var(--accent);
}

.dm-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
}

.dm-shortcuts span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* 系统自动完成的事 */
.dm-clockline {
  --span: 25%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.dm-tick {
  justify-self: center;
  font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
}

.dm-tick.is-first { color: var(--ink); }

.dm-hand {
  position: absolute;
  top: -5px;
  left: 12.5%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  transition: left .7s cubic-bezier(.2, .8, .2, 1);
}

.guide-demo.s1 .dm-hand { left: 37.5%; }
.guide-demo.s2 .dm-hand { left: 62.5%; }
.guide-demo.s3 .dm-hand { left: 87.5%; }

.dm-week.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-week.is-four .dm-col { min-height: 96px; }
.dm-week.is-four .dm-kpis { gap: 10px; }
.dm-week.is-four .dm-kpis b { font-size: 17px; }
.dm-week.is-four .dm-card { grid-template-columns: auto 1fr; }
.dm-week.is-four .dm-card .dm-state { grid-column: 2; grid-row: auto; justify-self: start; }
.dm-week.is-four .dm-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-dialog label i > span, .dm-sheet i > span { vertical-align: top; }

@container (max-width: 560px) {
  .dm-side { width: 118px; }
  .dm-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-week.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-week.is-four .dm-name { white-space: normal; overflow-wrap: anywhere; }
}

@container (max-width: 300px) {
  .dm-week.is-four { grid-template-columns: 1fr; }
}

/* 使用教程 · 表格与常见问题 */
.guide-table {
  margin: 4px 0 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow-x: auto;
}

.guide-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.6;
}

.guide-table th,
.guide-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.guide-table th {
  background: var(--surface-sunk);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.guide-table tr:last-child td { border-bottom: 0; }
.guide-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

.guide-faq details {
  border-bottom: 1px solid var(--line-soft);
}

.guide-faq summary {
  position: relative;
  padding: 10px 24px 10px 0;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

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

.guide-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 9px;
  color: var(--muted);
  transition: transform var(--t-fast) var(--ease);
}

.guide-faq details[open] summary::after { transform: rotate(45deg); }

.guide-faq details p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

@media (max-width: 560px) {
  .guide-table td:first-child { white-space: normal; }
}