/* Collaboration additions follow the tokens and primitives documented in DESIGN.md. */
:root{--collab-soft:#f6f9fd;--collab-selected:#eef5ff;--collab-selected-border:#b8cdf2;--collab-note:#f3f6fa;--collab-advisory:#eef7ff;--collab-advisory-text:#31577f;--collab-warning:#fff7e6;--collab-warning-border:#f2d7a4;--collab-warning-text:#78501a;--collab-warning-strong:#9b5c00;--collab-warning-edge:#e8c986;--collab-tree-line:#dce5f1;--collab-danger-soft:#fff0f0;--collab-chip:#f5f8fc;--collab-ink-soft:#334b68;--collab-divider:#edf1f6}
.toolbar-field{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.toolbar-field select{min-width:118px}.form-message{min-height:18px;margin:4px 0;color:var(--red);font-size:12px}
.form-grid fieldset,.task-settings fieldset,#member-groups-form fieldset{margin:0;border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0}
.form-grid legend,.task-settings legend,#member-groups-form legend{padding:0 5px;color:var(--muted);font-size:13px;font-weight:650}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 8px;max-height:168px;overflow:auto;padding:2px}
.choice-item{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:7px!important;padding:7px 8px;border:1px solid transparent;border-radius:8px;color:var(--text)!important;cursor:pointer}
.choice-item:hover{background:var(--collab-soft);border-color:var(--border)}.choice-item:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:1px}.choice-item:has(input:checked){background:var(--collab-selected);border-color:var(--collab-selected-border)}.choice-item input{flex:none;margin-top:2px}.choice-item.is-inactive{color:var(--muted)!important;border-style:dashed}
.field-help{margin:0 0 7px;color:var(--muted);font-size:12px}.permission-note,.advisory,.warning-box{padding:10px 12px;border-radius:10px;font-size:13px}
.readonly-settings{display:grid;gap:10px}.readonly-settings dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}.readonly-settings dl>div{padding:9px 10px;border:1px solid var(--border);border-radius:9px}.readonly-settings dt{color:var(--muted);font-size:11px}.readonly-settings dd{margin:3px 0 0;color:var(--text);font-size:13px;overflow-wrap:anywhere}
.permission-note{background:var(--collab-note);color:var(--muted)}.advisory{margin:0;background:var(--collab-advisory);color:var(--collab-advisory-text)}.warning-box{background:var(--collab-warning);border:1px solid var(--collab-warning-border);color:var(--collab-warning-text)}.warning-box ul{margin:5px 0 0;padding-left:20px}
.task-warning{margin:8px 0 0;color:var(--collab-warning-strong);font-size:12px}.task.has-warning{border-bottom-color:var(--collab-warning-edge)}
.tree-board{display:block}.tree-list{display:grid;gap:6px}.tree-node{min-width:0}.tree-row{display:flex;align-items:flex-start;gap:6px;margin-left:calc(var(--tree-depth) * 24px);position:relative}.tree-row::before{content:"";position:absolute;left:-13px;top:0;bottom:-7px;border-left:1px solid var(--collab-tree-line)}.tree-node:first-child>.tree-row::before{top:18px}.tree-toggle,.tree-spacer{width:30px;height:34px;flex:none}.tree-toggle{border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--primary);font-size:19px;line-height:1;cursor:pointer}.tree-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.tree-card{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tree-card>.task{flex:1}.tree-card .context-label{color:var(--muted);font-size:11px;white-space:nowrap}.context-task{opacity:.58;border-style:dashed}.tree-cycle{margin:6px 0 6px 36px;padding:8px;color:var(--red);background:var(--collab-danger-soft);border-radius:8px}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.catalog-block{border:1px solid var(--border);border-radius:12px;padding:14px}.catalog-block h3{margin:0 0 10px;font-size:14px}.catalog-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.catalog-form label{display:grid;gap:4px;color:var(--muted);font-size:12px}.catalog-form input{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px}.catalog-form .form-message{grid-column:1/-1}.catalog-list{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:8px 0 0}.catalog-list li{display:flex;gap:7px;align-items:center;padding:6px 9px;border-radius:8px;background:var(--collab-chip);color:var(--collab-ink-soft)}.catalog-list small{color:var(--muted)}
.modal-mask{z-index:200}.member-form-actions,#member-form>div:last-child,#import-form>div:last-child{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0}.member-form-actions .btn,#member-form>div:last-child .btn,#import-form>div:last-child .btn{white-space:nowrap;min-width:max-content}.member-form-actions .form-message,#member-form>div:last-child .form-message,#import-form>div:last-child .form-message{margin:0}
body.modal-open{overflow:hidden}.modal{max-width:880px}.task-settings{margin-top:14px}.modal-section{border-top:1px solid var(--border);margin-top:18px;padding-top:15px}.modal-section h3{font-size:14px;margin:0 0 10px}.revision{border:1px solid var(--border);border-radius:10px;padding:11px;margin-bottom:9px}.revision-head{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}.revision-head strong{color:var(--text)}.revision-kind{margin:4px 0 8px;color:var(--muted);font-size:12px}.diff-row{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1fr) 18px minmax(0,1fr);gap:6px;align-items:start;padding:5px 0;border-top:1px solid var(--collab-divider);font-size:12px;overflow-wrap:anywhere}.diff-row strong{color:var(--collab-ink-soft)}.revision .btn{margin-top:8px}
.attachment-form{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(160px,1fr) auto;align-items:end}.attachment-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.attachment-card img{display:block;width:150px;height:92px;object-fit:cover;border-radius:9px;background:var(--collab-divider)}.attachment-card strong{display:block;overflow-wrap:anywhere}.attachment-card p{margin:4px 0;color:var(--muted);font-size:12px}.attachment-card small{color:var(--muted)}.attachment-card .btn{display:block;margin-top:6px}
@media(max-width:768px){.catalog-grid{grid-template-columns:1fr}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.attachment-form{grid-template-columns:1fr}.modal{max-width:calc(100vw - 24px)}.tree-row{margin-left:calc(min(var(--tree-depth),3) * 18px)}}
@media(max-width:480px){.choice-grid,.readonly-settings dl{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.attachment-card{grid-template-columns:100px minmax(0,1fr)}.attachment-card img{width:100px;height:76px}.diff-row{grid-template-columns:1fr}.diff-row>span:nth-of-type(2){display:none}.revision-head{display:grid}.toolbar-field{width:100%;justify-content:space-between}.toolbar-field select{flex:1}.seg{width:100%}.seg button{flex:1}.tree-card{display:block}.tree-card .context-label{display:block;margin:2px 0 8px}}
@media(prefers-reduced-motion:reduce){.task,.tree-toggle,.choice-item{transition:none!important}}


/* Progress timeline, illustrated updates and a fixed top-right dialog close. */
.modal { position: relative; }
.modal-head { padding-right: 72px; min-height: 32px; }
.modal-head > [data-close] { position: absolute; top: 16px; right: 16px; z-index: 3; }
.task-progress-heading { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-top: 10px; color: var(--muted); }
.task-progress-heading strong { color: var(--text); font-variant-numeric: tabular-nums; }
.progress-last { margin-top: 8px; padding: 8px; border-radius: 8px; background: var(--collab-note); font-size: 12px; color: var(--muted); }
.progress-last p { margin: 5px 0 7px; white-space: pre-wrap; color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.progress-last img { display: inline-block; width: 68px; height: 50px; object-fit: cover; border-radius: 6px; margin-right: 5px; }
.task-progress-form { margin: 12px 0 !important; }
.progress-edit-row { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 12px; }
.progress-edit-row input[type="range"] { padding: 0; width: 100%; accent-color: var(--primary); }
.progress-edit-row input[type="number"] { min-width: 0; }
.progress-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.progress-submit .form-message { margin: 0; }
.progress-timeline { display: grid; gap: 10px; margin-top: 10px; max-height: 420px; overflow: auto; }
.progress-entry { border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.progress-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; }
.progress-entry-head time { color: var(--muted); }
.progress-entry-note { margin: 8px 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.progress-entry-images { display: flex; flex-wrap: wrap; gap: 8px; }
.progress-entry-images img { display: block; width: 110px; height: 80px; object-fit: cover; border-radius: 8px; }

/* Directed task dependency graph: SVG edges behind focusable HTML task cards. */
.tree-board { display: block; }
.graph-caption { color: var(--muted); font-size: 13px; padding: 8px 0 12px; }
.dependency-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(#dfe6f0 .7px, transparent .7px) 0 0 / 18px 18px, var(--collab-soft); max-height: min(80vh, 850px); }
.dependency-graph { position: relative; min-height: 300px; }
.dependency-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: #7590b4; pointer-events: none; overflow: visible; }
.dependency-node { position: absolute; overflow: hidden; }
.dependency-node > .task { height: 100%; overflow: auto; background: var(--card); }
.dependency-node.is-context { opacity: .7; }
.dependency-node .task-head h3 { overflow-wrap: anywhere; }
.dependency-node .progress-last { max-height: 108px; overflow: hidden; }
.dependency-node .task-foot { gap: 8px; }
@media (max-width: 480px) {
  .progress-edit-row { grid-template-columns: minmax(0,1fr) 88px; }
  .progress-entry-head { flex-direction: column; gap: 2px; }
}


/* Both task-center cards and dashboard entries breathe red when 0–3 days remain. */
@keyframes task-due-breathe {
  0%,100% {box-shadow:0 0 0 0 rgba(211,52,74,.08)}
  50% {box-shadow:0 0 0 3px rgba(211,52,74,.2),0 0 18px rgba(211,52,74,.18)}
}
.task.is-due-soon,.ws-task-row.is-due-soon {
  border:1px solid #d3344a;
  animation:task-due-breathe 2.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .task.is-due-soon,.ws-task-row.is-due-soon{animation:none}
}

/* Local collaboration uses the active palette; content never supplies markup. */
.panel.collab-hub { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.65fr); padding:0 !important; overflow:hidden; min-height:560px; height:min(780px,calc(100dvh - 264px)); }
.collab-hub [hidden], .collab-topic-dialog [hidden] { display:none !important; }
.collab-list-pane { min-width:0; min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--border); }
.collab-search { padding:20px 16px 12px; display:grid; gap:8px; }
.collab-search>div { display:flex; gap:8px; }
.collab-search input { flex:1; width:100%; min-width:0; }
.collab-hub .btn, .collab-topic-dialog .btn { min-height:44px; }
.collab-topics { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.collab-topic { display:block; width:100%; text-align:left; padding:16px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; }
.collab-topic:hover, .collab-topic[aria-current=true] { background:var(--collab-selected); }
.collab-topic:focus-visible { outline:2px solid var(--primary); outline-offset:-3px; }
.collab-topic strong { display:block; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.collab-topic small { display:block; margin-top:8px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.collab-topic-count { display:inline-block; padding:1px 7px; border-radius:20px; background:var(--primary); color:var(--on-primary,#fff); font-size:12px; margin-left:8px; }
.collab-pages { display:flex; justify-content:space-between; align-items:center; gap:6px; border-top:1px solid var(--border); padding:12px; flex:none; font-size:12px; }
.collab-pages .btn { white-space:nowrap; flex:none; min-width:66px; padding-inline:10px; }
.collab-pages span { min-width:0; text-align:center; }
.collab-status { font-size:13px; color:var(--muted); margin:8px 0; overflow-wrap:anywhere; }
.collab-status:empty { display:none; }
.collab-list-pane>.collab-status, .collab-thread>.collab-status { margin:8px 16px; }
.collab-detail-pane, .collab-thread { min-width:0; min-height:0; display:flex; flex-direction:column; }
.collab-detail-pane { position:relative; }
.collab-empty { margin:auto; text-align:center; padding:36px; color:var(--muted); }
.collab-empty svg { width:40px; height:40px; stroke:var(--primary); fill:none; stroke-width:1.5; }
.collab-empty h2 { color:var(--text); font-size:20px; }
.collab-thread { height:100%; }
.collab-thread-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); flex:none; }
.collab-thread-head>div { min-width:0; flex:1; }
.collab-hub .collab-thread-head h2 { font-size:18px; margin:0; overflow-wrap:anywhere; line-height:1.5; }
.collab-thread-head p { color:var(--muted); font-size:12px; margin:6px 0 0; }
.collab-back { display:none; }
.collab-messages-scroll { flex:1; min-height:100px; overflow-y:auto; overscroll-behavior:contain; padding:20px; scroll-padding:16px; overflow-anchor:none; }
.collab-messages { display:grid; gap:18px; }
.collab-message { min-width:0; border:1px solid var(--border); border-radius:12px; background:var(--card); padding:14px 16px; }
.collab-message.is-own { border-color:var(--collab-selected-border); background:var(--collab-selected); }
.collab-message.is-withdrawn { color:var(--muted); background:var(--collab-note); }
.collab-message-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:32px; font-size:13px; }
.collab-message-head time { color:var(--muted); font-size:12px; }
.collab-message-head button { margin-left:auto; }
.collab-message-body { margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; font-size:14px; }
.collab-attachments { display:grid; gap:8px; margin-top:12px; }
.collab-attachment { display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:10px; min-width:0; color:var(--text); text-decoration:none; min-height:44px; }
.collab-attachment:hover { border-color:var(--primary); }
.collab-attachment img { width:64px; height:64px; object-fit:cover; border-radius:6px; flex:none; }
.collab-attachment span { min-width:0; overflow-wrap:anywhere; }
.collab-attachment small { display:block; color:var(--muted); margin-top:4px; }
.collab-older { display:block; margin:0 auto 18px; }
.collab-new-messages { align-self:center; margin:0 12px 8px; background:var(--primary); color:var(--on-primary,#fff); flex:none; }
.collab-composer { padding:16px 20px; border-top:1px solid var(--border); display:grid; gap:9px; min-width:0; flex:none; }
.collab-thread>.collab-composer { max-height:55%; min-height:0; overflow-y:auto; }
.collab-composer>label, .collab-topic-fields>label { display:grid; gap:8px; font-size:13px; }
.collab-composer textarea, .collab-composer input[type=text], #collab-new-title { width:100%; max-width:100%; min-width:0; }
.collab-composer textarea { resize:vertical; min-height:72px; max-height:180px; }
.collab-composer-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.collab-composer-tools>[type=submit] { margin-left:auto; }
.collab-file-button { position:relative; overflow:hidden; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.collab-file-button input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.collab-file-button:focus-within { outline:2px solid var(--primary); outline-offset:2px; }
.collab-limit, .collab-shortcut { font-size:11px; color:var(--muted); }
.collab-selected-files { list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:130px; overflow:auto; }
.collab-selected-files:empty { display:none; }
.collab-selected-files li { display:flex; gap:8px; align-items:center; font-size:12px; min-width:0; }
.collab-selected-files span { flex:1; min-width:0; overflow-wrap:anywhere; }
.collab-composer progress { width:100%; height:8px; accent-color:var(--primary); }
.collab-topic-dialog { width:min(680px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border); border-radius:20px; color:var(--text); background:var(--card); overflow:hidden; }
.collab-topic-dialog[open] { display:flex; flex-direction:column; }
.collab-topic-dialog::backdrop { background:#0a0e1899; backdrop-filter:blur(4px); }
body.collab-dialog-open { overflow:hidden; }
.collab-topic-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }
.collab-topic-dialog h2 { margin:0; font-size:22px; }
.collab-topic-dialog .collab-composer { padding:0; min-height:0; flex:1; gap:0; display:flex; flex-direction:column; }
.collab-topic-fields { padding:20px 24px; overflow-y:auto; min-height:0; display:grid; gap:16px; }
.collab-topic-dialog footer { display:flex; align-items:center; gap:10px; padding:16px 24px; border-top:1px solid var(--border); flex:none; }
.collab-topic-dialog footer>span { margin-right:auto; }
@media(max-width:767px) {
  .panel.collab-hub { display:flex; flex-direction:column; min-height:420px; height:calc(100dvh - 204px); max-height:none; }
  .ws-app .ux-page-head:has(+ .collab-hub) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:16px; }
  .ux-page-head:has(+ .collab-hub) .ux-eyebrow { display:none; }
  .ws-app .workspace-main .ux-page-head:has(+ .collab-hub) h1 { font-size:26px; margin-bottom:4px; }
  .ux-page-head:has(+ .collab-hub) p:not(.ux-eyebrow) { margin:0; line-height:1.45; }
  .collab-list-pane { border-right:0; flex:1; }
  .collab-detail-pane { display:none; flex:1; }
  .collab-hub.is-thread .collab-list-pane { display:none; }
  .collab-hub.is-thread .collab-detail-pane { display:flex; }
  .collab-back { display:inline-flex; }
  .collab-thread-head { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:12px; gap:8px; }
  .collab-thread-head>div { grid-row:2; grid-column:1/-1; }
  .collab-thread-head .collab-back { grid-row:1; justify-self:start; }
  .collab-thread-head #collab-withdraw-topic { grid-row:1; grid-column:2; justify-self:end; margin:0; }
  .collab-messages-scroll { padding:12px; }
  .collab-composer { padding:12px; }
  .collab-composer textarea { min-height:60px; max-height:130px; font-size:16px; }
  .collab-limit { flex:1 1 120px; }
  .collab-shortcut { display:none; }
  .collab-composer input { font-size:16px; }
  .collab-message { padding:12px; }
  .collab-topic-dialog { width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .collab-topic-dialog>header { padding:calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .collab-topic-fields { padding:16px; flex:1; align-content:start; }
  .collab-topic-dialog footer { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); justify-content:flex-end; }
}