/* Design tokens (color, typography, radii, and the dark palette) come from the
   shared css/tokens.css, linked before this file in every pm/*.html — the same
   source of truth the main site and admin console use, so all three match.
   Dark mode is still a body.dark class persisted under the shared nc27-mode key
   (see js/darkMode.js); the palette swap itself now lives in css/tokens.css. */
*{box-sizing:border-box}
body{margin:0;font-family:var(--fb);background:var(--bg);color:var(--text)}

/* Base button system — mirrors admin.css so buttons match across PM + admin.
   The more specific selectors below only override background/border/color. */
button{padding:6px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg1);color:var(--text);font-family:var(--fb);font-size:14px;cursor:pointer;transition:transform var(--spring-dur-1) var(--spring-1),background var(--d1),border-color var(--d1),box-shadow var(--d2) var(--ease-out)}
button:hover{border-color:var(--b2)}
button:active{transform:translateY(0) scale(.97)}   /* tactile spring press */
button.primary{background:var(--s);border-color:var(--s);color:var(--on-accent);font-weight:600}
button.primary:hover{border-color:var(--s);box-shadow:var(--glow-accent)}
button.danger{color:var(--red);border-color:var(--red)}
button:disabled{opacity:.45;cursor:not-allowed}

/* Header — mirrors the main site's sticky top bar (bg1 surface + bottom border)
   so PM reads as part of the same site, not a separate app. Layout is ordered
   with flexbox `order` (not DOM order): the site-menu hamburger is pinned far
   left and the notification/dark-mode/logout cluster is pinned far right, on
   every PM page regardless of which action buttons that page includes. */
/* Column gap stays hairline-tight because the tabs carry their own 12px side
   padding — spending it globally instead pushes this 9-tab nav onto a second row
   at 1280px. The buttons have no such padding, so they get their spacing
   explicitly below (see #new-assignment-btn / #bulk-add-btn and the utility
   cluster). Row gap only bites once the nav wraps. */
.pm-nav{display:flex;gap:var(--sp-6) var(--sp-2);align-items:center;flex-wrap:wrap;padding:0 var(--sp-16);min-height:54px;background:var(--bg1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:90}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pm-nav{background:var(--bg-glass);backdrop-filter:blur(var(--blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--glass-sat))}
}
/* tabs: quiet by default, a soft pill wash on hover, accent when active; the
   sliding indicator (below) is the primary active affordance. */
.pm-nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:13px;line-height:1;padding:8px 12px;border-radius:var(--r-sm);white-space:nowrap;position:relative;transition:color var(--d1),background var(--d1)}
.pm-nav a:hover{color:var(--text);background:var(--tint)}
.pm-nav a.active{color:var(--s-text);font-weight:600}
/* Sliding indicator (pm/pm.js positions it via transform+width) replaces the
   old static border-bottom on .active -- one bar per page that animates into
   place on load and slides toward whichever link is clicked. */
.pm-nav-indicator{position:absolute;left:0;top:0;height:2px;width:0;background:var(--s);border-radius:1px;opacity:0;pointer-events:none;transition:transform var(--spring-dur-1) var(--spring-1),width var(--spring-dur-1) var(--spring-1),opacity var(--d1) var(--ease-out)}
.pm-nav-indicator.is-visible{opacity:1}
/* The far-left slot now holds the site-menu hamburger (opens the full-screen
   site nav, replacing the old "← Site" back-link) — styled in css/sitenav.css. */
/* Utility cluster pinned right (notif → dark toggle → logout), set off by a
   divider, each control spaced off its neighbour. */
.pm-nav .notif-wrap{order:5;margin-left:auto;padding-left:var(--sp-12);border-left:1px solid var(--border)}
.pm-nav .mode-toggle{order:6;margin-left:var(--sp-8)}
.pm-nav #pm-logout-btn{order:7;margin-left:var(--sp-8)}
/* Header buttons: secondary by default; the primary "+ New assignment" CTA is
   solid accent, set apart from the tabs by a gap, with a spring press. */
.pm-nav button{font-family:var(--fb);font-size:13px;font-weight:500;background:var(--bg1);border:1px solid var(--b2);border-radius:var(--r);padding:7px 13px;cursor:pointer;color:var(--text);transition:transform var(--spring-dur-1) var(--spring-1),background var(--d1),border-color var(--d1),box-shadow var(--d2) var(--ease-out)}
.pm-nav button:hover{background:var(--bg2);border-color:var(--border-raised)}
.pm-nav button:active{transform:translateY(0) scale(.97)}
#new-assignment-btn{margin-left:var(--sp-16);background:var(--s);border-color:var(--s);color:var(--on-accent);font-weight:600}
#new-assignment-btn:hover{background:var(--s);border-color:var(--s);box-shadow:var(--glow-accent)}
#bulk-add-btn{margin-left:var(--sp-8)}
.pm-ico{width:1em;height:1em;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;display:inline-block;vertical-align:-.125em}
.intake-topbar{display:flex;justify-content:flex-end;padding:14px 20px}
.notif-wrap{position:relative;margin-left:auto}
.notif-bell{position:relative;background:none;border:none;cursor:pointer;font-size:18px;color:var(--text);padding:4px 8px}
.notif-badge{position:absolute;top:-2px;right:0;background:var(--s);color:var(--on-accent);font-size:10px;font-weight:700;border-radius:9px;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 4px}
.notif-dropdown{position:absolute;top:100%;right:0;margin-top:8px;width:300px;max-height:360px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--elev-3),var(--hairline);z-index:50}
.notif-item{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg2)}
.notif-unread{background:var(--s2)}
.notif-message{margin:0;font-size:13px;color:var(--text)}
.notif-time{margin:2px 0 0;font-size:11px;color:var(--dim)}
.notif-empty{padding:14px;font-size:13px;color:var(--dim);margin:0}

.board-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 20px 0}
.board-filters input[type="text"]{flex:1;min-width:160px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);color:var(--text);font-family:var(--fb)}
.board-filters input[type="text"]:focus{outline:none;border-color:var(--s);box-shadow:var(--ring)}
.board-filters select{appearance:none;-webkit-appearance:none;padding:6px 26px 6px 10px;border:1px solid var(--b2);border-radius:var(--r);background-color:var(--bg2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;color:var(--text);font-family:var(--fb);font-size:13px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.board-filters select:focus{outline:none;border-color:var(--s);box-shadow:var(--ring)}
.filter-overdue{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.filter-overdue input[type="checkbox"]{accent-color:var(--s);width:15px;height:15px;cursor:pointer}
#filter-clear{font-family:var(--fb);font-size:13px;background:var(--bg1);border:1px solid var(--b2);border-radius:var(--r);padding:6px 12px;cursor:pointer;color:var(--text);transition:background .12s,border-color .12s}
#filter-clear:hover{background:var(--bg2);border-color:var(--text)}
.board{display:flex;gap:16px;padding:20px;overflow-x:auto}
.board-col{flex:1 0 220px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:12px;transition:outline-color var(--d2) var(--ease-out),background var(--d2) var(--ease-out),box-shadow var(--d2) var(--ease-out)}
/* Active/selected column (drag target) marked with the single orange accent. */
.board-col.drag-over{outline:2px solid var(--s);outline-offset:-2px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--s3)}
.board-col h3{margin:0 0 10px;font-family:var(--fm);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.board-col h3 .col-count{color:var(--dim)}
.board-col-body{display:flex;flex-direction:column;gap:8px;min-height:40px}
.card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);padding:10px;cursor:pointer;box-shadow:var(--elev-1),var(--hairline);transition:transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out),border-color var(--d1)}
.card:hover{transform:translateY(-2px);border-color:var(--border-raised);box-shadow:var(--elev-3),var(--hairline)}
.card[draggable="true"]:active{cursor:grabbing}
/* Card actively being dragged: lifted, tilted, and shadowed. Left behind on
   the source element while the browser shows its own drag-image snapshot;
   in browsers that hide the source during drag this mostly reads through
   the moment the card lands and dragend clears it. */
.card.dragging{transform:translateY(-4px) scale(1.02) rotate(-2deg);border-color:var(--border-raised);box-shadow:var(--elev-3),var(--hairline);cursor:grabbing}
.card-title{font-weight:600;font-size:14px}
.card-meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:4px}
.card-due{font-size:11px;color:var(--dim);margin-top:4px}
.empty{color:var(--dim);font-size:13px}
.pm-loading{color:var(--muted);font-size:14px;padding:20px}
.pm-load-error{padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pm-load-error p{margin:0;color:var(--muted);font-size:14px}
.pm-retry-btn{font-family:var(--fb);background:var(--s);color:var(--on-accent);border:none;border-radius:6px;padding:6px 14px;cursor:pointer;font-size:13px;font-weight:600}
.pm-retry-btn:hover{opacity:.9}
.swimlane{border-top:1px solid var(--border)}
.swimlane:first-child{border-top:none}
.swimlane-head{display:flex;align-items:center;gap:8px;padding:14px 20px 0}
.swimlane-title{font-weight:600;font-size:14px}
.swimlane-count{font-size:11px;color:var(--muted);background:var(--bg2);border-radius:var(--rl);padding:1px 8px}
.swimlane .board{padding-top:10px}
.timeline-wrap{padding:20px;overflow-x:auto}
.tl-axis{position:relative;height:20px;margin-left:160px;border-bottom:1px solid var(--border);margin-bottom:4px}
.tl-tick{position:absolute;top:0;transform:translateX(-50%)}
.tl-tick-label{font-size:10px;color:var(--muted);white-space:nowrap}
.tl-row{display:flex;align-items:center;border-bottom:1px solid var(--border);min-height:34px}
.tl-row-label{width:160px;flex-shrink:0;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;padding-right:8px;overflow:hidden}
.tl-row-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-track{position:relative;flex:1;height:34px;min-width:320px}
/* Today marker = the single orange accent (spec §5). */
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--s);opacity:.7;z-index:2}
.tl-deadline{position:absolute;top:0;bottom:0;border-left:2px dashed var(--muted)}
/* Bars/dots neutral by default; overdue = red, done = solid neutral (§5). */
.tl-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--muted);border:2px solid var(--bg);cursor:pointer;padding:0}
.tl-dot-overdue{background:var(--red)}
.tl-dot-done{background:var(--text)}
.tl-bar{position:absolute;top:50%;transform:translateY(-50%);height:14px;border-radius:7px;background:var(--muted);border:none;cursor:pointer;padding:0;min-width:3px}
.tl-bar-overdue{background:var(--red)}
.tl-bar-done{background:var(--text)}
.tl-blocked{outline:2px solid var(--red);outline-offset:1px}
.tl-grid{position:relative}
svg.tl-arrows{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.tl-arrow{fill:none;stroke:var(--muted);stroke-width:1.5;opacity:.65}
.tl-arrowhead{fill:var(--muted)}
/* Blocked = danger red (§5). */
.badge-blocked{display:inline-flex;align-items:center;gap:4px;background:var(--red2);color:var(--red);border:1px solid var(--red);font-family:var(--fm);font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:1px 7px;margin-top:6px}
.badge-blocked::before{content:"\2298";font-size:11px}   /* ⊘ */
.badge-overdue::before{content:"\25B2";font-size:9px}     /* ▲ */
.dependencies-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.dependencies-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dep-body{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.dep-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.dep-done{color:var(--muted)}
.dep-open{color:var(--red)}
.dep-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 4px}
.dep-add-select{display:block;margin-top:4px}
.start-date-control{font-size:13px;color:var(--muted);margin-top:6px}
.start-date-control input{margin-left:6px;padding:5px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--fb)}

.cal-header{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 20px 20px}
.cal-cell{min-height:90px;border:1px solid var(--border);border-radius:var(--r);padding:6px;font-size:12px}
.cal-cell.empty{border:none}
.cal-day-num{font-weight:600;color:var(--muted);margin-bottom:4px;font-variant-numeric:tabular-nums}
/* Calendar chips: neutral surface, type read from an icon+label (no hue, §5). */
.chip{display:block;border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-size:11px;margin-top:3px;cursor:pointer;color:var(--text);background:var(--bg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color var(--d1),transform var(--d1) var(--ease-out)}
.chip:hover{border-color:var(--b2);transform:translateY(-1px)}
.chip-ico{font-family:var(--fm);color:var(--muted);margin-right:5px}
/* Overdue = red (§5). */
.chip-overdue{border-color:var(--red);color:var(--red)}
.chip-overdue .chip-ico{color:var(--red)}
.badge-overdue{display:inline-flex;align-items:center;gap:4px;background:var(--red2);color:var(--red);border:1px solid var(--red);font-family:var(--fm);font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:1px 7px;margin-left:4px}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100;animation:pm-overlay-in var(--d2) var(--ease-out)}
.modal{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:24px;max-width:480px;width:90%;position:relative;max-height:80vh;overflow-y:auto;box-shadow:var(--elev-4),var(--hairline);animation:pm-modal-in var(--spring-dur-2) var(--spring-2)}
/* Modal entrance: backdrop fade + panel scale-in (CSS-only, fires on insert). */
@keyframes pm-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes pm-modal-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}
.modal-type,.modal-requester{color:var(--muted);font-size:13px}
/* Modal chrome links (requester tracking / reference / attachment) use the
   accent, not the UA default blue/purple, so they read as part of the B&W +
   orange system. --s-text is the AA-safe orange text token. Markdown-body
   links keep their own --s rule (defined later in source, so it wins there). */
.modal a{color:var(--s-text);text-decoration:underline;text-underline-offset:2px}
.modal a:hover{color:var(--s)}
/* Native <select> inside the modal (Effort, assign-to, and the add-selects for
   dependencies/labels/projects/collaborators) gets the same custom chevron +
   surface as the board filters, instead of the raw OS control. */
.modal select{appearance:none;-webkit-appearance:none;padding:5px 26px 5px 10px;border:1px solid var(--b2);border-radius:var(--r);background-color:var(--bg2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;color:var(--text);font-family:var(--fb);font-size:13px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.modal select:focus{outline:none;border-color:var(--s);box-shadow:0 0 0 3px var(--s2)}
.assignment-files{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.file-type-section{margin-bottom:14px}
.file-type-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.file-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.file-row{font-size:13px}
.file-meta{color:var(--dim);font-size:11px}
.file-type-section .empty{color:var(--dim);font-size:12px;margin:0}
.upload-blocked{color:var(--dim);font-size:12px}
.upload-status{font-size:12px;color:var(--muted);min-height:16px}
.department-pick{display:block;margin-bottom:6px}
.collaborators-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.collaborators-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.collab-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.collab-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.collab-remove{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline}
.collab-add-select{display:block;margin-top:4px}
.subtasks-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.subtasks-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.subtask-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.subtask-row{display:flex;align-items:center;gap:8px;font-size:13px}
.subtask-add-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.subtask-add-form input[type="text"]{flex:1;min-width:120px;padding:6px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--fb)}
.comments-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.comments-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.comment-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.comment-row{font-size:13px;border-bottom:1px solid var(--border);padding-bottom:6px}
.comment-meta{margin:0 0 2px;color:var(--muted);font-size:11px}
.comment-edited{color:var(--dim);font-style:italic}
.comment-body{margin:0;white-space:pre-wrap}
.comment-edit,.comment-delete{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline;margin-top:2px;margin-right:8px;padding:0}
.comment-add-form{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.comment-add-form textarea{min-height:50px;padding:6px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--fb);resize:vertical}
.comment-add-form button{align-self:flex-start}
.subtask-comment-toggle{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline;padding:0;margin-left:4px}
.subtask-comment-thread{margin:2px 0 6px 24px;padding-left:8px;border-left:2px solid var(--border)}
.subtask-comment-thread .comment-row{font-size:12px}
.labels-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.labels-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.label-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.label-pill{display:inline-flex;align-items:center;gap:4px;color:#fff;font-size:11px;font-weight:600;border-radius:var(--rl);padding:2px 8px}
.label-pill button{background:none;border:none;color:#fff;cursor:pointer;font-size:12px;padding:0;line-height:1}
.label-add-select{display:block;margin-top:4px}
.card-labels{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.workload{padding:20px;display:flex;flex-direction:column;gap:24px;max-width:800px;margin:0 auto}
.workload-needs-section h3,.workload-people-section h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.workload-needs-list{display:flex;flex-direction:column;gap:8px}
.workload-people-list{display:flex;flex-direction:column;gap:8px}
.workload-person{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px;box-shadow:var(--elev-1),var(--hairline);transition:box-shadow var(--d2) var(--ease-out),border-color var(--d1)}
.workload-person:hover{border-color:var(--border-raised);box-shadow:var(--elev-2),var(--hairline)}
.workload-person-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.workload-person-name{font-weight:600;font-size:14px}
.workload-person-count{font-size:12px;color:var(--muted)}
.workload-person-cards{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.label-pill-small{font-size:10px;padding:1px 6px}
/* Send-back is a neutral secondary action; orange is reserved for primaries. */
.revise-btn{background:var(--bg1);border:1px solid var(--b2);color:var(--text);font-weight:600;margin-left:8px}
.revise-btn:hover{border-color:var(--text);background:var(--bg2)}
.delete-assignment-btn{background:none;border-color:var(--red);color:var(--red);font-weight:600;margin-left:8px}
.delete-assignment-btn:hover{background:var(--red);color:#fff}

/* Projects */
.projects-wrap{padding:20px;max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.projects-header{display:flex;justify-content:space-between;align-items:center}
.projects-header h2{margin:0;font-size:18px}
.projects-header button{background:var(--s);border-color:var(--s);color:var(--on-accent);font-weight:600}
.projects-list{display:flex;flex-direction:column;gap:12px}
.project-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--elev-1),var(--hairline);transition:transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out),border-color var(--d1)}
.project-card:hover{transform:translateY(-2px);border-color:var(--border-raised);box-shadow:var(--elev-3),var(--hairline)}
.project-child{border-left:3px solid var(--s2)}
.project-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.project-card-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;cursor:pointer}
.project-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.project-meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.project-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.project-edit{background:none;border:1px solid var(--border);border-radius:var(--r);padding:4px 10px;cursor:pointer;color:var(--text);font-family:var(--fb);font-size:12px}
/* Status pills: neutral, distinguished by fill/outline + label, not hue (§5). */
.status-pill{font-family:var(--fm);font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:2px 9px;border:1px solid var(--b2);color:var(--muted);background:transparent}
.status-active{border-color:var(--b3);color:var(--text)}
.status-on_hold{background:var(--bg2);color:var(--muted);border-color:transparent}
.status-done{background:var(--text);color:var(--bg);border-color:var(--text)}
.status-archived{color:var(--dim);border-color:var(--border)}
.project-progress{margin-top:10px}
/* Progress = neutral track + orange fill (§5, decision #5). */
.project-progress-bar{height:8px;border-radius:999px;background:var(--bg3);overflow:hidden}
.project-progress-fill{height:100%;background:var(--s);border-radius:999px;transition:width 1.1s var(--ease-in-out)}
.project-progress-label{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between}
/* At risk = danger red (§5, brief goal 3). */
.project-atrisk{color:var(--red);font-weight:700}
.project-body{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.project-item-row{display:flex;align-items:center;gap:8px}
.project-item-row .card{flex:1}
.project-item-remove{background:none;border:1px solid var(--border);border-radius:var(--r);padding:4px 10px;cursor:pointer;color:var(--muted);font-family:var(--fb);font-size:12px;flex-shrink:0}
.project-add-item{display:block;margin-top:4px;padding:8px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--fb)}
.projects-header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Per-task recurrence editor in the task detail modal ("Repeats: every N days"). */
.task-recurrence{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.task-recurrence input{padding:5px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--fb)}
.task-recurrence .tr-interval{width:70px}
.task-recurrence .tr-save{background:var(--s);border-color:var(--s);color:var(--on-accent);font-weight:600}
.project-chip{display:inline-flex;align-items:center;font-size:10px;font-weight:600;color:#fff;border-radius:var(--rl);padding:1px 7px;margin-top:6px}
.modal-project{color:var(--muted);font-size:13px;margin:4px 0}
.project-empty{color:var(--dim);font-size:13px}
.projects-unfiled{background:var(--bg2);border:1px dashed var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px}
.projects-unfiled h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.project-form label{display:block;margin-bottom:12px;font-size:13px;color:var(--muted)}
.project-form input,.project-form select,.project-form textarea{width:100%;margin-top:4px;padding:8px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--fb);font-size:14px}
.project-form textarea{min-height:60px;resize:vertical}
.project-form input[type="color"]{height:38px;padding:2px}
.project-form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.project-form-actions button{background:var(--s);border-color:var(--s);color:var(--on-accent);font-weight:600}
.projects-membership-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.projects-membership-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.project-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.project-add-select{display:block;margin-top:4px}

/* Portfolio "status at a glance" strip */
.portfolio{display:flex;flex-direction:column;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--elev-1),var(--hairline)}
.portfolio-tiles{display:flex;flex-wrap:wrap;gap:10px}
.portfolio-tiles .stat{flex:1 0 90px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;text-align:center;box-shadow:var(--elev-1),var(--hairline);transition:transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out),border-color var(--d1)}
.portfolio-tiles .stat:hover{transform:translateY(-2px);border-color:var(--border-raised);box-shadow:var(--elev-2),var(--hairline)}
.portfolio-tiles .stat-num{font-size:22px;font-weight:700;font-family:var(--fm);font-variant-numeric:tabular-nums}
.portfolio-tiles .stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.portfolio-tiles .stat-alert .stat-num{color:var(--red)}
.portfolio-breakdown,.portfolio-people{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:var(--muted)}
.portfolio-people-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.brk{white-space:nowrap}
.brk-num{font-family:var(--fm);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

/* Public intake: full-viewport centered card, mirroring the main site's
   .login-form/.login-title pattern (styles.css) so the request form reads as
   part of the same product instead of a bare HTML form. */
body.intake-page{min-height:100vh;display:flex;flex-direction:column}
.intake-center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 20px 48px}
.intake-wrap{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:36px 32px;max-width:480px;width:100%;box-shadow:var(--elev-4),var(--hairline)}
.intake-eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.intake-wrap h1{font-family:var(--fd);font-weight:600;font-size:clamp(24px,4vw,30px);line-height:1.15;letter-spacing:-.01em;color:var(--s-text);margin:0 0 8px}
.intake-sub{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 26px}
/* Section dividers group the form the way custom-fields-section /
   checklist-section already do elsewhere in the PM tool (uppercase mono
   label + a hairline above), so the grouping reads as one visual language. */
.intake-section-label{font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
.intake-section-label:first-of-type{margin-top:0;padding-top:0;border-top:none}
.intake-row{display:flex;gap:14px}
.intake-row label{flex:1;min-width:0}
.intake-hint{font-size:12px;color:var(--dim);margin:-8px 0 14px}
.intake-wrap label,.na-form label{display:block;margin-bottom:14px;font-size:13px;color:var(--muted)}
.intake-wrap input,.intake-wrap select,.intake-wrap textarea,
.na-form input,.na-form select,.na-form textarea{
  width:100%;margin-top:5px;padding:9px 11px;border:1px solid var(--b2);border-radius:var(--r);
  background:var(--bg);color:var(--text);font-family:var(--fb);font-size:14px;
  transition:border-color var(--d1),box-shadow var(--d1)
}
.intake-wrap input:focus,.intake-wrap select:focus,.intake-wrap textarea:focus,
.na-form input:focus,.na-form select:focus,.na-form textarea:focus{
  outline:none;border-color:var(--s);box-shadow:var(--ring)
}
.intake-wrap select,.na-form select{appearance:none;-webkit-appearance:none;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.intake-wrap textarea,.na-form textarea{min-height:80px;resize:vertical}
.intake-wrap input[type="file"],.na-form input[type="file"]{border:none;padding:4px 0;background:none}
.intake-wrap button[type="submit"],.na-form button[type="submit"]{width:100%;padding:11px;font-size:14.5px;margin-top:4px;
  transition:box-shadow var(--d2) var(--ease-out),transform var(--d1)}
.intake-wrap button[type="submit"]:hover,.na-form button[type="submit"]:hover{box-shadow:var(--glow-accent);transform:translateY(-1px)}
.intake-wrap button[type="submit"]:disabled,.na-form button[type="submit"]:disabled{transform:none;box-shadow:none}
#intake-status{font-size:13px;color:var(--muted);margin:12px 0 0}
.intake-status--success{color:var(--text);background:var(--bg2);border-left:3px solid var(--s);padding:10px 12px;border-radius:6px}
.intake-status--error{color:var(--red);background:var(--red2);border-left:3px solid var(--red);padding:10px 12px;border-radius:6px}
button[type="submit"]{background:var(--s);border-color:var(--s);color:var(--on-accent);font-weight:600}
/* New-assignment modal: reuses the intake form's refined inputs (merged
   selectors above) plus its editorial header + spacing, so the popup reads as
   the same product rather than a bare dialog. */
.na-modal{padding:28px 26px 22px}
.na-title{font-family:var(--fd);font-weight:600;font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--s-text);margin:0 0 6px}
.status-wrap{background:var(--bg2);border-radius:var(--rl);padding:28px;max-width:440px;width:90%;margin:40px auto}
.status-wrap h1{margin:0 0 16px;font-size:20px}
.status-title{margin:0 0 4px;font-size:16px}
.status-meta{margin:0 0 16px;color:var(--muted);font-size:13px}
/* Public stepper (spec §5, brief goal 6): done = solid neutral + check,
   current = orange, upcoming = outline. Dots joined by a connector track. */
.status-steps{list-style:none;padding:0;margin:0 0 20px;display:flex}
.status-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;position:relative;min-width:52px;font-size:11px;color:var(--muted)}
.status-step::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--border);z-index:0}
.status-step:first-child::before{display:none}
.status-step-dot{width:28px;height:28px;border-radius:999px;border:1.5px solid var(--b2);display:grid;place-items:center;font-family:var(--fm);font-size:12px;color:var(--muted);background:var(--bg2);position:relative;z-index:1}
.status-step-lbl{font-family:var(--fm);letter-spacing:.04em}
.status-step-done::before,.status-step-current::before{background:var(--text)}
.status-step-done .status-step-dot{background:var(--text);color:var(--bg);border-color:var(--text)}
.status-step-current .status-step-dot{background:var(--s);color:var(--on-accent);border-color:var(--s);animation:pm-pulse 2.4s var(--ease-in-out) infinite}
.status-step-current .status-step-lbl{color:var(--s-text)}
@keyframes pm-pulse{0%,100%{box-shadow:0 0 0 0 var(--s3)}55%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion: reduce){
  .status-step-current .status-step-dot{animation:none}
  .pm-nav-indicator{transition:none}
  /* Guard the material/motion added in this pass: no spring press, no hover
     lift, no modal scale/fade. Shadow + border changes still apply. */
  button{transition:none}
  button:active{transform:none}
  .card,.project-card,.review-card,.stat-tile,.portfolio-tiles .stat,.workload-person{transition:none}
  .card:hover,.card.dragging,.project-card:hover,.review-card:hover,.stat-tile:hover,.portfolio-tiles .stat:hover{transform:none}
  .modal-overlay,.modal{animation:none}
}
.status-sub{font-size:14px;margin:0 0 8px}
.status-dates{font-size:12px;color:var(--dim);margin:0}
.status-loading,.status-error{color:var(--muted);font-size:14px}
.tracking-link{margin-top:10px;font-size:13px;word-break:break-all}
.analytics-controls{padding:14px 20px 0;max-width:800px;margin:0 auto}
.analytics-controls select{margin-left:6px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--fb)}
.analytics{padding:20px;max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.stat-tiles{display:flex;flex-wrap:wrap;gap:12px}
.stat-tile{flex:1;min-width:110px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--elev-1),var(--hairline);transition:transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out),border-color var(--d1)}
.stat-tile:hover{transform:translateY(-2px);border-color:var(--border-raised);box-shadow:var(--elev-2),var(--hairline)}
/* KPI tiles neutral; only the headline number is orange, alerts are red (§5). */
.stat-value{font-family:var(--fm);font-size:26px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.stat-tile.stat-headline .stat-value{color:var(--s-text)}
.stat-tile.stat-alert .stat-value{color:var(--red)}
.stat-label{font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.analytics-section h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:13px}
.bar-label{flex:0 0 220px;color:var(--text)}
.bar-track{flex:1;background:var(--bg3);border-radius:999px;height:14px;overflow:hidden}
/* Monochrome bars; a single accent series (.bars--accent) carries the orange. */
.bar-fill{display:block;height:100%;background:var(--muted);border-radius:999px;transition:width var(--d3) var(--ease-in-out)}
.bars--accent .bar-fill{background:var(--s)}
.bar-num{flex:0 0 auto;color:var(--muted);min-width:20px;text-align:right;font-variant-numeric:tabular-nums}
.na-status{font-size:13px;color:var(--muted);margin:8px 0 0}

/* --- List / Table view -------------------------------------------------- */
.list-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:10px 20px 0}
.list-controls label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.list-controls select{padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:var(--fb)}
.list-count{font-size:12px;color:var(--dim);margin-left:auto}
.list-wrap{padding:14px 20px 48px;overflow-x:auto}
.list-group-head{display:flex;align-items:center;gap:8px;margin:22px 0 6px;font-weight:700;font-size:14px}
.list-group-head .swimlane-count{font-weight:400}
.list-group-head .project-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.pm-table{width:100%;border-collapse:collapse;font-size:13px;min-width:880px}
.pm-table th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.pm-table th.sortable{cursor:pointer;user-select:none}
.pm-table th.sortable:hover{color:var(--text)}
.pm-table th .sort-ind{color:var(--s);margin-left:3px}
.pm-table td{padding:5px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.pm-table tbody tr:hover td{background:var(--bg2)}
.cell-title-wrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cell-title{font-weight:600;color:var(--text);cursor:pointer;background:none;border:none;font-family:var(--fb);font-size:13px;text-align:left;padding:0}
.cell-title:hover{color:var(--s);text-decoration:underline}
.cell-labels{display:flex;flex-wrap:wrap;gap:4px}
.cell-projects{display:flex;flex-wrap:wrap;gap:4px}
.cell-projects .project-chip{margin-top:0}
.cell-static{color:var(--muted)}
.inline-edit{border:1px solid transparent;border-radius:5px;background:none;color:var(--text);font-family:var(--fb);font-size:13px;padding:3px 5px;max-width:160px;cursor:pointer}
.inline-edit:hover{border-color:var(--border);background:var(--bg)}
.inline-edit:focus{border-color:var(--s);outline:none;background:var(--bg)}
.inline-edit:disabled{cursor:default;color:var(--muted);opacity:1}
td.cell-status .inline-edit{font-weight:600}
.cell-due .badge-overdue{margin-left:6px}
.list-empty{padding:28px 20px;color:var(--dim);font-size:14px}
.cell-custom{color:var(--muted);font-size:12px;white-space:nowrap}
.custom-fields-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.custom-fields-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cf-row{display:flex;align-items:center;gap:10px;padding:3px 0}
.cf-label{flex:0 0 130px;font-size:13px;color:var(--muted)}
.cf-value{font-size:13px}
.cf-input{padding:5px 7px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:var(--fb);font-size:13px}

/* --- Rich task detail: markdown, checklist, activity, mentions --------- */
.markdown-body{font-size:14px;line-height:1.5}
.markdown-body p{margin:0 0 8px}
.markdown-body p:last-child{margin-bottom:0}
.markdown-body h4,.markdown-body h5,.markdown-body h6{margin:10px 0 4px}
.markdown-body ul,.markdown-body ol{margin:0 0 8px;padding-left:20px}
.markdown-body code{background:var(--bg2);border-radius:4px;padding:1px 5px;font-family:var(--fm);font-size:12px}
.markdown-body a{color:var(--s)}

.checklist-section,.activity-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.checklist-section h4,.activity-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.checklist-progress{color:var(--dim);font-weight:400;margin-left:4px}
.checklist-row{display:flex;align-items:center;gap:8px;padding:2px 0}
.checklist-text{font-size:14px}
.checklist-done{text-decoration:line-through;color:var(--dim)}
.checklist-remove{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.checklist-add-form{display:flex;gap:6px;margin-top:8px}
.checklist-add-form input{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:var(--fb)}

.activity-row{font-size:12px;padding:3px 0;display:flex;justify-content:space-between;gap:10px}
.activity-detail{color:var(--text)}
.activity-time{color:var(--dim);white-space:nowrap}

.mention{color:var(--s);font-weight:600}
.mention-wrap{position:relative;display:flex}
.mention-wrap textarea{flex:1;width:100%}
.mention-menu{position:absolute;left:0;top:100%;z-index:20;background:var(--bg);border:1px solid var(--border);border-radius:6px;box-shadow:var(--elev-3),var(--hairline);min-width:180px;max-height:180px;overflow:auto}
.mention-opt{display:block;width:100%;text-align:left;background:none;border:none;padding:6px 10px;cursor:pointer;color:var(--text);font-family:var(--fb);font-size:13px}
.mention-opt:hover,.mention-opt.active{background:var(--bg2)}

/* --- My Work home ------------------------------------------------------ */
.mw-wrap{padding:14px 20px 48px;max-width:900px}
.mw-heading{margin:6px 0 2px}
.mw-hint{color:var(--dim);font-size:12px;margin:0 0 14px}
.mw-hint kbd{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:0 5px;font-family:var(--fm);font-size:11px}
.mw-empty{color:var(--dim);font-size:15px;padding:24px 0}
.mw-section{margin-bottom:22px}
.mw-section-head{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.mw-count{background:var(--bg2);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:400}
.mw-overdue .mw-section-head{color:var(--s)}
.mw-row{display:flex;align-items:center;gap:12px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);margin-bottom:6px}
.mw-title{flex:1;text-align:left;background:none;border:none;color:var(--text);font-family:var(--fb);font-size:14px;font-weight:600;cursor:pointer;padding:0}
.mw-title:hover{color:var(--s)}
.mw-status{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.mw-due{font-size:12px;color:var(--dim);white-space:nowrap}

/* --- Command palette (Cmd-K) ------------------------------------------- */
.cmdk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.cmdk-overlay[hidden]{display:none}
.cmdk{width:min(560px,92vw);background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:var(--elev-4),var(--hairline);overflow:hidden}
.cmdk-input{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid var(--border);padding:14px 16px;font-size:15px;background:var(--bg);color:var(--text);font-family:var(--fb)}
.cmdk-input:focus{outline:none}
.cmdk-results{max-height:50vh;overflow:auto}
.cmdk-empty{color:var(--dim);font-size:13px;padding:16px}
.cmdk-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:9px 16px;cursor:pointer;font-family:var(--fb);color:var(--text)}
.cmdk-row:hover,.cmdk-row.active{background:var(--bg2)}
.cmdk-type{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--muted);border-radius:3px;padding:1px 5px;flex-shrink:0}
.cmdk-label{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-sub{font-size:11px;color:var(--dim);white-space:nowrap}

/* Brand review — Review Queue, verdict rendering + per-card AI panel (Stream R2) */
.review-app{padding:20px;max-width:900px;margin:0 auto}
.review-placeholder{color:var(--muted)}
.review-header h1{margin:0 0 4px;font-size:20px}
.review-sub{margin:0 0 16px;color:var(--muted);font-size:13px}
.review-list{display:flex;flex-direction:column;gap:16px}
.review-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:var(--elev-1),var(--hairline);transition:transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out),border-color var(--d1)}
.review-card:hover{transform:translateY(-2px);border-color:var(--border-raised);box-shadow:var(--elev-3),var(--hairline)}
.review-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.review-card-title{font-weight:600;font-size:15px}
.review-card-meta{font-size:12px;color:var(--muted);margin-top:4px}
.review-card-badge{flex-shrink:0}
.review-card-files{margin-top:12px}
.review-card-files h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.review-card-verdict{margin-top:10px}
.review-card-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Approve → Done is the primary positive action: orange fill (§5). */
.review-approve-btn{background:var(--s);color:var(--on-accent);border:1px solid var(--s);border-radius:var(--r);padding:8px 14px;font-weight:600;cursor:pointer;font-family:var(--fb);transition:box-shadow var(--d2) var(--ease-out),transform var(--d1)}
.review-approve-btn:hover{box-shadow:var(--glow-accent);transform:translateY(-1px)}
.review-approve-btn:disabled{opacity:.6;cursor:default;box-shadow:none;transform:none}
.review-details-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:8px 14px;cursor:pointer;color:var(--text);font-family:var(--fb)}
.review-badge-empty{opacity:.75}

/* Verdict rendering — shared by the Queue and the modal panel */
.verdict-none{color:var(--dim);font-size:13px;margin:0}
.verdict-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Verdict badge = nc-badge shape; status by fill, danger red for fail/critical (§5). */
.verdict-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px;font-weight:400;letter-spacing:.04em;border-radius:999px;padding:3px 10px;border:1px solid var(--b2);color:var(--muted)}
.verdict-badge.sev-none{background:var(--text);color:var(--bg);border-color:var(--text)}
.verdict-badge.sev-info{background:var(--bg2);color:var(--text);border-color:transparent}
.verdict-badge.sev-warning{background:var(--s);color:var(--on-accent);border-color:var(--s)}
.verdict-badge.sev-critical{background:var(--red);color:var(--on-accent);border-color:var(--red)}
.verdict-badge.verdict-error{background:var(--bg2);color:var(--muted);border-color:transparent}
.verdict-meta{font-size:11px;color:var(--muted)}
.verdict-summary{font-size:13px;margin:8px 0;color:var(--text)}
.verdict-findings{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.verdict-finding{font-size:12px;padding:6px 8px;border-radius:6px;background:var(--bg);border:1px solid var(--border)}
.verdict-finding .vf-icon{font-weight:700;margin-right:6px}
.verdict-finding .vf-rule{color:var(--text)}
.vf-pass .vf-icon{color:var(--text)}
.vf-fail .vf-icon{color:var(--red)}
.vf-na .vf-icon{color:var(--muted)}
.vf-explanation{margin:4px 0 0;color:var(--muted)}

/* AI review panel inside the assignment modal */
.ai-review-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.ai-review-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ai-review-sub{font-size:12px;color:var(--dim);margin:0 0 8px}
.ai-review-controls{margin-top:10px}
.ai-review-run{background:var(--s);color:var(--on-accent);border:1px solid var(--s);border-radius:var(--r);padding:8px 14px;font-weight:600;cursor:pointer;font-family:var(--fb);transition:box-shadow var(--d2) var(--ease-out)}
.ai-review-run:hover{box-shadow:var(--glow-accent)}
.ai-review-run:disabled{opacity:.6;cursor:default}
.ai-review-status{font-size:12px;color:var(--muted);min-height:16px;margin:8px 0 0}
.ai-review-file{margin-bottom:10px}
.ai-review-filename{font-size:12px;font-weight:600;margin:0 0 4px}
.ai-review-error{color:var(--red);font-size:12px;margin:4px 0 0}

/* Consolidated field focus — route the PM form fields, selects and textareas
   through the shared --ring (they previously fell back to the site :focus-visible
   outline). Dense inline-edit + cmdk keep their own lighter focus treatments. */
.project-form input:focus,.project-form select:focus,.project-form textarea:focus,
.na-form input:focus,.na-form select:focus,.na-form textarea:focus,
.task-recurrence input:focus,
.subtask-add-form input:focus,.checklist-add-form input:focus,
.comment-add-form textarea:focus,.mention-wrap textarea:focus,
.cf-input:focus,.start-date-control input:focus,.project-add-item:focus,
.list-controls select:focus,.analytics-controls select:focus,
.dep-add-select:focus,.collab-add-select:focus,.label-add-select:focus,
.project-add-select:focus,.department-pick:focus{
  outline:none;border-color:var(--s);box-shadow:var(--ring)
}

/* ── Responsive ───────────────────────────────────────────────────────────
   Breakpoints follow the main site's convention (640px phone, 900px tablet);
   the pm-nav/board/calendar/timeline rules below only need the 640px one.
   Desktop-only layout above this point is intentionally untouched. */

/* iOS momentum scrolling for the existing horizontal-scroll containers
   (harmless no-op everywhere else). */
.board,.timeline-wrap,.list-wrap{-webkit-overflow-scrolling:touch}
/* Kanban columns snap to their start edge once .board gets scroll-snap-type
   below; no effect on desktop, where columns don't overflow. */
.board-col{scroll-snap-align:start}

@media (max-width:640px){
  /* Shared pm-nav (all pm/*.html pages): already flex-wrap, just tightened
     so more links fit per wrapped row and the sticky header eats less of a
     phone screen. The order-based left/right pinning of the back-link and
     notif/dark-mode/logout cluster (see base rules above) still applies to
     whichever wrapped row they land on. */
  .pm-nav{padding:8px 14px;gap:8px 10px}
  .pm-nav a{font-size:12px}
  .pm-nav button{font-size:12px;padding:5px 10px}
  .notif-dropdown{width:min(300px,88vw)}

  /* Board: columns go near-full-width so phone is a one-column-at-a-time
     swipeable kanban (with a peek of the next column) instead of three
     squeezed slivers; scroll-snap makes the swipe settle on a column. */
  .board{padding:12px;gap:10px;scroll-snap-type:x mandatory}
  .board-col{flex:0 0 82vw;max-width:320px}
  .board-filters{padding:10px 14px 0}
  .swimlane-head{padding:12px 14px 0}

  /* Calendar: a 7-column grid is ~50px per day on a phone (unusable), so
     below 640px it becomes a single-column agenda list instead — one
     full-width row per day, with chips stacked underneath. The leading
     "empty" filler cells (which exist only to align day 1 under its
     weekday column) are hidden rather than shown as blank rows, since the
     single-column view has no weekday header for them to align to. */
  .calendar-grid{grid-template-columns:1fr;gap:8px;padding:0 14px 20px}
  .calendar-grid .cal-cell.empty{display:none}
  .cal-cell{min-height:0;padding:10px 12px}
  .cal-header{padding:12px 14px}

  /* Timeline: keeps its existing horizontal-scroll gantt; shrink the
     row-label column and per-row track minimum so less needs to scroll
     off-screen on a narrow phone. */
  .timeline-wrap{padding:14px}
  .tl-axis{margin-left:110px}
  .tl-row-label{width:110px;font-size:11px}
  .tl-track{min-width:220px}

  /* List: table keeps its horizontal-scroll wrapper (already min-width:880
     with overflow-x:auto); just tighten the outer gutters. */
  .list-wrap{padding:12px 14px 40px}
  .list-controls{padding:10px 14px 0}

  /* Workload / analytics / projects / review / my-work are already
     single-column flex layouts; just tighten the 20px desktop gutters. */
  .workload,.analytics,.projects-wrap,.review-app{padding:14px}
  .analytics-controls{padding:10px 14px 0}
  .mw-wrap{padding:12px 14px 40px}
  .workload-person-header{flex-wrap:wrap;gap:6px}
  .mw-row{flex-wrap:wrap;row-gap:4px}

  /* Analytics bar rows: a fixed 220px label column would eat most of a
     phone's width, leaving almost nothing for the bar. Stack the label
     above the bar instead of beside it. */
  .bar-row{flex-wrap:wrap;row-gap:4px}
  .bar-label{flex:0 0 100%}
  .bar-track{flex:1 1 auto;min-width:0}

  /* Modal (task detail, new assignment, project form, etc.)
     and its custom-field rows: less padding, and stack the field label
     above its value instead of a fixed 130px side column. */
  .modal{padding:16px}
  .cf-row{flex-wrap:wrap}
  .cf-label{flex:0 0 100%}

  /* Intake / status (public-facing, no pm-nav): reclaim some of the fixed
     desktop padding/margin for a narrow phone viewport. Intake sits inside
     the flex-centered .intake-center now, so it only needs its own padding
     trimmed; status.html keeps its standalone margin:auto centering. */
  .intake-center{padding:14px}
  .intake-wrap{padding:22px 18px}
  .intake-row{flex-direction:column;gap:0}
  .status-wrap{padding:20px;margin:20px auto;width:92%}
}

/* ══════════ Cross-document view transitions (Phase 2) ══════════
   Smooth cross-fade across the PM multi-page nav (board ↔ list ↔ timeline ↔ …).
   Progressive: browsers without support just navigate. Only fires between pages
   that opt in (all PM pages link this file) — never on the way out to the Guide/
   Admin. The persistent top-nav is named so it stays anchored through the fade. */
@view-transition { navigation: auto; }
.pm-nav { view-transition-name: pm-nav; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration: var(--d2); animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}