:root {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1e293b;
  background: #ffffff;
  line-height: 1.55;
  font-synthesis: none;
  --blue: #164b7e;
  --border: #dce3ec;
  --muted: #65748a;
}
* { box-sizing: border-box; }
body { margin: 0; }
body > form { max-width: 640px; margin: 8vh auto; padding: 24px; }
button, input, select, textarea { font: inherit; }
button, input:not([type="checkbox"]), select { min-height: 44px; }
button {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 15px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  text-align: center;
}
button:hover { background: #f0f5fb; }
button:disabled { opacity: .6; cursor: wait; }
button.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
button.quiet { background: transparent; }
button.text-link { min-height: 0; border: 0; padding: 0; text-decoration: underline; background: transparent; }
:focus-visible { outline: 3px solid #2d77c6; outline-offset: 3px; }
input:not([type="checkbox"]), textarea, select { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: #fff; color: #1e293b; }
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
input[type="checkbox"] { width: 22px; height: 22px; vertical-align: middle; accent-color: var(--blue); flex-shrink: 0; }
label { display: block; margin: 12px 0; font-weight: 550; }
label:has(input[type="checkbox"]) { display: flex; gap: 10px; align-items: center; min-height: 44px; flex-direction: row-reverse; justify-content: flex-end; }
label > input:not([type="checkbox"]), label > select, label > textarea { display: block; margin-top: 5px; }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; margin: 16px 0; }
fieldset label { font-weight: 400; }
h1, h2, h3 { line-height: 1.25; font-weight: 620; letter-spacing: -.025em; }
h1 { color: #123b64; font-size: 1.65rem; margin: 0; }
h2 { color: #123b64; font-size: 1.2rem; margin: 24px 0 12px; }
h3 { font-size: 1.05rem; }
a { color: #0066cc; }
main { max-width: 1140px; margin: 0 auto; padding: 38px 24px 80px; }
main.narrow { max-width: 660px; }
main.narrow > button { display: block; margin: 14px 0; }
form > button { margin: 12px 8px 8px 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.muted { color: var(--muted); font-size: .94rem; }
.message { border-left: 4px solid; padding: 12px 16px; background: #fff; overflow-wrap: anywhere; }
.message.error { border-color: #b24531; color: #7e2a1c; }
.message.notice { border-color: #2866a2; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; }
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px; margin-top: 28px; }
.space-card { background: #fff; padding: 24px; border: 1px solid var(--border); border-radius: 10px; }
.space-card h2 { margin-top: 0; overflow-wrap: anywhere; }
.item-list { border-top: 1px solid var(--border); margin-top: 24px; }
.item-row { display: flex; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
.item-row > div:first-child { flex: 1; min-width: 0; }
.item-row h2, .item-row h3 { margin: 4px 0; overflow-wrap: anywhere; }
.item-row p { margin: 6px 0; }
.item-row.acknowledged { opacity: .7; }
.badge { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.search-tools { display: flex; gap: 20px; align-items: end; flex-wrap: wrap; }
.search-tools > label:first-child { flex: 1; min-width: 220px; }
.search-tools > button { margin-bottom: 12px; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.columns > * { min-width: 0; }
.checklist-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.reminder-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--border); }
.reminder-row button { margin-bottom: 12px; }
.reminder-row p { grid-column: 1 / -1; }
.checklist-preview { list-style: none; padding-left: 0; }
.checklist-preview li { margin: 10px 0; }
.markdown, .plain-text { overflow-wrap: anywhere; }
.plain-text { white-space: pre-wrap; font: inherit; }
.markdown code, pre { background: #f1f4f8; border-radius: 5px; }
.markdown code { padding: 2px 4px; }
pre { padding: 16px; overflow: auto; }
blockquote { border-left: 3px solid #c4d3e4; padding-left: 20px; margin-left: 0; color: var(--muted); }
.diff span, .diff ins, .diff del { display: block; text-decoration: none; white-space: pre-wrap; }
.diff ins { background: #daecd4; color: #21471c; }
.diff del { background: #f8ddd2; color: #762819; }
.image-preview { max-width: 100%; max-height: 75vh; object-fit: contain; display: block; margin: 24px auto; }
.pdf-frame { width: 100%; height: 75vh; min-height: 450px; border: 1px solid var(--border); border-radius: 8px; }
.comments { margin-top: 44px; border-top: 1px solid var(--border); }
.comment { padding: 16px 20px; background: #fff; margin: 14px 0; border: 1px solid var(--border); border-radius: 8px; }
.enrollment { padding: 20px; margin: 16px 0; border: 1px solid var(--border); border-radius: 8px; }
.enrollment button { margin: 8px; }
.fingerprint, code { overflow-wrap: anywhere; }
.recovery-key { font-size: 1.12rem; line-height: 2; white-space: pre-wrap; word-break: break-all; user-select: all; }
dialog { width: min(820px, calc(100vw - 24px)); max-height: 90vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 24px; background: #fff; color: inherit; overflow-wrap: anywhere; }
dialog::backdrop { background: #112b4966; }
dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
dialog > header > button { flex-shrink: 0; white-space: nowrap; }
dialog h2 { margin: 0; }
dialog button { margin: 6px 6px 6px 0; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .9rem; }
th, td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: #f4f7fa; }
.stop-message { max-width: 700px; margin: 10vh auto; padding: 24px; border: 2px solid #a83e28; }
.loading-message { max-width: 640px; margin: 10vh auto; padding: 24px; }
@media (max-width: 620px) {
  main { padding: 26px 16px 60px; }
  .columns { grid-template-columns: 1fr; gap: 0; }
  .reminder-row { grid-template-columns: 1fr 1fr; }
  .reminder-row > label:first-child { grid-column: 1 / -1; }
  .item-row { flex-wrap: wrap; }
  .item-row > div:first-child { flex-basis: 100%; }
  dialog { padding: 18px; }
  .recovery-key { font-size: 1rem; }
}

.field-help { display: block; font-weight: 400; color: var(--muted); margin-top: 5px; }
.choice-card { padding: 20px; margin: 20px 0; border: 1px solid var(--border); border-radius: 10px; background: white; }
.choice-card h2 { margin-top: 0; }
details { margin: 16px 0; }
summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.help-topics details { border-bottom: 1px solid var(--border); }
.help-topics p, li { max-width: 70ch; }
.connection-details .growing-input { font-weight: 400; font-size: 13px; }
.connection-details textarea { min-height: 0; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.connection-actions > button { margin: 0; min-height: 44px; }
.connection-copy-status:empty { display: none; }
.connection-codes { margin: 18px 0; }
.connection-codes dt { margin-top: 12px; font-weight: 600; }
.connection-codes dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.connection-codes code { user-select: all; }
@media print {
  body:has(> .connection-dialog[open]) > :not(.connection-dialog[open]) { display: none !important; }
  .connection-dialog[open] {
    display: block; position: static; width: auto; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; overflow: visible; color: #000;
  }
  .connection-dialog::backdrop { display: none; }
  .connection-dialog button, .connection-dialog .feedback, .connection-copy-status { display: none !important; }
  .connection-dialog .connection-codes { break-inside: avoid; }
  .connection-dialog textarea { border: 0; padding: 0; resize: none; }
}
[hidden] { display: none !important; }

/* Workspace */
:root { --sidebar: 234px; --soft: #f5f8fc; --selected: #eaf2fc; }
body { font-size: 14px; }
button { min-height: 36px; border-radius: 5px; padding: 6px 12px; font-weight: 500; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:hover { border-color: #a7bfd9; }
button.primary:hover { background: #0e3c69; }
button:disabled { cursor: default; }
button[aria-pressed="true"] { background: var(--selected); color: #164b7e; border-color: #b7cfe9; }
input:not([type="checkbox"]), select { min-height: 38px; padding: 7px 10px; }
textarea { padding: 10px 12px; }
input, select, textarea { font-weight: 400; }
.icon { width: 19px; height: 19px; flex: 0 0 19px; vertical-align: middle; }
.icon-action { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 7px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; border-color: transparent; background: transparent; color: #64748b; }
.label-action, button.primary:has(.icon) { display: inline-flex; gap: 7px; align-items: center; justify-content: center; }
.sr-only, .collection-search > span, .quick-task-label > span, .composer-input > span, .chat-search > span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.brand { display: inline-flex; gap: 5px; color: #456581; font-size: 13px; font-weight: 450; letter-spacing: .12em; white-space: nowrap; }
.brand strong { color: #123b64; font-weight: 750; }
.workspace-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); display: flex; flex-direction: column; background: #f7f9fc; border-right: 1px solid var(--border); padding: 23px 14px 12px; overflow-y: auto; z-index: 30; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 0 10px; margin-bottom: 18px; }
.space-switch-label { margin: 0 0 22px; }
.space-switch-label > span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin: 0 4px 7px; }
.space-switch-label select { font-weight: 600; color: #183f64; background: #fff; }
.primary-nav, .utility-nav, .channel-links { display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; min-height: 36px; text-align: left; background: transparent; color: #53657b; padding: 7px 10px; font-size: 13px; }
.nav-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.selected { background: #e5effa; color: #144f88; font-weight: 650; }
.nav-item:hover { background: #edf3fa; border-color: transparent; }
.sidebar-label { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 3px; }
.sidebar-label > button:first-child { border: 0; background: transparent; color: #6a7a8f; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding-left: 10px; }
.channel-link { padding-left: 13px; }
.channel-link .icon { width: 16px; height: 16px; flex-basis: 16px; }
.utility-nav { margin-top: auto; padding-top: 28px; }
.sidebar-account { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border); margin-top: 14px; padding: 12px 3px 0; }
.account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12px; }
.avatar { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 8px; background: #e7eef7; color: #315778; font-size: 12px; font-weight: 650; }
.avatar.small { width: 25px; height: 25px; flex-basis: 25px; font-size: 10px; border-radius: 50%; }
.workspace-content { margin-left: var(--sidebar); min-width: 0; }
.view { max-width: 1440px; margin: 0 auto; padding: 30px 38px 70px; }
.view-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; min-width: 0; }
.view-heading h1 { overflow-wrap: anywhere; }
.view-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.view:has(.comment-composer) .view-title { flex: 1 1 0; }
.history-navigation { display: flex; flex: 0 0 auto; gap: 2px; }
.history-navigation button { border-color: transparent; background: transparent; }
.history-navigation button:disabled { opacity: .3; }
.editor-save-status { align-self: center; font-size: 13px; margin-right: auto; }
.view-heading .toolbar { margin: 0; gap: 6px; }
.feedback:empty { display: none; }
.feedback .message { margin-top: 0; }
.mobile-header, .mobile-tabs, .mobile-only { display: none; }
.auth-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid var(--border); }
.auth-header nav { display: flex; gap: 10px; }
.auth-page .view { max-width: 700px; padding-top: 48px; }
.auth-page h1 { font-size: 1.9rem; }
.auth-page { background: #fafcfe; }
.auth-page .view-heading { margin-bottom: 24px; }
.welcome-state { max-width: 600px; padding: 32px 0; }
.space-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.space-card { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; border-radius: 6px; padding: 20px; }
.space-card > div { flex: 1; min-width: 160px; }
.space-card h2, .space-card p { margin: 0 0 5px; }
.space-card h2 { font-size: 17px; }
.space-card > button { margin-left: auto; }
.space-card { position: relative; transition: border-color .15s, box-shadow .15s; }
.space-card:hover, .space-card:focus-within { border-color: #88a9cd; box-shadow: 0 3px 12px #164b7e0d; }
.space-open { border: 0; background: transparent; color: var(--blue); }
.space-open::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.space-open:focus-visible { outline: none; }
.space-card:has(.space-open:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.space-initial { display: grid; place-items: center; width: 40px; height: 40px; background: var(--selected); color: #164b7e; font-size: 20px; font-weight: 600; border-radius: 8px; }

/* Collections */
.filter-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.filter-chip { border-color: transparent; background: transparent; color: #65748a; font-size: 13px; padding: 5px 11px; }
.filter-chip.selected { background: var(--selected); color: #164b7e; }
.collection-controls { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; }
.collection-controls label { margin: 0; }
.collection-controls > label:not(.collection-search) { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.collection-controls select { width: auto; margin: 0; font-size: 12px; background: #fff; }
.collection-search { position: relative; flex: 1; max-width: 440px; min-width: 90px; }
.collection-search .icon { position: absolute; left: 11px; top: 10px; color: #8393a7; width: 17px; height: 17px; }
.collection-search input { padding-left: 37px; margin: 0 !important; background: #fafcfe; font-weight: 400; }
.result-count { display: block; font-size: 11px; color: #758296; margin: 8px 0; }
.filter-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0; font-size: 12px; }
.collection-list:has(> .task-board), .overview-tasks:has(> .task-board) { container: collection / inline-size; }
.collection-list { border-top: 1px solid var(--border); }
.collection-row { display: flex; gap: 6px; align-items: center; min-height: 43px; border-bottom: 1px solid #edf0f5; }
.collection-row:hover { background: #f8fafd; }
.collection-row .item-title { height: max-content; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: transparent; color: #253e58; font-weight: 450; padding: 7px 5px; }
.collection-row .item-title:hover { color: #0066cc; }
.cross-space-task > .item-title { display: flex; align-items: center; gap: 8px; }
.task-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-space { flex: 0 1 auto; min-width: 0; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 400; color: var(--muted); }
.collection-row.completed .item-title { text-decoration: line-through; color: #8592a4; }
.collection-row.retired { opacity: .65; }
.retired-label { font-size: 10px; color: #586b7e; background: #edf0f4; border-radius: 4px; padding: 3px 6px; }
.importance { color: #93a1b4; }
.importance.is-important { color: #2262a1; background: transparent; border-color: transparent; }
.item-date { flex: 0 0 65px; color: #596c82; text-align: right; font-size: 12px; white-space: nowrap; }
.item-date.overdue { color: #ae463a; }
.date-input { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.date-input input { min-width: 0; flex: 1; }

.date-input .icon-action { color: var(--blue); border-color: var(--border); }
.date-shortcuts { display: flex; flex-wrap: wrap; gap: 3px; }
.date-shortcuts button { margin: 0; font-size: 12px; }
.personal-settings { max-width: 540px; }
.assignee-group { display: flex; align-items: center; justify-content: center; gap: 3px; flex: 0 0 46px; color: #758399; font-size: 10px; }
.file-icon { color: #6888ad; width: 32px; text-align: center; flex-shrink: 0; }
.item-folder { color: #8090a3; flex: 0 1 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 12px; }
.empty-state { text-align: center; padding: 48px 16px; color: #55718c; }
.empty-state > .icon { width: 30px; height: 30px; }
.empty-state h2 { margin: 10px 0; font-size: 16px; font-weight: 550; }
.empty-state p { margin: 7px auto; max-width: 450px; font-size: 13px; }
.quick-task { display: flex; gap: 8px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.quick-task-label { position: relative; flex: 1; margin: 0; }
.quick-task input { margin: 0 !important; border-color: transparent; background: #f6f9fd; }
.quick-task > button { margin: 0; }
.quick-task .feedback:not(:empty) { flex-basis: 100%; order: 2; }
.quick-task .feedback:empty { display: none; }
.quick-task-icon { color: #647f9d; }
.quick-task-context { flex-basis: 100%; margin-left: 27px; color: var(--muted); font-size: 11px; }
.quick-task .message { margin: 0; padding: 4px 8px; font-size: 12px; }
.quick-task-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding-left: 27px; }
.quick-task-settings label { position: relative; margin: 0; min-width: 0; flex: 1 1 145px; max-width: 210px; }
.quick-task-settings label:nth-child(2) { flex: 0 1 128px; }
.quick-task-settings label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.quick-task-settings .date-input { margin: 0; gap: 0; }
.quick-task-settings input, .quick-task-settings select { font-size: 12px; min-height: 34px; background: #f6f9fd; border-color: transparent; margin: 0; }
.quick-task-settings input:focus, .quick-task-settings select:focus { background: white; }
.quick-task-settings .icon-action { border-color: transparent; }
.quick-task-settings .quick-task-context { flex: 0 0 auto; margin-left: auto; }
.view-tasks .view-heading { margin-bottom: 12px; }
.view-tasks .collection-controls { margin-block: 8px; }
.view-tasks .task-summary { margin-top: 8px; }
.view-tasks .quick-task, .view-overview .quick-task { margin-block: 10px; row-gap: 5px; }
.task-layout-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.task-layout-bar .view-switcher { margin: 0; }
.task-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.task-navigation .filter-bar { border: 0; padding: 0; }
.menu-options, .channel-browser { display: flex; flex-direction: column; gap: 6px; }
.menu-options > button, .channel-browser > button { text-align: left; margin: 0; }

/* Conversations */
.view-channels { height: 100dvh; display: flex; flex-direction: column; padding-bottom: 20px; }
.view-channels .view-heading { margin-bottom: 4px; }
.channel-topic { color: #6e7e93; font-size: 12px; margin: 0 0 13px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-search { position: relative; align-self: flex-end; width: min(260px, 100%); margin: 0 0 8px; }
.chat-search input { margin: 0 !important; font-size: 12px; min-height: 32px; }
.conversation > button { align-self: center; min-height: 28px; font-size: 12px; margin: 2px 0 8px; }
.message-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 100px; padding: 0 8px 8px 0; }
.message-day { display: flex; align-items: center; gap: 16px; color: #728097; font-size: 11px; margin: 18px 0; }
.message-day::before, .message-day::after { content: ""; flex: 1; height: 1px; background: #e9eef4; }
.chat-message { display: flex; gap: 11px; padding: 9px 3px; }
.message-content { flex: 1; min-width: 0; }
.message-byline { display: flex; align-items: baseline; gap: 9px; font-size: 12px; }
.message-byline strong { color: #24425f; }
.message-byline time, .message-byline .muted { font-size: 10px; color: #7b8b9f; }
.message-content .markdown { font-size: 14px; line-height: 1.5; }
.message-content .markdown p { margin: 3px 0 5px; }
.message-content .markdown h1, .message-content .markdown h2 { font-size: 17px; margin: 8px 0; }
.message-actions, .message-reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.message-reactions:empty { display: none; }
.message-actions button, .message-reactions button { font-size: 11px; min-height: 27px; height: 27px; margin: 0; padding: 3px 7px; }
.message-actions .icon-action { width: 29px; min-width: 29px; }
.message-actions .icon { width: 16px; height: 16px; flex-basis: 16px; }
.reaction { border-radius: 12px; background: #f7f9fc; color: #63768f; }
.reaction.selected { background: #e7f1ff; border-color: #aac7e7; color: #1e5c96; }
.message-mentions { color: #2266aa; font-size: 12px; margin: 4px 0; }
.chat-status { color: #7b8a9f; font-size: 10px; min-height: 18px; padding: 2px; }
.message-composer { flex-shrink: 0; border: 1px solid #cbd9e8; border-radius: 7px; background: #fff; padding: 8px 10px; }
.message-composer { position: relative; }
.mention-suggestions { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; width: min(320px, 100%); max-height: 240px; overflow-y: auto; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 6px 24px #16365524; }
.mention-suggestions > button { display: block; width: 100%; min-height: 38px; text-align: left; margin: 0; border-color: transparent; }
.mention-suggestions > button[aria-selected="true"] { background: var(--selected); color: var(--blue); }
.conversation-stream { position: relative; display: flex; flex: 1; min-height: 100px; }
.conversation-stream > .jump-latest { position: absolute; bottom: 12px; right: 16px; z-index: 2; border-radius: 20px; border-color: #b2c7dd; box-shadow: 0 3px 12px #16365518; background: white; }
.jump-latest .icon { transform: rotate(90deg); }
.composer-input { position: relative; display: block; margin: 0; }
.composer-input textarea { display: block; margin: 0; resize: vertical; min-height: 65px; max-height: 180px; border: 0; padding: 7px 3px; font-weight: 400; font-size: 14px; }
.composer-input textarea:focus-visible { outline-offset: 0; }
.mention-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mention-chips:empty { display: none; }
.mention-chips button { min-height: 24px; margin: 0 0 5px; font-size: 11px; background: #edf5ff; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #edf0f5; }
.composer-footer button { margin: 0; }
.composer-footer { flex-wrap: wrap; }
.draft-status { font-size: 11px; color: #55718c; }
.draft-status:empty { display: none; }
.composer-footer .draft-status { flex-basis: 100%; }
.draft-error { color: #b13425; }
.composer-footer > button { flex-shrink: 0; min-height: 36px; font-size: 12px; }
.composer-tools { display: flex; gap: 3px; align-items: center; }
.composer-hint { color: #8593a5; font-size: 10px; margin-left: 8px; }
.message-composer .feedback .message { margin: 10px 0 0; }
.emoji-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-picker button { font-size: 24px; }
.thread-panel { margin-right: 16px; width: min(490px, calc(100vw - 24px)); height: min(800px, 90dvh); }
.thread-content { display: flex; flex-direction: column; height: calc(100% - 58px); }
.thread-messages { flex: 1; overflow-y: auto; padding-right: 5px; }
.thread-content > button { align-self: center; }
.thread-content .composer-hint { display: none; }
dialog { border-radius: 8px; box-shadow: 0 12px 50px #16365524; }

@media (max-width: 1100px) {
  :root { --sidebar: 208px; }
  .view { padding: 25px 23px 60px; }
  .view-channels { padding-bottom: 18px; }
  .collection-controls { flex-wrap: wrap; }
  .collection-search { max-width: none; }
  .collection-controls > label:not(.collection-search) > span { display: none; }
  .composer-hint { display: none; }
}
@media (max-width: 740px) {
  .quick-task-settings { padding-left: 0; gap: 4px; }
  .quick-task-settings label { max-width: none; flex: 1 1 155px; }
  .quick-task-settings label:nth-child(2) { flex: 1 1 128px; }
  .quick-task-settings input, .quick-task-settings select { font-size: 16px; min-height: 44px; }
  .quick-task-context { margin-left: 0; }
  .mention-suggestions > button { min-height: 44px; }
  button, .icon-action { min-height: 44px; }
  .icon-action { min-width: 44px; width: 44px; height: 44px; }
  input:not([type="checkbox"]), select, textarea { font-size: 16px; min-height: 44px; }
  .workspace-sidebar { width: min(300px, 85vw); transform: translateX(-100%); visibility: hidden; padding-top: 16px; }
  .workspace-sidebar.is-open { transform: none; visibility: visible; }
  .nav-item { min-height: 44px; font-size: 14px; }
  .mobile-only { display: inline-flex; }
  .nav-shade { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: #132d4966; z-index: 25; }
  .workspace-content { margin-left: 0; }
  .mobile-header { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-bottom: 1px solid var(--border); height: 52px; }
  .mobile-header > span { flex: 1; font-weight: 650; color: #294e73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--border); }
  .mobile-tab { flex: 1; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; height: 50px; background: transparent; color: #75869a; }
  .mobile-tab.selected { color: #195b9b; background: #f1f6fc; }
  .view { padding: 21px 14px 76px; }
  .view-heading { gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .view-heading h1 { font-size: 23px; }
  .view-heading .toolbar { gap: 3px; }
  .view-heading .toolbar > .primary { padding: 7px 10px; }
  .view-heading .toolbar > .label-action { padding: 7px; }
  .view-heading .toolbar > [aria-label="Refresh view"] { display: none; }
  .collection-controls { gap: 5px; margin-top: 12px; }
  .collection-search { flex-basis: calc(100% - 55px); }
  .collection-search .icon { top: 13px; }
  .collection-controls > label:not(.collection-search) { flex: 1; }
  .collection-controls select { width: 100%; font-size: 14px; }
  .filter-bar { gap: 2px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 9px; }
  .filter-chip { flex-shrink: 0; font-size: 12px; padding: 5px 9px; }
  .collection-row { gap: 0; min-height: 48px; }
  .collection-row .item-title { font-size: 13px; }
  .collection-row .icon-action { width: 44px; min-width: 44px; }
  .item-date { flex-basis: 49px; font-size: 10px; }
  .assignee-group { flex-basis: 28px; }
  .assignee-group small { display: none; }
  .item-folder { display: none; }
  .document-date { flex-basis: 53px; }
  .quick-task > button { font-size: 12px; }
  .view-channels { height: calc(100dvh - 102px - env(safe-area-inset-bottom)); padding: 15px 12px 9px; }
  .view-channels .view-heading { flex-wrap: nowrap; gap: 4px; }
  .view-channels .view-title { flex: 1; gap: 4px; }
  .view-channels .view-heading .toolbar { flex-wrap: nowrap; gap: 0; }
  .view-channels .view-heading h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .channel-topic { font-size: 11px; margin-bottom: 6px; padding-bottom: 7px; }
  .chat-search { width: 100%; }
  .chat-search input { font-size: 16px; min-height: 36px; }
  .message-composer { padding: 6px 8px; }
  .composer-input textarea { font-size: 16px; min-height: 52px; }
  .composer-footer > button { min-height: 44px; }
  .message-actions button, .message-actions .icon-action, .message-reactions button { height: 44px; min-height: 44px; min-width: 44px; }
  .message-actions { margin-top: 0; }
  .chat-message { gap: 8px; padding: 5px 0; }
  .chat-message > .avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
  .thread-panel { margin: auto; height: 90dvh; }
  .auth-header { padding: 13px 18px; }
  .auth-page .view { padding-top: 30px; }
  dialog { padding: 18px; max-height: 92dvh; }
  .space-grid { grid-template-columns: 1fr; }
}

.folder-navigation { display: block; overflow: visible; }
.folder-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; }
.folder-bar button:disabled { cursor: default; }
.folder-breadcrumbs { display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; }
.folder-crumb { border: 0; background: transparent; white-space: nowrap; padding: 8px; font-size: 13px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.folder-crumb[aria-current="page"] { color: #1e293b; font-weight: 600; }
.breadcrumb-separator { color: var(--muted); }
.folder-tools { flex-shrink: 0; margin: 0; }
.document-details .document-row, .document-columns { display: grid; grid-template-columns: 28px minmax(100px, 1fr) 75px 124px repeat(4, 34px); gap: 8px; align-items: center; }
.document-columns { border-bottom: 1px solid var(--border); }
.document-columns > button { background: transparent; border: 0; padding: 10px 0; text-align: left; color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 5px; }
.document-columns .icon { width: 14px; height: 14px; }
.collection-controls > label.document-sort { display: none; }
.document-columns .column-name { padding-left: 5px; }
.column-name { grid-column: 2; }
.column-type { grid-column: 3; }
.column-updated { grid-column: 4; }
.document-details .document-row { cursor: pointer; }
.document-row .item-title { min-width: 0; text-align: left; }
.document-row .document-date { text-align: left; font-size: 12px; }
.modified-by { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: #596c82; font-size: 12px; }
.modified-by .avatar { width: 20px; height: 20px; flex-basis: 20px; font-size: 9px; }
.modified-by > span:not(.avatar) { min-width: 0; overflow-wrap: anywhere; }
.modified-by time { white-space: nowrap; }
.document-modification .modified-by { flex-wrap: wrap; }
.document-row > .copy-link { grid-column: 6; }
.document-row > .saved-control { grid-column: 7; }
.document-row > .icon-action:last-child { grid-column: 8; }
.document-row .item-type { color: var(--muted); font-size: 12px; }
.document-location { display: block; color: var(--muted); font-size: 11px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.folder-row .file-icon { color: #c99636; }
.folder-drop-target { background: #e5efff !important; outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 6px; }
.document-row.dragging { opacity: .45; }
.upload-saved { color: var(--muted); }
.upload-saved::after { content: "✓"; color: var(--blue); }
.date-dialog { width: min(380px, calc(100vw - 8px)); padding: 8px; }
.date-dialog .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
.time-dialog { width: min(360px, calc(100vw - 32px)); }
.time-dialog .schedule-name { margin-bottom: 4px; }
.time-dialog .muted { font-size: 12px; margin-top: 0; }
.time-choices { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 280px; overflow-y: auto; margin-top: 14px; padding: 3px; }
.time-choice { min-height: 44px; padding: 8px; font-variant-numeric: tabular-nums; }
.time-choice.selected { background: var(--blue); color: white; }
.quick-task-dialog { width: min(440px, calc(100vw - 24px)); }
.quick-task-dialog .time-choices { max-height: 208px; }
.date-time-picker { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(230px, 1fr); gap: 24px; }
.date-time-picker > div { min-width: 0; }
.picker-entry { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.picker-entry input { min-width: 0; font-variant-numeric: tabular-nums; }
.picker-toggle { display: none; flex-shrink: 0; }
.date-choices { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-top: 14px; }
.date-month { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.date-month strong { font-size: 13px; }
.date-days, .date-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.date-weekdays { text-align: center; font-size: 11px; color: var(--muted); padding: 6px 0; }
.date-choice { min-width: 0; min-height: 34px; padding: 5px 0; margin: 0; border: 0; background: transparent; font-variant-numeric: tabular-nums; }
.date-choice.outside { color: #8292a5; }
.date-choice[aria-current="date"] { box-shadow: inset 0 0 0 1px #82a3c6; }
.date-choice.selected { background: var(--blue); color: white; }
.growing-input { display: grid; margin-top: 5px; max-height: 260px; overflow: auto; }
.growing-input::after, .growing-input > textarea { grid-area: 1 / 1; font: inherit; font-weight: 400; line-height: 1.6; padding: 10px 12px; min-height: 72px; margin: 0; border: 1px solid var(--border); border-radius: 6px; overflow-wrap: anywhere; }
.growing-input::after { content: attr(data-value) " "; white-space: pre-wrap; visibility: hidden; pointer-events: none; }
.growing-input > textarea { height: 100%; resize: none; min-width: 0; overflow: hidden; }
.task-editor .growing-input textarea { min-height: 72px; }
.composer-input .growing-input { max-height: 180px; margin: 0; }
.composer-input .growing-input::after, .composer-input .growing-input > textarea { font-size: 14px; min-height: 65px; padding: 7px 3px; border: 0; }
.comment-composer { max-width: 960px; margin: 16px 0 24px; }
.comment-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comment-tools > small { flex-basis: 100%; }
.comment-mentions { margin: 6px 0; }
.comment-mentions summary { width: fit-content; color: var(--muted); font-size: 12px; cursor: pointer; padding: 4px 0; }
.reminder-row { grid-template-columns: 1fr 1fr auto; }
.reminder-row > .date-time-picker { grid-column: 1 / -1; }
.reminder-row .date-month button, .reminder-row .time-choice, .reminder-row .date-choice { margin: 0; }
@media (max-width: 740px) {
  .date-time-picker { grid-template-columns: 1fr; gap: 0; }
  .responsive-picker .picker-toggle { display: inline-flex; }
  .responsive-picker:not(.expanded) .picker-panel { display: none; }
  .date-choice { min-height: 44px; }
  .comment-mentions summary { padding: 12px 0; }
  .view-heading .toolbar > [aria-label="Write a comment"] { width: 44px; min-width: 44px; padding: 6px; }
  .view-heading [aria-label="Write a comment"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .composer-input .growing-input::after, .composer-input .growing-input > textarea { font-size: 16px; }
}
.document-picker { max-height: 50vh; overflow-y: auto; }
.attachment-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.attachment-chips:empty { display: none; }
.attachment-chips button { margin: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; }
.attachment-chips small { flex-basis: 100%; color: var(--muted); }
.message-documents { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.document-reference { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; text-align: left; font-size: 12px; }
.document-reference span { overflow-wrap: anywhere; min-width: 0; }
.message-composer.drop-target { outline: 2px solid var(--blue); background: #f4f8fc; }
button.danger { color: #9c2c22; border-color: #d4aaa5; }
.document-date { flex-basis: 84px; }
@media (max-width: 740px) {
  .composer-tools { gap: 0; }
  .composer-footer { gap: 4px; }
  .document-date { flex-basis: 66px; }
}

.calendar-control { position: relative; display: grid; place-items: center; flex: 0 0 44px; min-height: 44px; color: var(--blue); border: 1px solid var(--border); border-radius: 8px; }
.calendar-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.calendar-control:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.cleanup-items { max-height: 220px; overflow: auto; overflow-wrap: anywhere; }

label:has(input[type="checkbox"]):has(.field-help) { display: grid; grid-template-columns: 22px 1fr; }
label:has(input[type="checkbox"]):has(.field-help) > input { grid-column: 1; grid-row: 1; }
label:has(input[type="checkbox"]):has(.field-help) > span { grid-column: 2; grid-row: 1; }
label:has(input[type="checkbox"]):has(.field-help) > small { grid-column: 2; grid-row: 2; }

.inline-due { position: relative; flex: 0 0 155px; }
.inline-date-label { margin: 0; }
.inline-date-label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.inline-date-label .date-input { margin: 0; gap: 0; }
.inline-date-label input[type="text"] { font-size: 14px; font-weight: 400; padding: 5px; border-color: transparent; background: transparent; font-variant-numeric: tabular-nums; }
.inline-date-label input[type="text"]:hover, .inline-date-label input[type="text"]:focus { border-color: var(--border); background: #fff; }
.inline-date-label input.overdue { color: #ae463a; }
.inline-date-label .calendar-control, .inline-date-label .icon-action { border-color: transparent; }
.inline-date-feedback:not(:empty) { position: absolute; z-index: 3; right: 0; width: min(280px, 80vw); box-shadow: 0 3px 12px #123b6420; }
.inline-date-feedback .message { margin: 0; }
.editor-actions { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; background: #fff; border-bottom: 1px solid var(--border); }
.task-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; }
.task-details dt { color: var(--muted); }
.task-details dd { margin: 0; }
.audit-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.audit-controls label { flex: 1 1 160px; margin: 0; }
.audit-controls label:first-child { flex: 2 1 250px; }
.audit-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-table details { margin: 0; }
.audit-table summary { cursor: pointer; color: var(--blue); padding: 0; white-space: nowrap; }
.audit-table pre { min-width: 180px; max-width: 340px; font-size: 12px; }
@media (max-width: 740px) {
  .inline-due { flex-basis: 158px; }
  .inline-date-label input[type="text"] { font-size: 16px; }
  .editor-actions { gap: 5px; }
  .editor-actions button { padding: 8px 10px; font-size: 13px; }
  .audit-table th, .audit-table td { padding: 10px 6px; font-size: 12px; }
  .audit-table td:last-child { padding: 0 6px; }
  .audit-table summary { min-height: 44px; padding: 12px 0; font-size: 11px; }
}

/* Planning, discovery and fast actions. */
.global-search-button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; text-align: left; background: #fff; color: #5a6f86; font-size: 12px; margin-bottom: 18px; padding: 8px 10px; }
.global-search-button::after { content: '⌘ K'; white-space: nowrap; flex-shrink: 0; margin-left: auto; color: #62778c; font-size: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 0 3px; }
.notification-count { margin-left: auto; border-radius: 20px; background: #164b7e; color: #fff; min-width: 19px; padding: 1px 5px; font-size: 10px; line-height: 18px; text-align: center; }
[hidden] { display: none !important; }
.view-switcher { display: inline-flex; border: 1px solid var(--border); background: #f5f7fa; padding: 3px; border-radius: 9px; margin: 0 0 18px; gap: 3px; }
.layout-option { display: flex; align-items: center; gap: 7px; border: 1px solid transparent; background: transparent; padding: 5px 13px; min-height: 34px; color: #5a6e83; font-size: 12px; }
.layout-option .icon { width: 17px; height: 17px; }
.layout-option.selected { background: #fff; border-color: #d6e1ed; color: #153e69; box-shadow: 0 1px 3px #1937540d; }
.task-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.summary-chip { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 4px 9px; min-height: 30px; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; padding: 0 5px; border-radius: 5px; color: #48617a; background: #eaf0f6; font-size: 10px; font-weight: 600; }
.summary-overdue .count-badge, .group-overdue > h2, .collection-group.group-overdue { color: #a43d30; }
.summary-overdue .count-badge { background: #fff0eb; }
.collection-group { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 10px 6px 5px; color: #5b7187; font-size: 11px; font-weight: 650; letter-spacing: .015em; background: #fbfcfe; }
.collection-group > span { color: #637990; font-weight: 400; }
.assignee-group { border: 0; background: transparent; padding: 3px; min-height: 38px; }
.assignee-group > .icon { width: 19px; color: #678097; }
.batch-toolbar:empty { display: none; }
.batch-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 3; padding: 7px 10px; background: #edf4fc; border: 1px solid #c9dcee; border-radius: 8px; margin: 12px 0; font-size: 12px; }
.batch-toolbar > span { margin-right: auto; }
.batch-toolbar > button { font-size: 12px; padding: 5px 9px; }
.row-select { margin: 0 5px; }
.load-more { display: block; margin: 15px auto; }
.collection-list.is-calendar { border: 0; }
.task-calendar { container: calendar / inline-size; margin-top: 12px; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.calendar-toolbar h2 { margin: 0; font-size: 18px; font-weight: 600; }
.calendar-toolbar .toolbar { flex-shrink: 0; flex-wrap: nowrap; margin: 0; gap: 4px; }
.calendar-toolbar button { font-size: 12px; }
.calendar-jump { min-height: 36px; flex-basis: 36px; width: 36px; min-width: 36px; }
.calendar-view .task-summary { display: flex; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.calendar-weekday { padding: 10px 8px; font-size: 10px; font-weight: 600; color: #62758c; background: #f6f8fb; text-align: center; }
.calendar-day { min-width: 0; padding: 5px; min-height: 85px; border-top: 1px solid var(--border); border-right: 1px solid #e9edf3; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.is-today { background: #f4f8ff; }
.calendar-day.outside-month { background: #fafbfc; }
.calendar-day.outside-month .calendar-day-number { color: #7d8b9b; }
.calendar-day.selected-day { box-shadow: inset 0 0 0 2px #517eb0; }
.calendar-day-heading { display: flex; align-items: center; gap: 2px; margin-bottom: 5px; }
.calendar-day-button { display: flex; flex: 1; min-width: 0; align-items: center; gap: 3px; background: transparent; border: 0; padding: 2px; min-height: 30px; border-radius: 7px; font-size: 12px; }
.calendar-day-number { flex-shrink: 0; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; }
.is-today .calendar-day-number { background: #164b7e; color: #fff; font-weight: 700; }
.calendar-day-name { font-size: 10px; }
.calendar-month .calendar-day-name { display: none; }
.calendar-day-count { display: none; }
.calendar-add { width: 28px; min-width: 28px; height: 30px; min-height: 30px; color: #5a7898; }
.calendar-add .icon { width: 15px; height: 15px; }
/* Cards share one reading order: completion, title, details, then actions.
   Narrow containers use a deliberate second row, never a wrapping icon strip. */
.calendar-events, .board-cards, .calendar-agenda, .unscheduled-tasks, .plan-day-list { container: cards / inline-size; }
.plan-card { --plan-control: 30px; display: grid; grid-template-columns: var(--plan-control) minmax(0, 1fr) auto; align-items: center; gap: 2px 5px; padding: 8px 4px; border-bottom: 1px solid #e9edf3; min-width: 0; }
.plan-card:hover { background: #f8fafd; }
.plan-content { min-width: 0; }
.plan-title { display: block; width: 100%; height: max-content; border: 0; padding: 3px 0; margin: 0; min-height: 30px; text-align: left; background: transparent; color: #244360; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.plan-details { display: flex; min-width: 0; gap: 2px 6px; align-items: center; flex-wrap: wrap; color: #5a7087; font-size: 11px; }
.plan-details .icon { width: 13px; height: 13px; flex-basis: 13px; }
.plan-details .avatar { width: 19px; height: 19px; flex-basis: 19px; font-size: 8px; }
.plan-owners { display: inline-flex; align-items: center; gap: 3px; }
.plan-due { display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 28px; max-width: 100%; padding: 2px 3px; margin: 0; border-color: transparent; background: transparent; color: inherit; font-size: inherit; text-align: left; font-variant-numeric: tabular-nums; }
.plan-due:hover { background: #e1edf9; color: var(--blue); }
.plan-card.is-overdue time { color: #a43d30; }
.plan-card.completed .plan-title { text-decoration: line-through; color: #6b7d8d; }
.plan-actions { display: flex; align-items: center; gap: 0; }
.plan-card .icon-action { width: var(--plan-control); min-width: var(--plan-control); height: var(--plan-control); min-height: var(--plan-control); padding: 5px; margin: 0; }
.plan-complete { align-self: start; }
.copy-notice { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); z-index: 100; padding: 10px 18px; border-radius: 24px; background: #173957; color: white; box-shadow: 0 3px 16px #17395730; font-size: 13px; pointer-events: none; }
.plan-card[draggable="true"] { cursor: grab; }
.plan-card.dragging { opacity: .4; }
.task-calendar .drop-target { box-shadow: inset 0 0 0 2px #3879b6; background: #e5f1ff; }
.calendar-saving { pointer-events: none; opacity: .7; }
.plan-card.retired { opacity: .65; }
.plan-space { color: #526e89; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container cards (max-width: 440px) {
  .plan-card { align-items: start; }
  .plan-content { display: contents; }
  .plan-title { grid-column: 2 / -1; grid-row: 1; }
  .plan-details { grid-column: 1 / 3; grid-row: 2; align-self: center; }
  .plan-actions { grid-column: 3; grid-row: 2; align-self: center; }
  .plan-actions > .copy-link { display: none; }
}
@container cards (max-width: 180px) {
  .plan-actions > .saved-control { display: none; }
  .plan-details { gap: 2px; }
  .plan-due { padding-inline: 0; }
}
.calendar-more { border: 0; padding: 3px 5px; background: transparent; min-height: 26px; font-size: 10px; }
.calendar-agenda { margin: 18px 0; padding: 15px 18px; border: 1px solid var(--border); border-radius: 10px; }
.agenda-heading { display: flex; align-items: center; gap: 8px; }
.agenda-heading h3 { margin: 0 auto 0 0; font-size: 14px; }
.agenda-heading button { font-size: 11px; }
.calendar-week .calendar-agenda { display: none; }
.calendar-week .calendar-grid { gap: 8px; border: 0; overflow: visible; }
.calendar-week .calendar-day { border: 1px solid var(--border); border-radius: 8px; min-height: 260px; }
.calendar-origin-0 { --calendar-origin: #2673ba; }
.calendar-origin-1 { --calendar-origin: #168577; }
.calendar-origin-2 { --calendar-origin: #8050aa; }
.calendar-origin-3 { --calendar-origin: #b07816; }
.calendar-origin-4 { --calendar-origin: #b24780; }
.calendar-origin-5 { --calendar-origin: #568536; }
.calendar-origin-6 { --calendar-origin: #c05a37; }
.calendar-origin-7 { --calendar-origin: #5265b5; }
/* Calendar rows have one target. Markers describe entries; they never change them. */
.plan-card.calendar-entry { display: block; padding: 0; margin: 1px 0; border: 0; border-radius: 4px; background: transparent; }
.calendar-open { display: grid; grid-template-columns: 9px auto minmax(0, 1fr); align-items: center; gap: 5px; width: 100%; min-width: 0; height: 28px; min-height: 28px; padding: 3px; border: 0; border-radius: 4px; background: transparent; text-align: left; font-size: 12px; color: #253e58; font-weight: 400; }
.calendar-open:hover { background: #edf3fa; }
.calendar-marker { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; background: var(--calendar-origin, #64778d); border-radius: 2px; }
.marker-task { border-radius: 50%; }
.marker-session { border: 1px solid var(--calendar-origin, #64778d); background: repeating-linear-gradient(135deg, var(--calendar-origin, #64778d) 0 2px, transparent 2px 4px); }
.calendar-time { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.calendar-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-entry.important .calendar-name { font-weight: 650; }
.calendar-entry.completed .calendar-name { text-decoration: line-through; }
.calendar-entry.completed .calendar-open { color: #6b7d8d; }
.calendar-entry.completed .calendar-marker { opacity: .5; }
.calendar-key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; color: #526780; font-size: 11px; }
.calendar-key > span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.calendar-origins { max-height: 72px; overflow: auto; }
.calendar-origins > span > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-zone { margin-left: auto; }
.calendar-caption { font-size: 11px; }
.unscheduled-tasks { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-top: 14px; }
.task-calendar:not(.calendar-dragging) .unscheduled-tasks.is-empty { display: none; }
.unscheduled-tasks summary { font-size: 12px; color: #395a79; cursor: pointer; }
.overview-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 12px; }
.overview-stat { display: flex; align-items: center; gap: 8px; text-align: left; padding: 12px; color: #5a7088; border: 1px solid var(--border); }
.overview-stat > .icon { color: #7690ab; width: 19px; height: 19px; }
.overview-stat > span { flex: 1; font-size: 12px; }
.overview-stat > strong { font-size: 20px; line-height: 1; font-weight: 600; color: #254a70; font-variant-numeric: tabular-nums; }
.overview-stat.selected { background: #f0f6ff; border-color: #8cadcf; }
.stat-overdue strong { color: #a34431; }
.command-dialog { width: min(650px, calc(100vw - 24px)); margin-top: min(12vh, 90px); padding: 20px; }
.command-dialog h2 { font-size: 17px; }
.command-dialog .command-search { margin: 5px 0; }
.command-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.command-search input { font-size: 17px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 4px; }
.command-dialog p.muted { font-size: 11px; }
.command-results { max-height: 52dvh; overflow: auto; }
.command-result { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-radius: 6px; padding: 10px; text-align: left; }
.command-result > span { min-width: 0; }
.command-result strong, .command-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-result strong { font-size: 13px; font-weight: 550; }
.command-result small { font-size: 11px; color: #61778c; margin-top: 2px; }
.upload-hint { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; font-size: 11px; border: 1px dashed var(--border); border-radius: 8px; margin-top: 20px; }
.file-drop-active { outline: 2px dashed #477cb6; outline-offset: -8px; background: #f7faff; }
.upload-queue { max-height: 220px; overflow: auto; }
.upload-file { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.upload-file > span { overflow-wrap: anywhere; min-width: 0; }
.upload-file > small { white-space: nowrap; color: var(--muted); }
.content-editor { max-width: 960px; }
.document-text .growing-input { max-height: min(55dvh, 520px); }
.document-formatting { margin: 12px 0 0; gap: 4px; }
.document-formatting > button { font-size: 12px; }
.document-formatting > button:last-child { margin-left: auto; }
.document-formatting + .document-text { margin-top: 4px; }
.document-text > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.editing-view .view-heading, .view:has(.comment-composer) .view-heading { position: sticky; top: 0; z-index: 4; background: #fff; padding: 10px 0; border-bottom: 1px solid var(--border); }
.editing-view .view-heading h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.editing-view .editor-actions { position: static; }
.task-editor-actions { align-items: center; gap: 12px; }
.task-primary-controls, .editor-utilities { display: flex; align-items: center; gap: 8px; }
.task-primary-controls { gap: 16px; }
.editor-utilities { margin-left: auto; }
.task-editor-actions .editor-save-status { margin-right: 0; font-size: 11px; }
.task-save-hint { margin: 5px 0 12px; }
.task-switch:has(input) { margin: 0; gap: 7px; font-size: 13px; font-weight: 550; cursor: pointer; }
.task-switch input[role="switch"] { appearance: none; -webkit-appearance: none; position: relative; margin: 0; width: 32px; height: 20px; border: 1px solid #8392a5; border-radius: 20px; background: #e8edf3; cursor: pointer; }
.task-switch input[role="switch"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #65748a; }
.task-switch input[role="switch"]:checked { background: var(--blue); border-color: var(--blue); }
.task-switch input[role="switch"]:checked::before { left: 14px; background: white; }
.completion-switch input[role="switch"]:checked { background: #237052; border-color: #237052; }
.importance-switch input[role="switch"]:checked { background: #93651d; border-color: #93651d; }
.task-switch:has(:disabled) { opacity: .6; cursor: wait; }
.editor-utilities > button { flex-shrink: 0; }
.retire-action { color: var(--muted); border-color: transparent; }
.retire-dialog { max-width: 480px; }
.retire-dialog .toolbar { justify-content: flex-end; margin-bottom: 0; }
.retired-filter { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.retired-filter .icon { width: 16px; height: 16px; }
.retired-task-row > .icon { width: 18px; color: var(--muted); flex-shrink: 0; }
.retired-task-actions { display: flex; gap: 8px; }
.retired-task-actions button { font-size: 12px; }
.collection-row.retired-task-row { opacity: 1; }
.retired-task-row.completed .item-title { text-decoration: none; color: var(--blue); }
.editing-view :is(input, textarea, select, button) { scroll-margin-top: 110px; scroll-margin-bottom: calc(76px + env(safe-area-inset-bottom)); }
.editor-hint { font-size: 11px; margin-top: -5px; }
.content-editor > label:first-of-type > input { font-size: 21px; font-weight: 550; padding: 12px; }
.content-editor > label:has(input[type="checkbox"]) { font-size: 12px; margin: 4px 0; }
.task-editor { margin-top: 12px; }
.task-editor .columns { grid-template-columns: minmax(120px, 1fr) minmax(240px, 2fr); }
.assignee-choices { display: flex; flex-wrap: wrap; column-gap: 22px; }
.assignee-choices label { margin: 0; font-size: 13px; }
.task-editor h2 { font-size: 15px; }
.task-editor textarea { min-height: 150px; }
.task-properties { display: grid; grid-template-columns: minmax(480px, 2fr) minmax(210px, 1fr); gap: 24px; align-items: start; }
.task-properties > * { min-width: 0; }
.task-properties .date-time-picker { grid-template-columns: minmax(230px, 1fr) minmax(210px, 1fr); gap: 16px; }
.task-ownership { border-left: 1px solid var(--border); padding-left: 20px; }
.task-ownership .assignee-choices { display: block; margin: 12px 0 0; padding: 0; border: 0; }
.task-ownership .assignee-choices legend { font-size: 12px; font-weight: 550; padding: 0 0 4px; }
.task-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.task-section-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
.task-section-heading h2 > .icon { color: #69819b; width: 17px; }
.task-section-heading > button { border-color: transparent; font-size: 12px; }
.checklist-progress { color: var(--muted); font-weight: 400; font-size: 11px; white-space: nowrap; }
.task-checklist { margin-top: 18px; }
.task-checklist .checklist-row { margin: 0 0 8px; gap: 8px; }
.checklist-row .checklist-toggle { width: 34px; min-width: 34px; min-height: 38px; margin: 0; justify-content: center; }
.checklist-row > input[type="text"] { min-width: 0; flex: 1; }
.reminder-help { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.reminder-help summary { cursor: pointer; padding: 5px 0; width: fit-content; }
.reminder-help p { font-size: 12px; max-width: 650px; }
@media (max-width: 1120px) {
  .task-navigation { flex-wrap: wrap; }
  .task-properties { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .task-ownership { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: start; }
  .task-ownership .assignee-choices { display: flex; flex-wrap: wrap; flex: 1; margin-top: 12px; min-width: 170px; }
  .task-ownership .task-checklist { flex-basis: 100%; width: 100%; margin-top: 0; }
}
.notification-list { max-width: 900px; }
.notification-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 14px 6px; }
.notification-row > .icon { color: #587a9e; flex-shrink: 0; }
.notification-row.acknowledged { opacity: .7; }
.notification-open { flex: 1; min-width: 0; padding: 0; text-align: left; border: 0; background: transparent; }
.notification-open strong, .notification-open small { display: block; overflow-wrap: anywhere; }
.notification-open strong { font-weight: 550; font-size: 14px; margin: 4px 0; }
.notification-open small { font-size: 11px; color: #5e748b; }
.notification-kind { font-size: 10px; color: #416487; }
.notification-list + p { font-size: 11px; }
.view-notifications .filter-bar select { width: auto; margin-left: auto; font-size: 12px; }

@container calendar (max-width: 940px) {
  .calendar-week .calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container calendar (max-width: 840px) {
  .calendar-month .calendar-day { min-height: 62px; padding: 3px 0; }
  .calendar-month .calendar-day-button { min-height: 54px; flex-direction: column; gap: 1px; width: 100%; padding: 3px; }
  .calendar-month .calendar-day-heading { margin: 0; }
  .calendar-month .calendar-day-count { display: block; font-size: 10px; font-weight: 600; color: #426991; height: 16px; }
  .calendar-month .calendar-events, .calendar-month .calendar-add { display: none; }
}
@container calendar (max-width: 540px) {
  .calendar-week .calendar-grid { grid-template-columns: minmax(0, 1fr); }
  .calendar-week .calendar-day { min-height: 0; padding: 7px; }
}
@media (max-width: 740px) {
  .view-tasks .view-heading .toolbar > [aria-label="New task"], .view-tasks .view-heading .toolbar > [aria-label="New event"] { width: 44px; min-width: 44px; padding: 7px; }
  .view-tasks .view-heading .toolbar > [aria-label="New task"] > span, .view-tasks .view-heading .toolbar > [aria-label="New event"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .task-navigation { flex-wrap: wrap; gap: 6px; }
  .task-navigation .filter-bar { flex: 1 1 100%; gap: 0; }
  .task-navigation .filter-chip { flex: 1; padding: 5px 3px; font-size: 12px; white-space: nowrap; }
  .task-layout-bar { gap: 8px; }
  .task-layout-bar .view-switcher { flex: 1; min-width: 0; }
  .task-layout-bar .layout-option { padding-inline: 7px; }
  .task-layout-bar .layout-option .icon { display: none; }
  .task-layout-bar .retired-filter { flex: none; }
  .quick-task { gap: 5px 8px; margin: 10px 0; }
  .quick-task-icon { display: none; }
  .quick-task-context { margin-left: 0; font-size: 10px; }
  .task-properties .date-time-picker { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .task-ownership { gap: 0 16px; }
  .task-ownership .assignee-choices { margin: 6px 0 12px; }
  .task-section-heading { gap: 4px; padding: 6px 0; }
  .task-section-heading > button { padding-inline: 6px; }
  .checklist-row .checklist-toggle { width: 44px; min-width: 44px; min-height: 44px; }
  .task-editor-actions { gap: 0 8px; }
  .task-primary-controls { width: 100%; justify-content: space-between; gap: 12px; }
  .task-switch:has(input) { font-size: 14px; }
  .editor-utilities { gap: 0; }
  .task-editor-actions .editor-save-status { flex: 1; }
  .task-row.retired-task-row { grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px; }
  .task-row.retired-task-row > .item-title { grid-column: 2; padding-left: 0; }
  .task-row.retired-task-row > .icon { grid-column: 1; grid-row: 1; align-self: center; }
  .retired-task-actions { grid-column: 2; }
  .reminder-help summary { min-height: 44px; padding: 12px 0; }
  .global-search-button { min-height: 44px; font-size: 14px; }
  .mobile-header > .icon-action { flex-shrink: 0; }
  .view :is(button, input, select, textarea, summary) { scroll-margin-block: 72px; }
  .mobile-tabs .mobile-tab { gap: 3px; font-size: 10px; padding: 4px; flex-direction: column; position: relative; }
  .mobile-tab .notification-count { position: absolute; top: 3px; right: 15%; }
  .view-switcher { display: flex; margin-bottom: 14px; }
  .layout-option { flex: 1; justify-content: center; min-height: 44px; font-size: 13px; }
  .task-summary { gap: 4px; margin-top: 9px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .summary-chip { flex-shrink: 0; min-height: 44px; font-size: 11px; padding: 4px 7px; }
  .collection-controls { margin-top: 9px; }
  .collection-controls select { max-width: 100%; }
  .batch-toolbar { top: 0; gap: 3px; }
  .batch-toolbar > span { font-size: 11px; }
  .collection-group { min-height: 33px; }
  .calendar-toolbar { flex-wrap: wrap; }
  .calendar-toolbar h2 { font-size: 16px; }
  .calendar-toolbar .toolbar { margin-left: auto; }
  .calendar-toolbar .toolbar > button { min-height: 44px; }
  .calendar-jump { min-height: 44px; flex-basis: 44px; width: 44px; min-width: 44px; }
  .calendar-more { min-height: 44px; }
  .unscheduled-tasks summary { min-height: 44px; padding: 10px 0; }
  .calendar-weekday { padding: 8px 2px; font-size: 10px; }
  .calendar-agenda { padding: 12px 8px; }
  .agenda-heading { align-items: flex-start; }
  .agenda-heading h3 { font-size: 13px; margin: 10px 0; }
  .agenda-heading .label-action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .agenda-heading .label-action { width: 44px; padding: 6px; }
  .calendar-week .calendar-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .calendar-week .calendar-day { min-height: 0; padding: 7px; }
  .calendar-week .calendar-day-heading { margin-bottom: 3px; }
  .calendar-week .calendar-day-button { flex-direction: row; min-height: 44px; }
  .calendar-week .calendar-day-name { font-size: 12px; }
  .calendar-week .calendar-day-count { display: inline; font-size: 11px; }
  .calendar-week .calendar-add { width: 44px; min-height: 44px; }
  .plan-card { --plan-control: 44px; }
  .plan-title { font-size: 14px; min-height: 44px; }
  .calendar-open { height: 44px; min-height: 44px; font-size: 14px; gap: 7px; }
  .calendar-time { font-size: 12px; }
  .plan-due { min-width: 44px; min-height: 44px; font-size: 12px; }
  .overview-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
  .overview-stat { padding: 10px 8px; min-height: 44px; }
  .overview-stat > strong { font-size: 18px; }
  .view-overview .collection-search { flex-basis: 100%; }
  .view-overview .collection-controls > button { flex: 1; font-size: 12px; padding-inline: 7px; }
  .view-overview .view-heading [aria-label="New task"] { width: 44px; min-width: 44px; padding: 7px; }
  .view-overview .view-heading [aria-label="New task"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .content-editor > label:first-of-type > input { font-size: 19px; }
  .task-editor .columns { grid-template-columns: 1fr; gap: 0; }
  .notification-row { gap: 6px; }
  .view-notifications .filter-bar { flex-wrap: wrap; }
  .view-notifications .filter-bar select { width: 100%; font-size: 16px; }
  .upload-hint { font-size: 11px; text-align: center; padding: 12px; }
  .command-dialog { padding: 14px; margin-top: 5vh; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav-item, .filter-chip, .layout-option, .overview-stat { transition: background-color .12s ease, border-color .12s ease; }
}
@media (min-width: 361px) and (max-width: 740px) {
  .task-properties .date-time-picker:not(:has(.expanded)) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
  .task-properties .picker-entry { gap: 2px; }
  .task-properties .picker-entry input { padding-inline: 6px; }
}

/* Distinct destinations and visible, touch-accessible item actions. */
.admin-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 25px 0 30px; }
.admin-tool-group { border: 1px solid var(--border); border-radius: 10px; padding: 16px; min-width: 0; }
.admin-tool-group h2, .admin-section-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 12px; }
.admin-tool-group h2 > .icon { color: #547fa9; }
.admin-control { display: grid; grid-template-columns: 25px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; text-align: left; width: 100%; padding: 12px 5px; border: 0; border-radius: 6px; background: transparent; margin: 2px 0; }
.admin-control:hover { background: #f2f6fb; }
.admin-control > .icon { grid-row: 1 / 3; color: #4a749d; }
.admin-control > span { font-size: 13px; font-weight: 550; }
.admin-control > small { grid-column: 2; font-size: 11px; line-height: 1.5; font-weight: 400; color: #62758b; }
.admin-control.danger > .icon { color: #a03b32; }
.admin-tool-group > p { font-size: 12px; }
.admin-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin-section-heading h2 { margin: 0; }
.view-admin .item-row > .avatar { flex: 0 0 32px; }
.view-admin .item-row > div { flex: 1; min-width: 100px; }
dialog:has(> .menu-options) { width: min(420px, calc(100vw - 24px)); }
.item-actions { min-width: 0; }
.item-actions > button { justify-content: flex-start; border-color: transparent; }
.item-actions > p { overflow-wrap: anywhere; margin-top: 0; }
.item-actions > small { margin-top: 12px; max-width: 360px; }
.schedule-fields { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(130px, .7fr); gap: 16px; }
.schedule-name { overflow-wrap: anywhere; font-weight: 550; }
.activity-action { display: flex; align-items: center; gap: 7px; }
.activity-action > .icon { width: 17px; height: 17px; flex-shrink: 0; color: #577da5; }
.activity-item { display: block; border: 0; background: transparent; text-align: left; padding: 5px 0; color: var(--blue); overflow-wrap: anywhere; }
.activity-space { display: block; font-size: 11px; }
.audit-controls { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(135px, 1fr)); }
.audit-controls > button { justify-self: start; }
.audit-controls label { min-width: 0; }
@media (max-width: 1100px) {
  .collection-controls { flex-wrap: wrap; }
  .admin-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .task-row:not(.retired-task-row) { --stage-size: 44px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px; padding: 7px 0; gap: 2px 0; }
  .task-row .icon-action { width: 44px; min-width: 44px; height: 44px; }
  .task-row:not(.retired-task-row) > .item-title { display: block; width: 100%; grid-column: 2 / -3; grid-row: 1; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; padding: 7px 5px; }
  .task-row.cross-space-task > .item-title { display: flex; gap: 6px; }
  .task-row > .icon-action:first-of-type { grid-column: 1; grid-row: 1; align-self: start; }
  .task-row > .importance { grid-column: -2; grid-row: 1; align-self: start; }
  .task-row > .saved-control { grid-column: 1; grid-row: 2; }
  .task-row > .inline-due { grid-column: 2 / -3; grid-row: 2; width: 173px; max-width: 100%; }
  .task-row > .copy-link { grid-column: -3; grid-row: 2; }
  .task-row > .assignee-group { grid-column: -2; grid-row: 2; min-height: 44px; }
  .task-row .assignee-group small { display: inline; }
  .task-row:has(.row-select) { grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px 44px; }
  .task-row .row-select { grid-column: 1; grid-row: 1; }
  .task-row:has(.row-select) > .icon-action:first-of-type { grid-column: 2; }
  .task-row:has(.row-select) > .item-title { grid-column: 3 / -3; }
  .cross-space-task > .inline-due { grid-column: 2 / -4; }
  .cross-space-task > .copy-link { grid-column: -4; }
  .cross-space-task > .assignee-group { grid-column: -3; }
  .cross-space-task > .task-more { grid-column: -2; grid-row: 2; }
  .cross-space-task > .task-time { display: none; }
  .task-row > .stage-control { grid-column: -3; grid-row: 1; align-self: start; }
}
@media (max-width: 350px) {
  .cross-space-task > .saved-control, .message-actions > [aria-label="Link task"] { display: none; }
  .cross-space-task > .inline-due { grid-column: 1 / -4; }
  .editor-utilities > .retire-action { width: 44px; min-width: 44px; padding: 7px; }
  .editor-utilities > .retire-action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 1000px) {
  .document-details .document-row, .document-columns { grid-template-columns: 28px minmax(80px, 1fr) repeat(4, 34px); }
  .document-row .item-type, .document-columns .column-type, .document-columns .column-updated { display: none; }
  .document-details .document-row { row-gap: 0; }
  .document-row > .item-title { grid-column: 2; grid-row: 1; }
  .document-row > .document-date { grid-column: 2; grid-row: 2; }
  .document-row > :not(.item-title):not(.document-date) { grid-row: 1 / span 2; }
  .document-row .modified-by { font-size: 11px; }
  .document-row > .copy-link { grid-column: 4; }
  .document-row > .saved-control { grid-column: 5; }
  .document-row > .icon-action:last-child { grid-column: 6; }
}
@media (max-width: 760px) {
  .admin-tools, .schedule-fields { grid-template-columns: minmax(0, 1fr); }
  .document-row .item-folder { display: none; }
  .document-row > .item-title { white-space: normal; }
  .document-row > .icon-action[aria-label="Move document"] { display: none; }
  .document-row > .icon-action[aria-label="Move folder"] { display: none; }
  .document-details .document-row, .document-columns { grid-template-columns: 24px minmax(80px, 1fr) 44px 44px; gap: 8px; }
  .document-row .item-type, .document-columns .column-type, .document-columns .column-updated { display: none; }
  .document-row > .copy-link, .document-row > .saved-control { grid-column: 3; }
  .document-row:has(> .saved-control) > .copy-link { display: none; }
  .document-row > .icon-action { width: 44px; min-width: 44px; height: 44px; }
  .document-row > .icon-action:last-child { grid-column: 4; }
  .folder-bar { flex-wrap: wrap; }
  .folder-breadcrumbs { min-width: calc(100% - 60px); }
  .folder-tools { width: 100%; justify-content: flex-end; }
  .folder-tools > [aria-label="New folder"] { width: 44px; padding: 8px; }
  .folder-tools > [aria-label="New folder"] > span { display: none; }
  .view-documents .collection-search { flex-basis: calc(100% - 50px); }
  .view-documents [aria-label="Search contents"] { width: 44px; padding: 8px; }
  .view-documents [aria-label="Search contents"] > span { display: none; }
  .collection-controls > label.document-sort { display: flex; }
  .view-admin .item-row { flex-wrap: wrap; }
}
@media (max-width: 550px) {
  .audit-controls { grid-template-columns: minmax(0, 1fr); }
}

.alert-settings { margin: 0 0 20px; padding: 16px; border: 1px solid var(--border, #d8dfe5); border-radius: 10px; }
.alert-settings h2 { margin: 0 0 8px; font-size: 16px; }
.alert-settings p { margin: 8px 0; }
.alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.alert-actions .alert-sound { display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; margin: 0; min-height: 44px; }
.alert-sound input { width: 20px; height: 20px; margin: 0; }
.alert-actions button { min-height: 44px; }
@media (max-width: 600px) { .alert-actions { gap: 8px; } .alert-actions .alert-sound { flex-basis: 100%; } }

.alert-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px; background: #edf5ff; border-radius: 8px; }
.alert-prompt span { flex: 1 1 240px; }
.alert-prompt .feedback { flex-basis: 100%; }
.alert-prompt .feedback:empty { display: none; }

/* Conversation catch-up keeps controls alongside the discussion. */
.conversation-count { margin-left: auto; min-width: 1.4rem; padding: .08rem .35rem; border-radius: 1rem; background: var(--accent, #345de3); color: #fff; font-size: .72rem; text-align: center; }
.channel-link.has-unread { font-weight: 700; }
.follow-control[aria-pressed="true"] { color: #315bd6; background: #edf2ff; }
.discussion-heading { display: flex; align-items: center; gap: .5rem; }
.discussion-heading h2 { margin-right: auto; }
.discussion-row { display: flex; align-items: center; gap: .65rem; padding: .6rem .25rem; border-bottom: 1px solid #e5e8ed; }
.discussion-row > .icon { flex-shrink: 0; color: #6b7280; }
.discussion-row.has-unread > .icon { color: #315bd6; }
.discussion-open { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: .25rem; background: transparent; border: 0; text-align: left; }
.discussion-open strong { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.discussion-open small { color: #687282; }
.following-list { max-width: 64rem; }

.chat-message, .comment { position: relative; }
.read-marker { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Search shares one compact palette for names, content and actions. */
.command-dialog { width: min(780px, calc(100vw - 24px)); }
.search-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.search-filters label { min-width: 0; margin: 0; font-size: 11px; color: var(--muted); }
.search-filters select, .search-filters input { font-size: 12px; margin-block: 3px 0; min-width: 0; }
.search-status { display: flex; align-items: center; gap: 8px; }
.search-progress { margin-block: 8px; font-size: 12px; }
.search-coverage { margin-top: 8px; font-size: 11px; }
.search-coverage p { margin-block: 6px; }
.command-result > span { min-width: 0; }
.search-excerpt { display: block; margin-top: 3px; font-size: 12px; font-weight: normal; color: #516b85; overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .search-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-filters input, .search-filters select { min-height: 44px; }
  .command-dialog .command-results { max-height: 42dvh; }
}

.task-repeat { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.task-repeat label { margin-block: 3px; font-size: 12px; }
.task-repeat > label { display: flex; align-items: center; gap: 10px; }
.task-repeat > label select { flex: 1; width: auto; margin: 0; }
.repeat-choices { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; margin-top: 6px; }
.repeat-choices > label:first-child { flex: 0 0 65px; }
.repeat-choices > label:nth-child(2) { flex: 1; }
.repeat-choices input, .repeat-choices select { margin-block: 3px 0; font-size: 12px; }
.repeat-choices > small { flex-basis: 100%; font-size: 11px; }
.task-occurrences { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px; }
.recurring-cue { color: #5278a4; flex-shrink: 0; display: inline-flex; margin-left: 6px; vertical-align: middle; }
.recurring-cue .icon { width: 14px; height: 14px; }

.event-editor { display: grid; gap: 12px; }
.event-schedule-heading, .event-response, .work-sessions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.event-schedule-heading { justify-content: space-between; }
.event-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.event-schedule .date-time-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-schedule .date-selector .date-choice { min-height: 30px; }
.event-options { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: start; }
.event-options > label { flex: 1 1 150px; }
.event-repeat-choices { display: flex; gap: 10px; flex: 1 1 210px; }
.event-repeat-choices > label { width: 65px; flex-shrink: 0; }
.event-repeat-choices > .date-selector { flex: 1; }
.event-repeat-choices .date-choices { display: none; }
.event-repeat-choices .picker-toggle { display: inline-flex; }
.event-repeat-choices .date-selector.expanded .date-choices { display: block; }
.event-attendees { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.event-attendees label { display: inline-flex; align-items: center; gap: 6px; }
.event-attendees small { font-weight: 400; }
.response-yes { color: #247257; }
.response-maybe { color: #8a620c; }
.response-no { color: #9c4452; }
.event-response { font-size: 12px; }
.work-sessions { margin-block: 6px 12px; }
.session-link { color: #24766b; }
.agenda-heading { flex-wrap: wrap; gap: 6px; }
@media (max-width: 1000px) {
  .event-schedule { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 740px) {
  .event-schedule .date-time-picker:has(.expanded) { grid-template-columns: minmax(0, 1fr); }
  .event-schedule .date-time-picker > * { min-width: 0; }
  .event-schedule-heading small { flex-basis: 100%; }
  .event-response { flex-basis: 100%; }
}
.event-task-choice { display: flex; flex: 1 1 210px; align-items: end; gap: 6px; }
.event-task-choice > label { flex: 1; min-width: 0; }
.event-task-choice > button { margin-bottom: 6px; }
.event-editor label { margin-block: 4px; }
.event-editor > label, .event-attendees { margin-block: 0; }
.event-editor .growing-input::after, .event-editor .growing-input > textarea { min-height: 54px; }
.event-schedule-heading small { font-size: 11px; }

.stage-control { --stage-color: #61778c; position: relative; margin: 0; color: var(--stage-color); }
.stage-control[data-stage="in_progress"] { --stage-color: #21649d; }
.stage-control[data-stage="waiting"] { --stage-color: #92661c; }
.stage-control[data-stage="done"] { --stage-color: #247257; }
.stage-control select { color: var(--stage-color); font-size: 12px; width: 115px; padding: 5px 3px; margin: 0; min-height: 32px; border-color: transparent; background: #f5f8fb; }
.stage-glyph { display: none; }
.task-row > .stage-control > span:not(.stage-glyph), .plan-card > .stage-control > span:not(.stage-glyph) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1100px) {
  .task-row > .stage-control { flex: 0 0 var(--stage-size, 34px); width: var(--stage-size, 34px); height: var(--stage-size, 34px); margin: 0; }
  .task-row > .stage-control select { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
  .task-row > .stage-control .stage-glyph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; pointer-events: none; }
  .stage-glyph .icon { width: 17px; height: 17px; }
  .task-row > .stage-control:focus-within { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 5px; }
  .cross-space-task > .task-time { display: none; }
}
.task-primary-controls > .stage-control { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.blocked-cue { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 11px; color: #92661c; }
.blocked-cue .icon { width: 13px; height: 13px; }
.dependency-controls, .dependency-chips, .task-family { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.task-family:empty { display: none; }
.task-dependencies { margin-bottom: 12px; }
.dependency-chip { display: inline-flex; align-items: center; max-width: 100%; border-radius: 6px; background: #fbf5e9; color: #8b651e; padding-left: 6px; }
.dependency-chip.resolved { background: #edf7f1; color: #247257; }
.dependency-chip > button { border: 0; background: transparent; color: inherit; font-size: 12px; min-width: 0; }
.dependency-chip > .icon { width: 14px; }
.task-picker { position: relative; flex: 1 1 180px; max-width: 320px; }
.task-picker label { margin: 0; }
.task-picker label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.task-picker input { margin: 0; padding: 6px 9px; font-size: 12px; }
.task-picker-results:not(:empty) { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: white; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 5px 16px #17395720; max-height: 240px; overflow: auto; }
.task-picker-option { display: block; width: 100%; text-align: left; border: 0; font-size: 12px; padding: 8px; }
.task-picker-results small { display: block; padding: 8px; }
.task-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-block: 8px 20px; }
.board-column { background: #f5f7fa; border-top: 3px solid #8292a5; border-radius: 6px; padding: 8px; min-width: 0; }
.board-column.stage-in_progress { border-color: #397eaf; }
.board-column.stage-waiting { border-color: #b98b32; }
.board-column.stage-done { border-color: #4c9475; }
.board-column h2 { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 13px; margin: 2px 0 10px; }
.board-column.drop-target { outline: 2px solid var(--blue); }
.task-board .plan-card { padding: 7px; margin-bottom: 6px; background: white; border: 1px solid #e4eaf1; border-radius: 6px; align-items: start; }
.task-board .plan-content { display: contents; }
.task-board .plan-title { grid-column: 2 / -1; grid-row: 1; }
.task-board .plan-details { grid-column: 1 / -1; grid-row: 2; }
.task-board .plan-actions { grid-column: 3; grid-row: 3; }
.task-board .stage-control { grid-column: 1 / 3; grid-row: 3; min-width: 0; align-self: center; }
.task-board .stage-control select { width: 100%; }
.checklist-subtask { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.checklist-subtask .subtask-title { flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; padding-inline: 0; }
.checklist-subtask > small { flex-basis: 100%; padding-left: 40px; font-size: 11px; }
.checklist-row[hidden] { display: none; }
@container collection (max-width: 900px) {
  .task-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container collection (max-width: 500px) {
  .task-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 740px) {
  .stage-control select, .task-picker input { min-height: 44px; font-size: 16px; }
  .task-primary-controls { flex-wrap: wrap; }
  .task-primary-controls > .stage-control { flex-basis: 100%; }
  .task-primary-controls > .stage-control select { flex: 1; }
  .task-picker-option { min-height: 44px; }
}
.task-picker-option > span, .task-picker-option > small { display: block; }
.task-picker-option > small { font-size: 11px; }
.task-context { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-block: 8px 12px; }
.task-context .work-sessions, .task-context .task-occurrences { margin: 0; }
.task-context .task-dependencies { display: contents; }
.task-context .dependency-controls { flex: 1 1 200px; }

/* Outcome links keep the task's owner and current state beside its source. */
.linked-tasks, .source-links { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0; }
.linked-task { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .1rem .4rem; text-align: left; padding: .35rem .5rem; max-width: 100%; background: #f2f6fc; border: 1px solid #dce5ef; border-left: 3px solid #8797ad; }
.linked-task > .icon { grid-row: 1 / 3; align-self: center; }
.linked-task > span, .linked-task small { overflow-wrap: anywhere; }
.linked-task small { grid-column: 2; color: #5d708b; font-size: .75rem; }
.linked-task.stage-in_progress { border-left-color: #3982b9; }
.linked-task.stage-waiting { border-left-color: #c3932e; }
.linked-task.stage-done { border-left-color: #4d987a; }
.source-chip { display: inline-flex; align-items: center; max-width: 100%; background: #f2f6fc; border-radius: 5px; }
.source-chip > button:first-child { overflow-wrap: anywhere; text-align: left; padding: .35rem .5rem; }
.task-sources { margin: 0 0 .3rem; }
.task-link-picker .task-picker { margin-top: .5rem; min-width: 0; }
@media (max-width: 740px) {
  .message-actions > .copy-link { display: none; }
}

.saved-control.is-saved { color: #2466a0; background: #eaf3ff; }
.saved-control.is-saved .icon { fill: currentColor; }
.saved-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 36px 36px; gap: 8px; align-items: center; border-bottom: 1px solid var(--border); padding: 8px 0; }
.saved-open { text-align: left; min-width: 0; padding: 4px; }
.saved-open strong, .saved-open small { display: block; overflow-wrap: anywhere; }
.saved-open small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.saved-reminder > .toolbar { margin-bottom: 12px; }
.channel-context { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 7px; padding-bottom: 3px; }
.channel-context .channel-topic { flex: 1; min-width: 0; border: 0; margin: 0; padding: 0; }
.channel-context > button { flex-shrink: 0; }
.channel-pins { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 6px; }
.channel-pins[hidden] { display: none; }
.pin-link { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; padding: 5px 8px; font-size: 12px; color: #5d4b16; background: #faf7ec; border: 1px solid #e9dfbd; }
.channel-pins .pin-link { max-width: 240px; }
.pin-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.pin-row .pin-link { flex: 1; }
.pin-manager > label { margin-top: 12px; }
.task-board .plan-actions > .copy-link { display: none; }
@media (max-width: 740px) {
  .saved-row { grid-template-columns: 20px minmax(0, 1fr) 44px 44px; gap: 4px; }
  .saved-row > .icon-action { width: 44px; height: 44px; }
  .message-actions > [aria-label="React to message"] { display: none; }
  .channel-context { gap: 6px; }
  .channel-context > button { font-size: 11px; min-height: 44px; }
  .channel-pins .pin-link { min-height: 44px; max-width: 100%; }
}
.collection-view > .view-heading { flex-wrap: wrap; }
.collection-view > .view-heading .view-title { flex-shrink: 0; max-width: 100%; }
.collection-view > .view-heading .toolbar { margin-left: auto; }
/* A call survives view navigation while document views keep their own lifetime. */
.call-panel {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: 1rem;
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid #ccd5dd;
  border-radius: 12px;
  background: #fff;
  color: #172b3a;
  box-shadow: 0 8px 40px #142d4933;
}
.call-panel[hidden], .call-panel [hidden] { display: none; }
.call-heading, .call-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.call-heading { justify-content: space-between; }
.call-heading h2 { margin: 0; font-size: 1.1rem; }
.call-status { margin: .5rem 0; font-size: .9rem; }
.call-video { position: relative; min-height: 7rem; background: #17232e; border-radius: 8px; overflow: hidden; }
.call-video video { display: block; width: 100%; max-height: 45dvh; object-fit: contain; }
.call-video .call-self { position: absolute; right: .5rem; bottom: .5rem; width: 24%; max-height: 7rem; border-radius: 6px; background: #17232e; }
.call-devices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; margin: .75rem 0; }
.call-devices label { min-width: 0; margin: 0; }
.call-devices select { width: 100%; min-width: 0; }
.call-actions { margin-top: .75rem; }
.call-actions button { flex: 1 1 auto; min-height: 44px; }
.call-panel.minimized { width: min(30rem, calc(100vw - 2rem)); }
.call-panel.minimized .call-video, .call-panel.minimized .call-settings { display: none; }
.call-preview { width: 100%; max-height: 28dvh; background: #17232e; border-radius: 8px; }
.call-dialog { width: min(36rem, calc(100vw - 2rem)); }
@media (max-width: 700px) {
  .call-panel { bottom: calc(4.5rem + env(safe-area-inset-bottom)); max-height: calc(100dvh - 9rem); }
  .call-video video { max-height: 28dvh; }
  .call-devices { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}