/* One component system, two palettes. Decorations are original, local SVG. */
:root {
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  --brand: #e3051b; --brand-hover: #c60419; --brand-ink: #bd0016;
  --graphite: #4c4c4c; --bg: #f3f4f6; --surface: #fff; --surface-raised: #fff;
  --surface-soft: #f0f1f3; --surface-hover: #f8eeee; --text: #232429;
  --muted: #62646d; --border: #dddfe5; --border-strong: #858b96;
  --accent: var(--brand-ink); --on-brand: #fff; --focus: #bd0016;
  --danger: #bb1027; --danger-bg: #fff0f1; --info-bg: #f5f0ea; --info-ink: #72532c;
  --idea-bg: #eceef2; --idea-ink: #515969; --doing-bg: #eaf1fb; --doing-ink: #255b92;
  --review-bg: #fbf2dd; --review-ink: #80540a; --done-bg: #e7f3ec; --done-ink: #266441;
  --shadow: 0 2px 4px #24252b05, 0 8px 24px #24252b0b; --shadow-raised: 0 14px 42px #11121820;
  --radius: 12px; --radius-small: 8px; --radius-panel: 16px;
  --nav-bg: #d4051b; --nav-text: #fff; --nav-muted: #ffe1e4; --nav-hover: #ffffff20;
  --nav-selected: #ffffff25; --nav-line: #ffffff38; --tile-bg: #f8e9ea;
  --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192%2096%22%20fill%3D%22none%22%20stroke%3D%22%23e3051b%22%20stroke-width%3D%221.5%22%3E%3Cdefs%3E%3Cpath%20id%3D%22roof%22%20d%3D%22M8%2040%2024%208l16%2032M14%2040%2024%2020l10%2020%22%2F%3E%3Cpath%20id%3D%22diamond%22%20d%3D%22m8%2024%2016-16%2016%2016-16%2016ZM16%2024l8-8%208%208-8%208Z%22%2F%3E%3Cpath%20id%3D%22star%22%20d%3D%22M24%208v32M8%2024h32M12%2012l24%2024M12%2036l24-24%22%2F%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200h192v96H0ZM48%200v96M96%200v96M144%200v96M0%2048h192%22%2F%3E%3Cuse%20href%3D%22%23roof%22%20x%3D%220%22%20y%3D%220%22%2F%3E%3Cuse%20href%3D%22%23diamond%22%20x%3D%2248%22%20y%3D%220%22%2F%3E%3Cuse%20href%3D%22%23star%22%20x%3D%2296%22%20y%3D%220%22%2F%3E%3Cuse%20href%3D%22%23diamond%22%20x%3D%22144%22%20y%3D%220%22%2F%3E%3Cuse%20href%3D%22%23star%22%20x%3D%220%22%20y%3D%2248%22%2F%3E%3Cuse%20href%3D%22%23roof%22%20x%3D%2248%22%20y%3D%2248%22%2F%3E%3Cuse%20href%3D%22%23diamond%22%20x%3D%2296%22%20y%3D%2248%22%2F%3E%3Cuse%20href%3D%22%23star%22%20x%3D%22144%22%20y%3D%2248%22%2F%3E%3C%2Fsvg%3E");
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #e3051b; --brand-hover: #ff1932; --brand-ink: #ff7786;
  --bg: #121518; --surface: #1b1f23; --surface-raised: #24292e; --surface-soft: #24292e;
  --surface-hover: #30252b; --text: #f4f5f6; --muted: #aeb5bd; --border: #343b43;
  --border-strong: #515c68; --focus: #ff8793; --danger: #ff8793; --danger-bg: #382229;
  --info-bg: #302b24; --info-ink: #e3c597;
  --idea-bg: #242b32; --idea-ink: #b9c4d1; --doing-bg: #202e3d; --doing-ink: #91b9e8;
  --review-bg: #352e21; --review-ink: #e4be70; --done-bg: #20332b; --done-ink: #91d1ac;
  --shadow: 0 3px 16px #00000020; --shadow-raised: 0 18px 50px #00000060;
  --nav-bg: #0d1013; --nav-text: #f4f5f6; --nav-muted: #aeb5bd;
  --nav-hover: #ffffff0c; --nav-selected: #e3051b; --nav-line: #343b43; --tile-bg: #2a2025;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--text); scroll-padding-top: 90px; }
body { margin: 0; min-width: 280px; font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea, summary { font: inherit; }
button, a, summary, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, summary { touch-action: manipulation; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; min-height: 40px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text); font-weight: 600; line-height: 1.35; white-space: normal; }
button:not(:disabled), summary { cursor: pointer; }
button:not(:disabled):hover { background: var(--surface-hover); border-color: var(--border-strong); }
button:disabled { opacity: .48; cursor: not-allowed; }
:where(a, button, summary, input, textarea, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }
input, textarea, select { width: 100%; min-width: 0; max-width: 100%; padding: 11px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-small); }
input:disabled, textarea:disabled, select:disabled { opacity: .6; }
input:read-only, textarea:read-only { background: var(--surface-soft); }
textarea { resize: vertical; line-height: 1.65; }
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--brand); flex: 0 0 18px; }
input[type="file"] { font-size: 13px; padding: 10px; }
input::file-selector-button { font: inherit; border: 0; border-radius: 5px; padding: 7px 10px; margin-right: 10px; color: var(--text); background: var(--surface-soft); cursor: pointer; }
h1, h2, h3, h4, h5, p { overflow-wrap: anywhere; }
h2 { margin: 0; font-size: clamp(25px, 2.4vw, 34px); letter-spacing: -.035em; line-height: 1.2; }
h3 { margin: 0; font-size: 20px; line-height: 1.4; }
h4 { margin: 0; font-size: 16px; }
h5 { margin: 0; font-size: 15px; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 40px; padding: 9px; flex: 0 0 40px; }
.skip-link { position: fixed; top: 10px; left: 10px; padding: 12px 18px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-small); transform: translateY(-180%); z-index: 100; }
.skip-link:focus { transform: none; }
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: 72px 1fr auto; min-height: 100dvh; }
.header { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 16px; justify-content: space-between; min-width: 0; padding: 0 32px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.workspace-label { color: var(--muted); font-size: 12px; }
.workspace-label span { color: var(--text); padding-left: 10px; border-left: 1px solid var(--border); margin-left: 10px; font-weight: 600; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.sidebar { grid-column: 1; grid-row: 1 / 4; display: flex; flex-direction: column; padding: 27px 16px 22px; background: var(--nav-bg); color: var(--nav-text); position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; z-index: 30; }
.brand { display: flex; gap: 11px; align-items: center; margin: 0 8px 38px; font-size: 23px; font-weight: 750; line-height: 1.05; letter-spacing: -.045em; }
.brand-mark { width: 48px; height: 48px; flex: 0 0 48px; }
:root[data-theme="dark"] .brand-mark { color: var(--brand); }
.sidebar-label { margin: 0 12px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--nav-muted); }
.navigation { display: grid; gap: 7px; }
.navigation button { justify-content: flex-start; background: transparent; color: var(--nav-text); border-color: transparent; font-size: 13px; min-height: 46px; padding-inline: 13px; }
.navigation button:hover { background: var(--nav-hover); border-color: transparent; }
.navigation button[aria-current="page"] { background: var(--nav-selected); color: var(--on-brand); }
.sidebar :focus-visible { outline-color: var(--on-brand); }
.sidebar-bottom { margin-top: auto; padding-top: 35px; }
.sidebar-bottom details { border-top: 1px solid var(--nav-line); margin-top: 12px; padding: 14px 10px; }
.sidebar-bottom summary { font-size: 12px; }
.sidebar-bottom summary::after { content: '+'; float: right; }
.sidebar-bottom details[open] summary::after { content: '−'; }
.sidebar-bottom p { font-size: 12px; line-height: 1.7; color: var(--nav-muted); }
.maintenance button { width: 100%; background: var(--surface); color: var(--text); font-size: 12px; }
.sidebar-ornament { height: 96px; margin: 22px 0 18px; background-image: var(--pattern); background-size: contain; background-repeat: no-repeat; background-position: left center; opacity: .85; }
:root[data-theme="light"] .sidebar-ornament { filter: brightness(0) invert(1); opacity: .72; }
.sidebar-signature { margin: 0 10px; font-size: 10px !important; text-transform: uppercase; letter-spacing: .18em; line-height: 1.6; }
.mobile-menu-toggle { display: none; }
main { grid-column: 2; grid-row: 2; min-width: 0; width: 100%; padding: 32px; }
.panel { min-width: 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 28px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; margin: 0 0 8px; }
.section-caption { color: var(--muted); margin: 10px 0 0; font-size: 13px; }
.create-control { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.soon { color: var(--muted); font-size: 11px; }
#create-project, #create-task, #project-submit, #task-submit, #task-detail-save, #project-edit-save, #upload-material, #file-upload-submit, #invite-submit, #login-submit, #material-submit { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
#create-project:not(:disabled):hover, #create-task:not(:disabled):hover, #project-submit:not(:disabled):hover, #task-submit:not(:disabled):hover, #task-detail-save:not(:disabled):hover, #project-edit-save:not(:disabled):hover, #upload-material:not(:disabled):hover, #file-upload-submit:not(:disabled):hover, #invite-submit:not(:disabled):hover, #login-submit:not(:disabled):hover, #material-submit:not(:disabled):hover { background: var(--brand-hover); border-color: var(--brand-hover); }
#create-project { min-height: 44px; }
.danger, #archive-project, #clear-archive, #task-detail-archive { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.danger:hover, #archive-project:hover, #clear-archive:hover, #task-detail-archive:hover { border-color: var(--danger); background: var(--danger-bg); }
.action-menu { position: relative; }
.action-menu > summary { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-small); padding: 9px 13px; min-height: 40px; background: var(--surface); }
.action-menu > summary:hover, .action-menu[open] > summary { background: var(--surface-hover); }
.menu-content { position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 40px)); padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-raised); background: var(--surface-raised); z-index: 35; }
.menu-content button { width: 100%; justify-content: flex-start; font-size: 13px; border-color: transparent; }
.menu-content p { padding: 4px 7px; margin: 3px 0 8px; }
.menu-label { color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.profile-menu .menu-content { width: 260px; }
.profile-menu > summary { gap: 8px; line-height: 20px; white-space: nowrap; }
.profile-chevron { display: block; width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-menu[open] .profile-chevron { transform: rotate(180deg); }
.project-access, .project-form, .task-create-form, .project-edit-form, .material-form, .invite-panel, .task-archive-panel { padding: 22px; margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow); }
.project-access { max-width: 640px; border-top: 3px solid var(--brand); }
.project-fields { display: grid; gap: 16px; margin: 18px 0; }
.project-fields label, #file-upload-form label { display: grid; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; }
.project-help, .panel-note, .section-caption, .members-message { color: var(--muted); font-size: 12px; line-height: 1.7; }
.project-message, .materials-message, .project-edit-message, .invite-message { margin: 0 0 20px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.project-message:empty, .materials-message:empty, .project-edit-message:empty, .invite-message:empty { display: none; }
[data-kind="error"], .assignment-message { color: var(--danger); }
[aria-busy="true"] { cursor: progress; }
form[aria-busy="true"] { border-color: var(--brand); }
.project-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 20px; padding: 0; list-style: none; margin: 0; }
.project-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.project-card:hover { border-color: var(--border-strong); }
.project-open { display: block; width: 100%; height: 100%; min-width: 0; padding: 0 20px 20px; background: transparent; border: 0; border-radius: inherit; text-align: left; color: var(--text); font-weight: 400; }
.project-open:not(:disabled):hover { background: transparent; }
.project-cover { display: block; height: 100px; margin: 0 -20px 18px; background: var(--tile-bg); color: var(--brand); border-bottom: 1px solid var(--border); overflow: hidden; }
.project-ornament { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.project-card-title { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; }
.project-card-description { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.6; white-space: pre-wrap; }
.project-card-statistics { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin-top: 20px; font-size: 12px; color: var(--muted); }
.project-card-percent { color: var(--text); font-weight: 650; }
.project-card-completed { grid-column: 1 / -1; font-size: 11px; }
.project-card-metadata { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.7; }
progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 10px; background: var(--surface-soft); accent-color: var(--brand); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--surface-soft); border-radius: 10px; }
progress::-webkit-progress-value { background: var(--brand); border-radius: 10px; }
progress::-moz-progress-bar { background: var(--brand); border-radius: 10px; }
.project-card-progress { grid-column: 1 / -1; }
.project-card-overdue, .task-overdue { color: var(--danger); }
.project-card-overdue { display: inline-block; margin-top: 10px; padding: 3px 7px; background: var(--danger-bg); border-radius: 5px; font-size: 11px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 50px 20px; min-height: 290px; border: 1px dashed var(--border-strong); border-radius: var(--radius-panel); background: var(--surface); }
.empty-icon { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 20px; color: var(--brand); background: var(--tile-bg); border-radius: var(--radius); }
.empty-icon svg { width: 50px; height: 50px; }
.empty-state p { max-width: 380px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.panel-note { margin: 25px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.footer { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 32px; padding: 17px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.board-open .section-header { display: none; }
.kanban-view { min-width: 0; width: 100%; }
.kanban-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kanban-header .back-link { flex: 0 0 100%; justify-content: flex-start; border: 0; min-height: 24px; padding: 0; margin-bottom: 10px; background: transparent; color: var(--muted); font-size: 12px; }
.kanban-header h3 { flex: 1 1 280px; min-width: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; letter-spacing: -.025em; }
.open-project-info { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 12px 0 22px; }
.open-project-info p { margin: 6px 0; white-space: pre-wrap; }
.open-project-info p:empty { display: none; }
#archive-readonly, #task-detail-readonly { padding: 10px 13px; border-left: 3px solid var(--review-ink); background: var(--review-bg); color: var(--review-ink); border-radius: 5px; }
.project-tabs { display: flex; gap: 5px; margin: 0 0 24px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.project-tabs button { background: transparent; border-color: transparent; font-size: 13px; min-height: 38px; padding: 8px 16px; font-weight: 500; }
.project-tabs button[aria-pressed="true"] { color: var(--on-brand); background: var(--brand); font-weight: 650; }
.project-progress { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(250px, 2fr); gap: 8px 28px; margin: 18px 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.project-progress h4 { font-size: 12px; font-weight: 500; color: var(--muted); }
.project-progress > .project-help { grid-column: 1; margin: 0; font-size: 11px; }
#progress-data { display: contents; }
.progress-overview { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.progress-overview strong { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.progress-overview span { color: var(--muted); font-size: 12px; }
.project-progress progress { grid-column: 2; grid-row: 2; }
.progress-statuses { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.progress-statuses div { display: flex; align-items: center; gap: 7px; }
.progress-statuses dt { color: var(--muted); font-size: 11px; }
.progress-statuses dd { margin: 0; font-size: 12px; font-weight: 700; }
.kanban-columns { display: grid; grid-template-columns: repeat(var(--stage-count, 4), minmax(230px, 1fr)); gap: 14px; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; padding: 2px 2px 16px; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.kanban-column { --column-bg: var(--idea-bg); --column-ink: var(--idea-ink); min-width: 0; min-height: 270px; padding: 12px; border-radius: var(--radius); background: var(--column-bg); scroll-snap-align: start; }
.kanban-column[data-status="doing"] { --column-bg: var(--doing-bg); --column-ink: var(--doing-ink); }
.kanban-column[data-status="review"] { --column-bg: var(--review-bg); --column-ink: var(--review-ink); }
.kanban-column[data-status="done"] { --column-bg: var(--done-bg); --column-ink: var(--done-ink); }
.kanban-column h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; color: var(--column-ink); font-size: 12px; }
.task-count { min-width: 22px; padding: 2px 6px; border-radius: 6px; background: var(--surface); color: var(--column-ink); text-align: center; font-size: 11px; }
.task-list { display: grid; gap: 9px; align-content: start; list-style: none; padding: 0; margin: 0; }
.task-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); box-shadow: var(--shadow); }
.task-card { transition: opacity 180ms ease, box-shadow 180ms ease; }
.task-drag-source { opacity: .35; outline: 1px dashed var(--border-strong); }
.task-drag-layer { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
.task-drag-preview { position: absolute; top: 0; left: 0; margin: 0; list-style: none; pointer-events: none; box-shadow: var(--shadow-raised); transform-origin: center; will-change: transform; animation: task-drag-lift 180ms ease-out; }
@keyframes task-drag-lift { from { opacity: .65; } to { opacity: 1; } }
.task-drag-preview .task-open { cursor: grabbing; }
.task-drag-invalid { outline: 1px dashed var(--border-strong); }
.kanban-column { transition: box-shadow 180ms ease; }
.kanban-column.task-drop-target { box-shadow: inset 0 0 0 2px var(--column-ink); }
.task-drag-board { scroll-snap-type: none; scroll-behavior: auto; }
.task-drag-active, .task-drag-active * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.task-drag-saving { opacity: .6; outline: 1px dashed var(--accent); }
.task-drag-saving .task-open { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .task-card, .kanban-column { transition: none; }
  .task-drag-preview { --task-drag-scale: 1; animation: none; }
}
.task-open { display: block; width: 100%; min-width: 0; padding: 12px; border: 0; border-radius: inherit; background: transparent; text-align: left; color: var(--text); font-weight: 400; }
.task-open h5 { font-size: 12px; line-height: 1.55; font-weight: 650; }
.task-open p { margin: 9px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.task-open .task-overdue { color: var(--danger); }
.column-add-task { justify-content: flex-start; width: 100%; margin: 0 0 12px; padding: 7px 8px; min-height: 34px; background: transparent; border: 1px dashed var(--border-strong); color: var(--column-ink); font-size: 11px; }
.column-empty { font-size: 11px; color: var(--muted); padding: 5px; }
.materials-view, .team-view { min-width: 0; }
.materials-header, .invite-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.materials-list, .team-list, .archive-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 18px 0; }
.material-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.material-card h5 { flex: 1 1 200px; min-width: 0; font-size: 14px; }
.material-card > .project-help { flex: 1 1 100%; margin: 0; }
.material-open { display: inline-flex; padding: 8px 13px; color: var(--accent); font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.material-open:hover { background: var(--surface-hover); }
.team-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.team-card, .archive-card { padding: 18px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow-wrap: anywhere; }
.team-card h5, .archive-card h5, .archive-card h4 { font-size: 14px; margin: 0; }
.team-card p, .archive-card p { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 8px 0 14px; white-space: pre-wrap; }
.team-card button, .archive-card button { font-size: 12px; }
.archive-view h3 { margin-bottom: 12px; }
.archive-view > h4 { margin-top: 30px; font-size: 14px; }
.archive-action { max-width: 100%; }
.invite-code { display: block; padding: 18px; margin: 12px 0; border: 1px dashed var(--border-strong); border-radius: var(--radius-small); background: var(--surface-soft); color: var(--text); font-family: ui-monospace, monospace; font-size: 15px; overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.task-dialog { width: min(680px, calc(100% - 32px)); max-width: 100%; max-height: calc(100dvh - 32px); margin: auto; padding: 26px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised); overflow-x: hidden; overflow-y: auto; }
.task-dialog::backdrop { background: #080b10b8; backdrop-filter: blur(3px); }
.task-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.task-dialog-header h3 { font-size: 22px; letter-spacing: -.025em; min-width: 0; }
.task-dialog-header > button { font-size: 12px; flex-shrink: 0; }
.task-detail-names { color: var(--muted); font-size: 12px; line-height: 1.7; }
.assignment-choices { min-width: 0; margin: 18px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.assignment-choices legend { max-width: 100%; padding: 0 5px; color: var(--muted); font-size: 12px; }
.assignment-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; min-width: 0; font-size: 13px; }
.assignment-option span { min-width: 0; overflow-wrap: anywhere; }
.assignment-option input { margin-top: 3px; }
.assignment-missing { padding: 10px; margin-top: 8px; background: var(--info-bg); color: var(--info-ink); border-radius: var(--radius-small); }
.assignment-remove { margin-top: 6px; font-size: 11px; }
.task-checklist { margin: 25px 0; padding-top: 20px; border-top: 1px solid var(--border); }
.task-checklist h4 { font-size: 15px; }
#checklist-items { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.checklist-row { padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-soft); min-width: 0; }
.checklist-row > label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.6; }
.checklist-row input[type="checkbox"] { margin-top: 3px; }
.checklist-edit { display: flex; gap: 8px; margin: 12px 0; }
.checklist-edit input { min-width: 0; flex: 1; background: var(--surface); }
.checklist-row button { font-size: 11px; }
#checklist-create, #checklist-create label { display: grid; gap: 10px; }
@media (min-width: 1650px) { main { padding: 40px 48px; } .project-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .shell { grid-template-columns: 204px minmax(0, 1fr); } main { padding: 25px; } .header { padding-inline: 25px; } .project-progress { grid-template-columns: minmax(130px, 1fr) minmax(170px, 2fr); } .kanban-header > .project-actions { flex: 1 1 100%; } }
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px 1fr auto; }
  .header { grid-column: 1; padding: 0 18px; gap: 12px; }
  .mobile-menu-toggle { display: inline-flex; }
  .workspace-label { font-size: 12px; font-weight: 700; color: var(--text); margin-right: auto; }
  .workspace-label > span { display: none; }
  .header-actions { gap: 7px; }
  .profile-menu summary { font-size: 12px; padding: 8px 10px; }
  .sidebar { display: none; position: fixed; top: 64px; bottom: 0; left: 0; width: min(290px, 100%); height: calc(100dvh - 64px); box-shadow: var(--shadow-raised); }
  .sidebar[data-open="true"] { display: flex; }
  .sidebar .brand { font-size: 22px; margin-bottom: 24px; }
  main { grid-column: 1; padding: 24px 18px; }
  .footer { grid-column: 1; margin-inline: 18px; }
  .section-header { gap: 14px; align-items: flex-start; }
  .create-control { align-items: flex-end; }
  .section-header .eyebrow { font-size: 9px; }
  .section-caption { display: none; }
  .section-header h2 { font-size: 26px; }
  .project-progress { display: block; }
  .progress-overview { margin: 12px 0; }
  .progress-statuses { gap: 10px 16px; }
  .project-tabs { gap: 5px; }
  .project-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 12px; }
}
@media (max-width: 480px) {
  .header { padding-inline: 12px; gap: 8px; }
  .workspace-label { font-size: 11px; }
  main { padding: 22px 14px; }
  .section-header { flex-direction: column; margin-bottom: 20px; }
  .create-control { width: 100%; align-items: stretch; }
  .create-control > .project-actions { justify-content: space-between; }
  #create-project { flex: 1; }
  .soon { font-size: 10px; }
  .project-access, .project-form, .task-create-form, .project-edit-form, .material-form, .invite-panel, .task-archive-panel { padding: 16px; }
  .project-list { gap: 16px; }
  .kanban-header h3 { font-size: 25px; flex-basis: 100%; }
  .kanban-header > .project-actions { gap: 7px; }
  #create-task { flex: 1; }
  #create-invite { font-size: 11px; flex: 1; }
  .kanban-columns { grid-template-columns: repeat(var(--stage-count, 4), minmax(260px, 1fr)); gap: 12px; }
  .task-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 18px; border-radius: var(--radius); }
  .task-dialog-header h3 { font-size: 19px; }
  .task-dialog .project-actions, .checklist-edit, .materials-header > .project-actions { flex-direction: column; align-items: stretch; }
  .task-dialog .project-actions > button { width: 100%; }
  .material-card { padding: 16px; }
  .material-card .project-actions { flex: 1 1 100%; }
  .material-card .project-actions button { flex: 1 1 auto; }
  .invite-header { align-items: flex-start; }
  .invite-header h4 { flex: 1 1 100%; }
  .archive-card .project-actions { flex-direction: column; align-items: stretch; }
  .footer { margin-inline: 14px; font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) { button, a, summary { transition: background-color .15s, border-color .15s, color .15s; } }
@media (forced-colors: active) { button, .project-card, .kanban-column, .task-card { border: 1px solid CanvasText; } }

/* Project-specific stages reuse the existing column palette. */
.stage-setting-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.stage-setting-row label { flex: 1 1 200px; min-width: 0; }
.stage-setting-row input, .stage-transfer select { width: 100%; min-width: 0; }
.stage-transfer { display: grid; gap: 8px; padding-block: 12px; overflow-wrap: anywhere; }
#stages-settings { min-width: 0; max-width: 100%; }
#stages-message { overflow-wrap: anywhere; color: var(--danger); }
.progress-statuses { flex-wrap: wrap; }

/* Whitelisted stage themes: soft surfaces and readable foregrounds. */
[data-stage-color="slate"] { --stage-bg: #eceef2; --stage-ink: #515969; }
[data-stage-color="blue"] { --stage-bg: #eaf1fb; --stage-ink: #255b92; }
[data-stage-color="indigo"] { --stage-bg: #eeedfb; --stage-ink: #48428f; }
[data-stage-color="violet"] { --stage-bg: #f3eafa; --stage-ink: #71408e; }
[data-stage-color="teal"] { --stage-bg: #e5f3f1; --stage-ink: #236964; }
[data-stage-color="green"] { --stage-bg: #e7f3ec; --stage-ink: #266441; }
[data-stage-color="lime"] { --stage-bg: #eef3dd; --stage-ink: #526322; }
[data-stage-color="yellow"] { --stage-bg: #faf3d8; --stage-ink: #75601d; }
[data-stage-color="amber"] { --stage-bg: #fbf2dd; --stage-ink: #80540a; }
[data-stage-color="orange"] { --stage-bg: #fbeddf; --stage-ink: #8a491c; }
[data-stage-color="pink"] { --stage-bg: #fae9f1; --stage-ink: #953459; }
[data-stage-color="red"] { --stage-bg: #fbeaec; --stage-ink: #9f2034; }
:root[data-theme="dark"] [data-stage-color="slate"] { --stage-bg: #242b32; --stage-ink: #b9c4d1; }
:root[data-theme="dark"] [data-stage-color="blue"] { --stage-bg: #202e3d; --stage-ink: #91b9e8; }
:root[data-theme="dark"] [data-stage-color="indigo"] { --stage-bg: #29283f; --stage-ink: #b5b0f2; }
:root[data-theme="dark"] [data-stage-color="violet"] { --stage-bg: #32253e; --stage-ink: #d2a7ed; }
:root[data-theme="dark"] [data-stage-color="teal"] { --stage-bg: #203431; --stage-ink: #8bd4c9; }
:root[data-theme="dark"] [data-stage-color="green"] { --stage-bg: #20332b; --stage-ink: #91d1ac; }
:root[data-theme="dark"] [data-stage-color="lime"] { --stage-bg: #2d3321; --stage-ink: #c1d989; }
:root[data-theme="dark"] [data-stage-color="yellow"] { --stage-bg: #37311f; --stage-ink: #e4d184; }
:root[data-theme="dark"] [data-stage-color="amber"] { --stage-bg: #352e21; --stage-ink: #e4be70; }
:root[data-theme="dark"] [data-stage-color="orange"] { --stage-bg: #392a21; --stage-ink: #efb185; }
:root[data-theme="dark"] [data-stage-color="pink"] { --stage-bg: #392532; --stage-ink: #efa7c5; }
:root[data-theme="dark"] [data-stage-color="red"] { --stage-bg: #3b242b; --stage-ink: #ff9bab; }

.kanban-column[data-stage-color] { --column-bg: var(--stage-bg); --column-ink: var(--stage-ink); }
.stage-color-picker { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.stage-color-picker > summary { display: flex; gap: 8px; align-items: center; width: fit-content; max-width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-small); font-size: 12px; overflow-wrap: anywhere; cursor: pointer; }
.stage-color-picker > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stage-color-swatch { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--stage-ink); border-radius: 6px; background: var(--stage-bg); }
.stage-color-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 6px; margin-top: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); }
.stage-color-palette button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding: 7px; font-size: 11px; color: var(--stage-ink); background: var(--stage-bg); border: 2px solid transparent; text-align: left; overflow-wrap: anywhere; }
.stage-color-palette button[aria-pressed="true"] { border-color: var(--stage-ink); }
.stage-color-mark { display: inline-grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 5px; color: var(--stage-bg); background: var(--stage-ink); }