/* Workspace (hidden /work ticket tracker). Reuses style.css tokens + components
   (.btn, .card, .field, .input, .flash, .avatar, .usermenu*); this adds the
   ticket-specific UI: top nav, list, board, timeline, chips, members panel. */

.work-appbar{position:sticky;top:0;z-index:30}
.work-bell{position:relative}
.work-badge{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:#e5484d;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}

.work-nav{position:sticky;top:60px;z-index:25;display:flex;gap:2px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border-bottom:1px solid var(--outline-faint);padding:6px 10px}
.wn-item{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;color:var(--muted);
  font-weight:600;font-size:14px;white-space:nowrap}
.wn-item .material-icons-round{font-size:20px}
.wn-item:hover{background:var(--surface2)}
.wn-item.active{color:var(--primary);background:var(--primary-container)}
.wn-badge{background:#e5484d;color:#fff;font-size:11px;font-weight:700;border-radius:9px;padding:0 6px;line-height:18px}

.work-main{max-width:1040px;margin:0 auto;padding:18px 16px 90px}

/* never let a work page scroll sideways; `clip` (not hidden/auto) keeps the sticky header + nav working */
body.work-body{overflow-x:clip}
/* (v47.1) the nav / tabs / summary strips WRAP instead of scrolling sideways —
   the workspace has no horizontal scrolling anywhere, on any screen */

.work-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px}
.work-title{font-size:24px;font-weight:800;margin:0}

/* ---- auth (login / accept / onboard) ---- */
.work-auth{background:var(--bg)}
.work-auth-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.work-auth-card{width:100%;max-width:384px;background:var(--surface);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.wa-brand{display:flex;align-items:center;gap:9px;justify-content:center;margin-bottom:6px}
.wa-brand .material-icons-round{color:var(--primary);font-size:34px}
.wa-brand h1{font-size:29px;line-height:1;margin:0;font-weight:800;letter-spacing:-.02em}
/* theme-adaptive brand mark: navy on light, soft-white on dark (no jarring white tile) */
.wa-logo{width:40px;height:40px;flex:0 0 auto;background:center/contain no-repeat url(/assets/img/logo-mark.png?v=3)}
body[data-theme="dark"] .wa-logo{background-image:url(/assets/img/logo-mark-dark.png?v=1)}
@media (prefers-color-scheme:dark){body:not([data-theme="light"]) .wa-logo{background-image:url(/assets/img/logo-mark-dark.png?v=1)}}
.wa-tag{text-align:center;color:var(--muted);margin:0 0 18px;font-size:14px}
.wa-alt{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
.wa-signout{margin:8px 0 0}   /* escape hatch on onboarding — never trap a magic-link session */

/* ---- chips ---- */
.t-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;line-height:1.45;white-space:nowrap}
.t-chip .material-icons-round{font-size:14px}
.t-status--open{background:rgba(120,134,144,.16);color:#6b7780}
.t-status--in_progress{background:rgba(10,126,164,.16);color:#0a7ea4}
.t-status--blocked{background:rgba(229,72,77,.16);color:#d83b40}
.t-status--in_review{background:rgba(139,92,246,.16);color:#7c4ddb}
.t-status--done{background:rgba(43,191,106,.18);color:#1f9d57}
.t-status--cancelled{background:rgba(120,134,144,.14);color:#8a939b}
.t-prio--urgent{background:rgba(229,72,77,.16);color:#d83b40}
.t-prio--high{background:rgba(245,165,36,.20);color:#bf7400}
.t-prio--medium{background:rgba(10,126,164,.14);color:#0a7ea4}
.t-prio--low{background:rgba(120,134,144,.16);color:#7b858d}
.t-due{background:var(--surface3);color:var(--muted)}
.t-due--soon{background:rgba(245,165,36,.20);color:#bf7400}
.t-due--overdue{background:rgba(229,72,77,.18);color:#d83b40}
body[data-theme="dark"] .t-status--in_progress,body[data-theme="dark"] .t-prio--medium{color:#5cd2ec}
body[data-theme="dark"] .t-status--in_review{color:#b69bf5}
body[data-theme="dark"] .t-prio--high,body[data-theme="dark"] .t-due--soon{color:#f5b94d}
@media (prefers-color-scheme: dark){body:not([data-theme="light"]) .t-status--in_progress,body:not([data-theme="light"]) .t-prio--medium{color:#5cd2ec}
  body:not([data-theme="light"]) .t-status--in_review{color:#b69bf5}
  body:not([data-theme="light"]) .t-prio--high,body:not([data-theme="light"]) .t-due--soon{color:#f5b94d}}

/* ---- tabs + filters ---- */
.t-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.t-tab{padding:7px 12px;border-radius:999px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap}
.t-tab:hover{background:var(--surface2)}
.t-tab.active{background:var(--primary);color:var(--on-primary)}
.t-tab-badge{background:rgba(255,255,255,.3);border-radius:9px;padding:0 6px;font-size:12px;margin-left:2px}
.t-tab:not(.active) .t-tab-badge{background:var(--surface3);color:var(--muted)}
.t-tabs-spacer{flex:1}
.t-viewtoggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;border-radius:9px;color:var(--muted)}
.t-viewtoggle:hover{background:var(--surface2)}
.t-viewtoggle.active{background:var(--primary-container);color:var(--primary)}

.t-filters{margin-bottom:0}
.t-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.t-sortwrap{display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--outline);border-radius:10px;padding:0 4px 0 8px;flex:0 0 auto}
.t-sortwrap .material-icons-round{color:var(--muted);font-size:18px}
.t-sortsel{border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;padding:9px 4px;outline:none;cursor:pointer;max-width:44vw}
.t-search{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--outline);border-radius:10px;padding:0 3px 0 12px;flex:1 1 220px;min-width:150px}
.t-search .material-icons-round{color:var(--muted);font-size:20px}
.t-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);padding:9px 0;font:inherit;font-size:14px;width:100%;outline:none}
.t-search-go{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.t-search-go:hover,.t-search-go:focus-visible{background:var(--surface2);color:var(--primary)}
/* narrow phones: search gets its own full-width row; sort/filters/export sit below it
   (prevents the search box collapsing to zero width next to the sort control) */
@media (max-width:560px){.t-search{flex-basis:100%}.t-sortwrap{flex:1 1 auto}.t-sortsel{max-width:none;flex:1}}
.t-filter-btn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;background:var(--surface);border:1px solid var(--outline);border-radius:10px;padding:8px 12px;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.t-filter-btn[hidden]{display:none}
.t-filter-btn .material-icons-round{font-size:18px;color:var(--muted)}
.t-filter-btn:hover{background:var(--surface2)}
.t-filter-btn.active,.t-filter-btn.active .material-icons-round{border-color:var(--primary);color:var(--primary)}
.t-filter-count{background:var(--primary);color:#fff;border-radius:9px;font-size:11px;font-weight:700;padding:0 6px;min-width:16px;text-align:center}
.t-filter-panel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;padding:12px;background:var(--surface);border:1px solid var(--outline-faint);border-radius:12px}
.t-filter-panel[hidden]{display:none}
.t-filter-panel .t-sel{flex:1 1 auto;min-width:120px}
.t-sel{background:var(--surface);border:1px solid var(--outline);border-radius:10px;padding:9px 10px;color:var(--text);font:inherit;font-size:14px}
.t-closed{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;white-space:nowrap}
.t-export{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--outline);color:var(--muted);flex:0 0 auto}
.t-export:hover{background:var(--surface2);color:var(--text)}

/* ---- list ---- */
.t-list{display:flex;flex-direction:column;gap:8px}
.t-row{display:flex;align-items:stretch;gap:12px;background:var(--surface);border:1px solid var(--outline-faint);border-radius:12px;padding:10px 13px;transition:border-color .15s,box-shadow .15s}
.t-row:hover{border-color:var(--outline);box-shadow:var(--shadow)}
.t-row.wk-kbd-focus,.t-card.wk-kbd-focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.t-row-prio{width:4px;border-radius:3px;background:var(--outline);flex:0 0 4px}
.t-row-prio.t-prio--urgent{background:#e5484d}
.t-row-prio.t-prio--high{background:#f5a524}
.t-row-prio.t-prio--medium{background:#0a7ea4}
.t-row-prio.t-prio--low{background:#9aa5ac}
.t-row-main{flex:1;min-width:0}
.t-row-title{font-weight:600;color:var(--text);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-id{color:var(--muted);font-weight:600;font-size:.92em;white-space:nowrap}
.t-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.t-asg-name{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.t-asg-none{font-style:italic}
.t-upd{font-size:12px;color:var(--muted)}
.t-row-arrow{color:var(--muted);align-self:center}
.t-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.t-empty .material-icons-round{font-size:40px;opacity:.5;margin-bottom:8px}
.t-empty p{margin:0 0 14px}
.t-empty-cta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---- board ---- */
/* the board NEVER scrolls sideways: phones/tablets stack the columns vertically
   (status changes go through the touch move-sheet anyway); wide screens fit all
   columns to the viewport width instead of overflowing */
.fb-file-preview{display:block;max-width:180px;max-height:130px;margin:6px 0 2px;border-radius:8px;border:1px solid var(--outline-faint)}
.fb-file.fb-dragover .fb-file-btn{border-color:var(--primary);color:var(--primary);background:rgba(10,126,164,.08);border-style:dashed}
.t-board-cap{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:9px 12px;border-radius:10px;background:rgba(176,111,0,.10);border:1px solid rgba(176,111,0,.28);color:var(--text);font-size:13px;line-height:1.4}
.t-board-cap .material-icons-round{font-size:18px;color:#b06f00;flex:0 0 auto}
.t-board-cap a{color:var(--primary);font-weight:600}
.t-board{display:flex;flex-direction:column;gap:12px;padding-bottom:10px}
@media (min-width:901px){
  .t-board{flex-direction:row;align-items:stretch}   /* equal-height columns so empty ones aren't a tiny target */
  .t-board .t-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
  .t-board .t-col-body{flex:1 1 auto}                /* the card list fills the column -> the whole column is droppable */
}
.t-col{flex:1 1 auto;width:100%;background:var(--surface2);border-radius:14px;padding:10px;min-height:64px}
.t-col.dragover{outline:2px dashed var(--primary);outline-offset:-3px;background:var(--primary-container)}
.t-card-title{overflow-wrap:anywhere}
/* sticky so you always know which column you're scrolling through (--wk-stick =
   the app bar + nav height, set by work.js; the literal is a safe fallback). The
   surface2 background masks cards passing behind it; the coloured underline keeps
   the status cue visible after the column's coloured top border scrolls away. */
.t-col-head{position:sticky;top:var(--wk-stick,108px);z-index:6;display:flex;align-items:center;gap:6px;
  font-weight:700;font-size:13.5px;color:var(--text);margin:0 0 10px;padding:7px 6px;
  background:var(--surface2);border-radius:9px;border-bottom:2px solid var(--outline-faint)}
.t-col-head .material-icons-round{font-size:18px;color:var(--muted)}
.t-col-count{margin-left:auto;background:var(--surface3);color:var(--muted);border-radius:9px;padding:0 7px;font-size:12px;font-weight:700}
.t-col-body{display:flex;flex-direction:column;gap:8px;min-height:56px;border-radius:10px}
.t-col-body.dragover{outline:2px dashed var(--primary);outline-offset:-2px;background:var(--primary-container)}
.t-card{display:block;background:var(--surface);border:1px solid var(--outline-faint);border-radius:11px;padding:10px 11px;cursor:grab}
.t-card:hover{border-color:var(--outline)}
.t-card.dragging{opacity:.5}
.t-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.t-card-title{font-weight:600;color:var(--text);font-size:14px;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.t-col-empty{color:var(--muted);text-align:center;padding:8px;font-size:13px;opacity:.6}
.t-board-hint{font-size:12.5px;margin-top:6px}

/* ---- detail ---- */
.t-detail{display:grid;grid-template-columns:1fr;gap:16px;grid-template-areas:"head" "controls" "body" "extra"}
.t-detail-head{grid-area:head}
.t-detail-controls{grid-area:controls}
.t-detail-body{grid-area:body;min-width:0}
.t-detail-extra{grid-area:extra}
@media (min-width:880px){.t-detail{grid-template-columns:minmax(0,1fr) 312px;align-items:start;grid-template-areas:"head head" "body controls" "body extra"}}
.t-back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13.5px;margin-bottom:6px}
.t-back .material-icons-round{font-size:18px}
.t-detail-title{font-size:21px;font-weight:800;margin:0 0 10px;line-height:1.3;word-break:break-word}
.t-detail-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.t-desc-card{padding:18px}
.t-desc{color:var(--text);line-height:1.6;white-space:normal;word-break:break-word}
.t-desc--empty{color:var(--muted);font-style:italic}
.t-edit{margin-top:12px}
.t-edit>summary{display:inline-flex;list-style:none;cursor:pointer}
.t-edit>summary::-webkit-details-marker{display:none}
.t-edit-form{margin-top:12px}
.t-section{font-size:16px;font-weight:700;margin:20px 2px 12px}
.t-section-sub{color:var(--muted);font-weight:500;font-size:13px;margin-left:4px}
.t-timeline{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.t-comment{display:flex;gap:10px}
.t-comment-body{flex:1;background:var(--surface);border:1px solid var(--outline-faint);border-radius:12px;padding:10px 12px}
.t-comment-head{font-size:13.5px;margin-bottom:3px}
.t-comment-head .t-when{color:var(--muted);font-weight:400;font-size:12px;margin-left:6px}
.t-comment-text{color:var(--text);line-height:1.55;white-space:normal;word-break:break-word}
.t-evt{display:flex;align-items:flex-start;gap:10px;padding-left:6px}
.t-evt-dot{width:8px;height:8px;border-radius:50%;background:var(--outline);margin:7px 8px 0 7px;flex:0 0 8px}
.t-evt-text{font-size:13.5px;color:var(--muted);line-height:1.5}
.t-evt-text b{color:var(--text)}
.t-when{color:var(--muted);font-size:12px}
.t-comment-form{margin-top:6px}

.t-detail-controls,.t-detail-extra{display:flex;flex-direction:column;gap:14px}
.t-side-card{padding:16px;margin:0}
.t-side-field{margin-bottom:12px}
.t-side-field:last-of-type{margin-bottom:14px}
.t-side-label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.t-side-field .input{width:100%}
.t-selfassign{padding:4px 0;margin-top:4px;font-size:12.5px}
.t-side-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--outline-faint);font-size:13.5px}
.t-side-meta:last-child{border-bottom:0}
.t-side-val{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:500}
.t-watchers{flex-direction:column;align-items:flex-start;gap:8px}
.t-watch-avatars{display:flex;flex-wrap:wrap;gap:4px}
.t-danger{padding:10px 16px}
.t-follow-note{display:flex;align-items:center;gap:6px;color:var(--success);font-size:12.5px;line-height:1.4;margin:8px 0 0}
.t-follow-note .material-icons-round{font-size:16px}
.t-email-toggle{margin-top:2px}

/* ---- forms ---- */
.t-form-card{padding:20px;max-width:680px}
.t-textarea{min-height:96px;resize:vertical;line-height:1.5;padding-top:14px}
.t-form-grid{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:620px){.t-form-grid{grid-template-columns:1fr 1fr 1fr;gap:14px}}
.t-form-actions{display:flex;align-items:center;gap:10px;margin-top:6px}

/* ---- members / admin ---- */
.t-cred{padding:18px;border:1px solid var(--primary);background:var(--primary-container)}
.t-cred-head{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:4px}
.t-cred-head .material-icons-round{color:var(--primary);flex:0 0 auto}
.t-cred-title{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.t-cred-share{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.t-cred-share .material-icons-round{font-size:18px}
.t-cred-manual{margin-top:8px}
.t-cred-manual-btn{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--primary);list-style:none;padding:4px 0}
.t-cred-manual-btn::-webkit-details-marker{display:none}
.t-cred-manual[open] .t-cred-manual-btn{color:var(--muted)}
.t-cred-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.t-cred-label{font-size:12px;font-weight:700;color:var(--muted);min-width:96px}
.t-cred-val{background:var(--surface);border:1px solid var(--outline);border-radius:8px;padding:7px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;word-break:break-all;flex:1;min-width:0}
.t-cred-link{font-size:12px}
.t-invite{padding:18px}
.t-invite>summary{cursor:pointer}
.t-invite-form{margin-top:14px}
.t-members{padding:16px}
.t-mtable{display:flex;flex-direction:column}
.t-mrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--outline-faint);flex-wrap:wrap}
.t-mrow:last-child{border-bottom:0}
.t-minfo{flex:1;min-width:160px}
.t-mname{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.t-msub{font-size:12.5px;color:var(--muted);margin-top:2px}
.t-mactions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.t-mactions form{margin:0}
/* v50: line-manager controls */
.t-mmgr{flex-basis:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 0 50px;padding-top:8px;border-top:1px dashed var(--outline-faint)}
.t-mmgr-lbl{font-size:12.5px;font-weight:600;color:var(--muted)}
.t-mmgr .t-mgr-sel{flex:1 1 160px;min-width:140px}
.t-mgr-pick{margin:12px 0 4px}
.t-mgr-lbl{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:5px}
.t-mgr-pick .t-mgr-sel{width:100%}
@media (max-width:560px){.t-mmgr{margin-left:0}}
/* v53: CSV member import (/work/import.php) */
.imp-clear{margin-left:auto;color:var(--muted)}
.imp-summary p{margin:4px 0 0}
.imp-share{margin-top:12px}
.imp-note{font-size:12.5px;margin:8px 0 0;line-height:1.5}
.imp-tablewrap{overflow-x:auto}
.imp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.imp-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;padding:6px 10px 8px;border-bottom:1px solid var(--outline-faint);white-space:nowrap}
.imp-table td{padding:9px 10px;border-bottom:1px solid var(--outline-faint);vertical-align:top}
@media (max-width:560px){
  /* stack the import results into cards so nothing clips on a phone */
  .imp-tablewrap{overflow-x:visible}
  .imp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .imp-table,.imp-table tbody,.imp-table tr,.imp-table td{display:block}
  .imp-table tr{border:1px solid var(--outline-faint);border-radius:12px;padding:6px 12px 8px;margin-bottom:10px}
  .imp-table td{border:0;padding:5px 0}
  .imp-table td::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:2px}
  .imp-table td.imp-cell-who{padding:8px 0 6px;border-bottom:1px solid var(--outline-faint);margin-bottom:2px}
  .imp-table td.imp-cell-who::before{display:none}
}
.imp-badge{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.imp-badge--new{background:rgba(11,128,67,.14);color:#0b6b39}
.imp-badge--add{background:var(--surface3);color:var(--muted)}
.imp-badge--err{background:var(--danger-container);color:var(--on-danger-container)}
.imp-err{font-size:11.5px;margin-top:3px}
.imp-form{margin-top:8px}
.imp-file{display:block;margin:6px 0 0;font-size:14px}
.imp-or{text-align:center;font-size:12.5px;margin:12px 0}
.imp-paste{width:100%;box-sizing:border-box;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;resize:vertical;margin-bottom:10px}
.imp-tpl{padding-left:0}
body[data-theme="dark"] .imp-badge--new{background:rgba(28,170,95,.2);color:#7fe0a6}
@media (prefers-color-scheme:dark){body:not([data-theme="light"]) .imp-badge--new{background:rgba(28,170,95,.2);color:#7fe0a6}}
.t-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:6px}
.t-tag--owner{background:rgba(10,126,164,.16);color:#0a7ea4}
.t-tag--admin{background:rgba(139,92,246,.16);color:#7c4ddb}
.t-tag--pending{background:rgba(245,165,36,.2);color:#bf7400}

/* ---- summary stat strip (single scrolling row, never a tall wrapped block) ---- */
.t-summary{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.t-stat{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--outline-faint);
  border-radius:999px;padding:7px 14px;color:var(--muted);font-weight:600;font-size:13.5px;flex:0 0 auto;white-space:nowrap}
.t-stat:hover{border-color:var(--outline)}
.t-stat.active{background:var(--primary-container);border-color:transparent;color:var(--text)}
.t-stat-n{font-size:16px;font-weight:800;color:var(--text)}
.t-stat--overdue{color:#d83b40}.t-stat--overdue .t-stat-n{color:#d83b40}
.t-stat--soon{color:#bf7400}.t-stat--soon .t-stat-n{color:#bf7400}

/* push Apply/Clear to the right edge inside the filter panel */
.t-filters-spacer{flex:1 1 auto}
.t-export .material-icons-round{font-size:20px}

/* ---- notifications (WORKSPACE accent = violet, distinct from the teal app + red alerts) ---- */
body{--wnotif:#7c4ddb;--wnotif-soft:rgba(124,77,219,.14)}
body[data-theme="dark"]{--wnotif:#b69bf5;--wnotif-soft:rgba(124,77,219,.26)}
@media (prefers-color-scheme: dark){body:not([data-theme="light"]){--wnotif:#b69bf5;--wnotif-soft:rgba(124,77,219,.26)}}
.work-badge{background:var(--wnotif)}
.wn-badge{background:var(--wnotif)}
.t-notifs{display:flex;flex-direction:column;gap:8px}
.t-notif{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--outline-faint);border-radius:12px;padding:12px 14px;border-left:3px solid transparent}
.t-notif:hover{border-color:var(--outline)}
.t-notif.unseen{background:var(--wnotif-soft);border-color:transparent;border-left-color:var(--wnotif)}
.t-notif-dot{width:8px;height:8px;border-radius:50%;background:var(--wnotif);flex:0 0 8px}
.t-notif-body{flex:1;min-width:0}
.t-notif-text{color:var(--text);font-size:14px;line-height:1.4}
.t-notif-when{color:var(--muted);font-size:12px;margin-top:3px}

/* ---- feedback (admin view) ---- */
.t-fb-msg{color:var(--text);font-size:14px;line-height:1.5;white-space:pre-wrap;margin:4px 0;word-break:break-word}
.t-fb-img{max-width:180px;max-height:130px;border-radius:8px;border:1px solid var(--outline);margin:4px 0;display:block}

/* ---- team switcher (top bar) ---- */
.work-teamsel{margin-left:6px}
.teamsel-trigger{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--outline-faint);
  border-radius:999px;padding:6px 10px;color:var(--text);font:inherit;font-weight:600;font-size:14px;cursor:pointer;max-width:46vw;overflow:hidden}
.teamsel-trigger:hover{background:var(--surface3)}
.teamsel-trigger .material-icons-round{font-size:18px;color:var(--muted);flex:none}
.teamsel-name{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamsel-caret{margin-left:-2px}
.teamsel-pop{left:0;right:auto;min-width:240px;max-width:300px}
.teamsel-head{padding:4px 10px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.teamsel-itemname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamsel-count{background:var(--surface3);color:var(--muted);border-radius:9px;padding:0 7px;font-size:12px;font-weight:700}
.teamsel-cur{background:var(--surface2)}
.teamsel-cur .material-icons-round{color:var(--primary)}
.teamsel-new{border-top:1px solid var(--outline-faint);margin-top:4px;padding-top:10px !important;color:var(--primary) !important}
/* phones: drop the "Workspace" wordmark so the team switcher + actions never overflow the bar */
@media (max-width:520px){
  .work-appbar .brand-name{display:none}
  .work-teamsel{margin-left:2px}
  .work-appbar .appbar-spacer{min-width:4px}
}

/* ---- teams grid + cards ---- */
.t-teamgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.t-teamgrid{grid-template-columns:1fr 1fr}}
.t-teamcard{margin:0;display:flex;flex-direction:column;gap:14px}
.t-teamcard-top{display:flex;align-items:center;gap:12px}
.t-teamcard-ic{font-size:34px;color:var(--primary);background:var(--primary-container);border-radius:12px;padding:8px;line-height:1}
.t-teamcard-name{font-weight:700;font-size:16px}
.t-teamcard-sub{color:var(--muted);font-size:13px;margin-top:2px}
.t-teamcard-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- create-first-team ---- */
.t-create{text-align:center;padding:32px 22px;max-width:520px;margin:0 auto}
.t-create-icon{font-size:48px;color:var(--primary);opacity:.85}
.t-create-h{font-size:20px;font-weight:800;margin:8px 0 6px}
.t-create-form{max-width:340px;margin:16px auto 0;text-align:left}

/* ---- solo onboarding fork (just-me vs team) (v60) ---- */
.t-onboard-lead{max-width:640px;margin:2px 0 16px}
.t-onboard{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px}
@media (max-width:640px){.t-onboard{grid-template-columns:1fr}}
.t-onboard-card{text-align:center;padding:26px 22px;display:flex;flex-direction:column}
.t-onboard-ic{font-size:44px;color:var(--primary);opacity:.85}
.t-onboard-h{font-size:19px;font-weight:800;margin:8px 0 6px}
.t-onboard-card .muted{flex:1;margin:0 0 16px}
.t-onboard-teamform{text-align:left}
.t-onboard-teamform .field{margin-bottom:12px}

/* ---- saved-login picker (work login) ---- */
.saved-accts{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.saved-head{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.saved-acct{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--outline);border-radius:12px;padding:10px 12px;cursor:pointer}
.saved-acct:hover{border-color:var(--primary);background:var(--surface2)}
.saved-av{width:40px;height:40px;font-size:16px;flex:none}
.saved-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.saved-name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-email{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-x{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:8px;flex:none}
.saved-x:hover{background:var(--surface3);color:var(--text)}
.saved-other{border:0;background:none;color:var(--primary);font:inherit;font-weight:600;cursor:pointer;padding:8px;text-align:center;width:100%}
.saved-collapsed{display:none}
/* the `hidden` attribute must beat a component's display:* (same pattern as .modal[hidden]
   in style.css), else a JS-hidden element stays visible. Fixes: the mic button showing on
   browsers without speech-recognition, and the saved-login picker not hiding after a pick. */
.saved-accts[hidden]{display:none}
.fb-mic[hidden]{display:none}

/* ---- routines ---- */
.routine-when{margin:6px 0 4px}
.routine-days{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rday{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted)}
.rday input{accent-color:var(--primary)}
.rday:hover{background:var(--surface3)}
.t-routine{margin:0 0 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.t-routine--off{opacity:.62}
.t-routine-main{flex:1;min-width:200px}
.t-routine-title{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.t-routine-sub{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-top:4px}
.t-routine-sub .material-icons-round{font-size:16px}
.t-routine-notes{color:var(--text);font-size:13.5px;margin-top:6px;opacity:.85}
.t-routine-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.t-routine-actions form{margin:0}

/* ===================== v44: Jira-style upgrades ===================== */

/* --- light rich text (descriptions + comments) --- */
.t-rt{line-height:1.55;word-break:break-word;overflow-wrap:anywhere}
.t-rt-link{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.t-rt-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:5px;padding:1px 5px}
.t-rt-list{margin:4px 0 4px 22px;padding:0}
.t-rt-list li{margin:2px 0}
.t-mention{color:var(--primary);background:var(--primary-container);border-radius:5px;padding:0 5px;font-weight:600;white-space:nowrap}
.t-rt-hint{font-size:12px;color:var(--muted);margin:6px 0 4px}
.t-rt-hint code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--surface2);border-radius:4px;padding:0 4px}
/* v64: the Ctrl+Enter affordance — hidden on touch, where there is no such key */
.t-kbd-hint{white-space:nowrap}
.t-kbd-hint kbd{font:600 11px/1.6 ui-monospace,Menlo,Consolas,monospace;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:4px;padding:0 4px;color:var(--text)}
@media (pointer:coarse){.t-kbd-hint,.t-rt-hint.t-kbd-only{display:none}}

/* --- @mention autocomplete popup --- */
.t-mention-pop{position:absolute;z-index:60;background:var(--surface);border:1px solid var(--outline);border-radius:12px;box-shadow:var(--shadow);padding:5px;max-height:240px;overflow-y:auto;overflow-x:hidden;width:240px;max-width:100%;box-sizing:border-box}
.t-mention-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:14px;overflow:hidden;min-width:0}
.t-mention-opt.active,.t-mention-opt:hover{background:var(--surface2)}
.t-mention-av{width:24px;height:24px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.t-mention-n{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-mention-u{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}

/* --- checklist --- */
.t-check-card{margin-top:14px}
.t-check-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.t-check-title{display:flex;align-items:center;gap:7px;margin:0}
.t-check-title .material-icons-round{font-size:20px;color:var(--primary)}
.t-check-meter{display:flex;align-items:center;gap:8px}
.t-check-count{font-size:12.5px;font-weight:700;color:var(--muted);min-width:34px;text-align:right}
.t-check-progress{width:120px;height:7px;border-radius:99px;background:var(--surface3);overflow:hidden}
.t-check-bar{display:block;height:100%;background:var(--primary);border-radius:99px;transition:width .25s}
.t-check-empty .t-check-meter{display:none}
.t-check-list{margin:8px 0 4px}
.t-check-item{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--outline-faint)}
.t-check-item:last-child{border-bottom:0}
.t-check-toggle,.t-check-del,.t-check-mv{margin:0}
.t-check-box,.t-check-x,.t-check-mvbtn{background:none;border:0;cursor:pointer;color:var(--muted);display:inline-flex;padding:2px;border-radius:6px}
.t-check-box .material-icons-round{font-size:22px}
.t-check-box:hover{color:var(--primary)}
.t-check-item.is-done .t-check-box{color:var(--primary)}
.t-check-body{flex:1;font-size:14.5px;color:var(--text);word-break:break-word}
.t-check-item.is-done .t-check-body{text-decoration:line-through;color:var(--muted)}
/* drag-to-reorder grip (shown by JS; touch-action:none so the handle drags but the row still scrolls) */
.t-check-grip{touch-action:none;cursor:grab;background:none;border:0;color:var(--muted);display:inline-flex;align-items:center;padding:3px;border-radius:6px;flex:0 0 auto;opacity:.45;-webkit-user-select:none;user-select:none}
.t-check-grip .material-icons-round{font-size:20px}
.t-check-grip:hover{opacity:.9;color:var(--text)}
.t-check-grip:active{cursor:grabbing}
.t-check-grip:focus-visible{outline:2px solid var(--primary);outline-offset:1px;opacity:1}
.t-check-item.dragging{opacity:.97;background:var(--surface2);box-shadow:0 6px 18px rgba(0,0,0,.18);border-radius:9px;border-bottom-color:transparent}
.t-check-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
.t-check-actions{display:inline-flex;align-items:center;gap:1px;flex:0 0 auto}
.t-check-mvbtn .material-icons-round{font-size:19px}
.t-check-mvbtn{opacity:0}
.t-check-item:hover .t-check-mvbtn,.t-check-mvbtn:focus{opacity:.7}
.t-check-mvbtn:hover{color:var(--primary);opacity:1}
.t-check-x{opacity:0;font-size:0}
.t-check-x .material-icons-round{font-size:18px}
.t-check-item:hover .t-check-x,.t-check-x:focus{opacity:.7}
@media (hover:none){.t-check-x,.t-check-mvbtn{opacity:.55}}   /* touch devices have no hover — keep reorder + delete tappable */
@media (hover:none), (pointer:coarse){
  /* real 40px hit areas on touch — the icons stay small, the tap target doesn't */
  .t-check-box,.t-check-x,.t-check-grip{min-width:40px;min-height:40px;align-items:center;justify-content:center}
  .t-check-mvbtn{min-width:34px;min-height:40px;align-items:center;justify-content:center}
  .t-check-actions{gap:4px}
}
.t-check-x:hover{color:#d83b40;opacity:1}
.t-check-add{display:flex;align-items:center;gap:8px;margin-top:8px}
.t-check-addicon{color:var(--muted);font-size:20px}
.t-check-input{flex:1;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:9px;padding:8px 11px;font:inherit;color:var(--text)}
.t-check-input:focus{outline:none;border-color:var(--primary)}

/* --- new-ticket inline checklist builder --- */
.nc-field{margin-bottom:16px}
.nc-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.nc-label .material-icons-round{font-size:18px;color:var(--primary)}
.nc-opt{font-weight:500;color:var(--muted);opacity:.8}
.nc-items{display:flex;flex-direction:column;gap:5px}
.nc-items:empty{display:none}
.nc-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface2);border-radius:9px}
.nc-item>.material-icons-round{font-size:20px;color:var(--muted);flex:0 0 auto}
.nc-item-text{flex:1;font-size:14px;color:var(--text);word-break:break-word}
.nc-item-x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:19px;line-height:1;padding:2px 6px;border-radius:6px;flex:0 0 auto}
.nc-item-x:hover{color:#d83b40}
.nc-add{display:flex;align-items:center;gap:8px;margin-top:6px}
.nc-add-icon{color:var(--muted);font-size:20px;flex:0 0 auto}
.nc-input{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:9px;padding:9px 11px;font:inherit;color:var(--text)}
.nc-input:focus{outline:none;border-color:var(--primary)}
.nc-add-btn{flex:0 0 auto}
/* account-menu header: a long name/email is one unbreakable token — clip it with an
   ellipsis (min-width:0 lets the flex column shrink) so it never spills past the dropdown */
.usermenu-head>div{min-width:0;flex:1}
.usermenu-head .um-name,.usermenu-head .um-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* workspace header brand mark: the Offis logo, theme-adaptive (navy on light, soft-white on dark) */
.wk-brand-logo{width:28px;height:28px;flex:0 0 auto;background:center/contain no-repeat url(/assets/img/logo-mark.png?v=3)}
body[data-theme="dark"] .wk-brand-logo{background-image:url(/assets/img/logo-mark-dark.png?v=1)}
@media (prefers-color-scheme:dark){body:not([data-theme="light"]) .wk-brand-logo{background-image:url(/assets/img/logo-mark-dark.png?v=1)}}
/* account-menu grouping: a "Go to" nav section split from the account actions */
.um-grouplabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:7px 12px 3px}
.usermenu-pop hr.um-sep{height:1px;border:0;background:var(--outline-faint);margin:6px 8px}
.nc-hint{font-size:12px;color:var(--muted);margin:7px 0 0}
/* new-task "Add details" collapsible (priority/due/checklist hidden by default) */
.nc-adv{margin:4px 0 8px}
.nc-adv-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--primary);list-style:none;padding:8px 12px;border-radius:10px;border:1px dashed var(--outline)}
.nc-adv-btn::-webkit-details-marker{display:none}
.nc-adv-btn .material-icons-round{font-size:18px}
.nc-adv[open]>.nc-adv-btn{margin-bottom:12px;color:var(--text)}

/* --- comment edit/delete --- */
.t-comment-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.t-comment-actions{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.t-comment-actions form{margin:0}
.t-clink{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12.5px;font-weight:600;padding:2px 4px;border-radius:6px}
.t-clink:hover{color:var(--primary);background:var(--surface2)}
.t-clink--danger:hover{color:#d83b40}
.t-comment-editform{margin-top:8px}
.t-editform-actions{display:flex;gap:8px;margin-top:6px}

/* --- saved views bar --- */
/* active-filter chips: an always-visible, removable summary of what's filtering the
   list (a stat like "1 due today" sets ?due=today with no other visible way to clear it) */
.t-activefilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.t-activefilters-lbl{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted)}
.t-activefilters-lbl .material-icons-round{font-size:16px}
.t-afchip{display:inline-flex;align-items:center;gap:6px;padding:4px 7px 4px 11px;border-radius:999px;background:var(--primary-container);color:var(--text);font-size:12.5px;font-weight:600;border:1px solid var(--outline-faint);text-decoration:none}
.t-afchip:hover{border-color:var(--primary)}
.t-afchip .t-afchip-x{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:rgba(0,0,0,.10);font-size:14px;line-height:1}
.t-afchip:hover .t-afchip-x{background:rgba(0,0,0,.22)}
body[data-theme="dark"] .t-afchip .t-afchip-x{background:rgba(255,255,255,.14)}
.t-afclear{font-size:12.5px;font-weight:700;color:var(--primary);text-decoration:none;padding:4px 2px}
.t-afclear:hover{text-decoration:underline}
.t-views{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.t-views-label{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted)}
.t-views-label .material-icons-round{font-size:16px}
.t-views-none{font-size:12.5px;color:var(--muted)}
.t-view-chip{display:inline-flex;align-items:center;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:99px;overflow:hidden}
.t-view-chip a{padding:5px 4px 5px 12px;font-size:13px;font-weight:600;color:var(--text)}
.t-view-chip a:hover{color:var(--primary)}
.t-view-chip form{margin:0}
.t-view-x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:17px;line-height:1;padding:4px 9px 4px 4px}
.t-view-x:hover{color:#d83b40}
.t-view-save{display:inline-block}
.t-view-savebtn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--primary);list-style:none;padding:5px 10px;border-radius:99px;border:1px dashed var(--outline)}
.t-view-savebtn::-webkit-details-marker{display:none}
.t-view-savebtn .material-icons-round{font-size:16px}
.t-view-saveform{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.t-view-saveform .input{flex:1;min-width:180px}

/* --- bulk actions --- */
.t-listwrap{margin:0}
.t-rowwrap{display:flex;align-items:stretch;gap:2px}
.t-rowwrap .t-row{flex:1;min-width:0}
.t-rowcheck{display:flex;align-items:center;padding:0 4px 0 2px;cursor:pointer}
.t-rowcheck input{width:17px;height:17px;accent-color:var(--primary);cursor:pointer}
.t-bulk-bar{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--primary);border-radius:14px;box-shadow:var(--shadow)}
.t-bulk-bar[hidden]{display:none}   /* only appears once tickets are selected (class display beats the hidden attr) */
.t-bulk-count{font-size:13.5px;font-weight:700;color:var(--text)}
.t-bulk-count b{color:var(--primary)}
.t-bulk-bar .t-sel{margin:0}

/* --- reports --- */
.rpt-period{display:inline-flex;gap:4px;background:var(--surface2);border-radius:99px;padding:3px}
.rpt-period-opt{padding:5px 12px;border-radius:99px;font-size:13px;font-weight:600;color:var(--muted)}
.rpt-period-opt.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.rpt-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:14px}
.rpt-total{background:var(--surface);border:1px solid var(--outline-faint);border-radius:14px;padding:12px;text-align:center}
.rpt-total-n{display:block;font-size:26px;font-weight:800;color:var(--text);line-height:1.1}
.rpt-total-l{font-size:11.5px;color:var(--muted)}
.rpt-total--warn .rpt-total-n{color:#d83b40}
.rpt-total--good .rpt-total-n{color:#1f9d57}
.rpt-card{margin-bottom:14px}
.rpt-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rpt-h{font-size:15px;font-weight:700;margin:0 0 10px}
.rpt-card-head .rpt-h{margin:0}
.rpt-legend{display:flex;gap:12px}
.rpt-key{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.rpt-swatch{width:11px;height:11px;border-radius:3px}
.rpt-swatch--created{background:var(--primary)}
.rpt-swatch--resolved{background:#2bbf6a}
.rpt-bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:6px;overflow-x:auto;padding-bottom:4px}
.rpt-week{flex:1 0 40px;min-width:40px;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.rpt-week-bars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%}
.rpt-bar{width:42%;max-width:16px;min-height:2px;border-radius:4px 4px 0 0}
.rpt-bar--created{background:var(--primary)}
.rpt-bar--resolved{background:#2bbf6a}
.rpt-week-label{font-size:10.5px;color:var(--muted);white-space:nowrap}
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.rpt-hbars{display:flex;flex-direction:column;gap:9px}
.rpt-hrow{display:flex;align-items:center;gap:9px}
.rpt-hlabel{width:96px;font-size:13px;color:var(--text);flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpt-htrack{flex:1;height:12px;background:var(--surface3);border-radius:99px;overflow:hidden}
.rpt-hfill{display:block;height:100%;background:var(--primary);border-radius:99px;min-width:2px}
.rpt-hfill--age{background:#f5a524}
.rpt-hval{width:26px;text-align:right;font-size:13px;font-weight:700;color:var(--muted);flex:0 0 auto}

/* One-time "turn on notifications" home prompt */
.push-prompt{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--outline-faint);border-left:4px solid var(--primary);border-radius:12px;padding:12px 14px;margin:0 0 14px;position:relative}
.push-prompt[hidden]{display:none}   /* display:flex would beat the UA [hidden] rule -> the banner flashed for everyone on every load */
.push-prompt-ic{color:var(--primary);font-size:26px;flex:0 0 auto}
.push-prompt-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.push-prompt-txt b{font-size:14px;color:var(--text)}
.push-prompt-txt span{font-size:12.5px;color:var(--muted);line-height:1.4}
.push-prompt .push-prompt-on{flex:0 0 auto;white-space:nowrap}
.push-prompt-x{flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px}
.push-prompt-x:hover{background:var(--surface3);color:var(--text)}
@media (max-width:520px){
  .push-prompt{flex-wrap:wrap;padding-right:40px}
  .push-prompt-txt{flex:1 1 60%}
  .push-prompt .push-prompt-on{order:3;flex:1 1 100%;margin-top:6px}
  .push-prompt-x{position:absolute;top:8px;right:8px}
}
.rpt-hfill.pr--urgent{background:#e5484d}.rpt-hfill.pr--high{background:#f5a524}.rpt-hfill.pr--medium{background:#0a7ea4}.rpt-hfill.pr--low{background:#9aa5ac}

/* --- automations --- */
.t-auto-intro{margin:-4px 0 14px;font-size:13.5px}
.t-auto-list{margin-bottom:14px}
.t-auto-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--outline-faint)}
.t-auto-row:last-child{border-bottom:0}
.t-auto-icon{color:var(--primary);font-size:20px}
.t-auto-off .t-auto-icon{color:var(--muted)}
.t-auto-desc{flex:1;font-size:14px;color:var(--text)}
.t-auto-off .t-auto-desc{color:var(--muted)}
.t-auto-paused{font-size:12px;color:var(--muted)}
.t-auto-actions{display:flex;gap:2px;flex-wrap:wrap}
.t-auto-actions form{margin:0}
.t-auto-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.t-auto-when{font-size:13px;font-weight:700;color:var(--muted);min-width:40px}
.t-auto-line .input{flex:1;min-width:150px}

/* --- a field mid-save (inline auto-save on the ticket sidebar) --- */
.t-saving{opacity:.5;pointer-events:none;transition:opacity .1s}

/* --- loading state on a submitting button (a spinner + no re-click) --- */
.btn.is-loading{pointer-events:none;opacity:.92}
.btn.is-loading .material-icons-round{display:none}
.btn.is-loading::before{content:"";display:inline-block;width:15px;height:15px;margin-right:8px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:work-spin .7s linear infinite;vertical-align:-3px;flex:0 0 auto}
@keyframes work-spin{to{transform:rotate(360deg)}}

/* ================= v45: power features ================= */

/* no-JS: the palette search button must actually hide (icon-btn's display beats [hidden]) */
.icon-btn[hidden]{display:none}

/* keyboard focus ring (a11y) — visible on tab, invisible on click */
.work-body a:focus-visible,.work-body button:focus-visible,.work-body input:focus-visible,
.work-body select:focus-visible,.work-body textarea:focus-visible,.work-body summary:focus-visible,
.work-body [tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
/* …EXCEPT fields living inside a styled wrapper (search pill, sort, quick-add,
   palette, checklist adders): the ring on the inner input overflowed the pill
   and read as broken (operator screenshot). Highlight the WRAPPER instead. */
.t-search input:focus-visible,.t-sortsel:focus-visible,.t-qa-input:focus-visible,
.wk-pal-input:focus-visible,.t-check-input:focus-visible,.nc-input:focus-visible,
.t-qa-colform .input:focus-visible{outline:none}
.t-search:focus-within,.t-sortwrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,126,164,.22)}
.t-check-add:focus-within,.nc-add:focus-within{border-radius:10px;outline:2px solid var(--primary);outline-offset:2px}

/* no pull-to-refresh inside the workspace: Chrome's native spinner was colliding
   with the appbar/loading bar (operator screenshot). The loading bar is the one
   loading signal; reload stays available from the browser menu. */
body.work-body{overscroll-behavior-y:none}

/* ---- calm phone layout (v47.1): same features, fewer stacked bands ----
   The nav tab already says "Tasks", so the page heading goes; creating moves to
   a thumb-reach FAB; the "assigned to me" chip (a duplicate of the tab badge)
   hides; the quick-add slims down; vertical gaps tighten. */
.wk-fab{display:none}
@media (max-width:560px){
  .work-head--tasks{display:none}
  .wk-fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;
    display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;
    background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28)}
  .wk-fab .material-icons-round{font-size:26px}
  .wk-fab:active{transform:scale(.96)}
  .wk-bulk-open .wk-fab{display:none}             /* never cover the bulk-action bar */
  .work-main{padding-bottom:86px}                 /* the last row never hides under the FAB */
  .t-stat--mine{display:none}                     /* the tab badge already carries this count */
  .t-summary{margin-bottom:10px;gap:6px}
  .t-stat{padding:6px 11px;font-size:12.5px}
  .t-tabs{margin-bottom:8px}
  .t-toolbar{margin-bottom:8px}
  .t-quickadd{padding:1px 4px 1px 10px;margin-bottom:10px;border-color:var(--outline-faint)}
  .t-qa-input{padding:8px 0;font-size:13.5px}
  .t-views{margin-bottom:8px}
}

/* --- quick-add (list) --- */
.t-quickadd{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px dashed var(--outline);border-radius:12px;padding:4px 6px 4px 12px;margin-bottom:12px}
.t-quickadd:focus-within{border-style:solid;border-color:var(--primary)}
.t-qa-ic{color:var(--muted);font-size:20px}
.t-qa-input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;padding:9px 0;outline:none}
.t-qa-btn{flex:0 0 auto}

/* --- quick-add (board column) — sits ABOVE the cards so it's always reachable --- */
.t-qa-col{margin:0 0 8px}
.t-qa-col summary{display:flex;align-items:center;justify-content:center;gap:4px;list-style:none;cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;padding:7px 8px;border-radius:9px;border:1px dashed var(--outline)}
.t-qa-col summary::-webkit-details-marker{display:none}
.t-qa-col summary:hover{background:var(--surface2);color:var(--text)}
.t-qa-col summary .material-icons-round{font-size:17px}
.t-qa-colform{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.t-qa-colform .input{flex:1;min-width:0;padding:8px 10px;font-size:13.5px}
.t-qa-colform .btn{flex:0 0 auto;padding:8px 12px}

/* "Show N more" — a board column renders a capped number of cards (the Done tail
   grows forever); this reveals the rest of that column via ?expand=<status>. */
.t-col-more{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:2px;padding:7px 8px;
  border-radius:9px;border:1px dashed var(--outline);color:var(--muted);font-size:12.5px;font-weight:700}
.t-col-more:hover{background:var(--surface);color:var(--text);border-color:var(--primary)}
.t-col-more .material-icons-round{font-size:17px}
/* v65: the column expands in place — a quiet busy state while its cards are fetched */
.t-col-more.is-loading{opacity:.6;pointer-events:none}
.t-col-more.is-loading .material-icons-round{animation:tf-spin .8s linear infinite}
@keyframes tf-spin{to{transform:rotate(360deg)}}

/* --- pagination --- */
.t-pager{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 4px}
.t-pager-info{font-size:13px;color:var(--muted)}

/* --- copy-task-link icon button --- */
.t-detail-headrow{display:flex;align-items:flex-start;gap:8px}
.t-detail-headrow .t-detail-title{flex:1;min-width:0}
.t-copylink{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border:1px solid var(--outline);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer;margin-top:2px}
.t-copylink:hover{color:var(--primary);background:var(--surface2)}
.t-copylink .material-icons-round{font-size:19px}

/* --- attachments --- */
.t-files-card.t-files-empty{padding-top:14px;padding-bottom:14px}
.t-files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:10px 0 6px}
.t-file{position:relative;margin:0;border:1px solid var(--outline-faint);border-radius:12px;overflow:hidden;background:var(--surface2)}
.t-file-img{display:block;aspect-ratio:4/3;overflow:hidden}
.t-file-img img{width:100%;height:100%;object-fit:cover;display:block}
.t-file-meta{display:flex;flex-direction:column;gap:1px;padding:6px 8px}
.t-file-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-file-by{font-size:11px;color:var(--muted)}
.t-file-del{position:absolute;top:4px;right:4px;margin:0}
.t-file-x{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.85}
.t-file-x .material-icons-round{font-size:15px}
.t-file-x:hover{opacity:1}
.t-file-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.t-file-pick{cursor:pointer}
.t-file-hint{font-size:12px}
.t-file-send[hidden]{display:none}
.vis-hidden-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- due-date quick presets --- */
.t-due-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.t-due-presets[hidden]{display:none}
.t-due-chip{border:1px solid var(--outline);background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;cursor:pointer}
.t-due-chip:hover{border-color:var(--primary);color:var(--primary)}

/* --- board card "move" button (touch devices; drag needs a mouse) --- */
.t-card-top{position:relative}
.t-card-move{margin-left:auto;width:30px;height:30px;border:1px solid var(--outline);border-radius:8px;background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.t-card-move[hidden]{display:none}
.t-card-move .material-icons-round{font-size:17px}

/* --- bottom sheet (move a card on touch) --- */
.wk-sheet{position:fixed;inset:0;z-index:120}
.wk-sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.wk-sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:18px 18px 0 0;padding:8px 14px calc(14px + env(safe-area-inset-bottom));max-height:70vh;overflow:auto;box-shadow:0 -8px 30px rgba(0,0,0,.25);animation:wk-sheet-up .18s ease-out}
@keyframes wk-sheet-up{from{transform:translateY(30%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.wk-sheet-panel{animation:none}}
.wk-sheet-grab{width:44px;height:4px;border-radius:2px;background:var(--outline);margin:4px auto 10px}
.wk-sheet-title{font-size:14px;font-weight:700;color:var(--muted);margin:0 2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-sheet-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;color:var(--text);font:inherit;font-size:15px;padding:13px 8px;border-radius:10px;cursor:pointer}
.wk-sheet-opt:hover{background:var(--surface2)}
.wk-sheet-opt .material-icons-round{font-size:20px;color:var(--muted)}
.wk-sheet-opt.current{color:var(--muted)}
.wk-sheet-cur{margin-left:auto;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.wk-sheet-cancel{display:block;width:100%;margin-top:6px;background:var(--surface2);border:0;border-radius:10px;color:var(--text);font:inherit;font-size:15px;font-weight:600;padding:12px;cursor:pointer}

/* --- command palette --- */
.wk-pal{position:fixed;inset:0;z-index:130;display:none}
.wk-pal.show{display:block}
.wk-pal-back{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.wk-pal-panel{position:absolute;left:50%;top:min(12vh,110px);transform:translateX(-50%);width:min(620px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--outline-faint);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3);overflow:hidden;animation:wk-pal-in .14s ease-out}
@keyframes wk-pal-in{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion: reduce){.wk-pal-panel{animation:none}}
.wk-pal-inputrow{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--outline-faint)}
.wk-pal-inputrow .material-icons-round{color:var(--muted);font-size:21px}
.wk-pal-input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;outline:none}
.wk-pal-x{border:1px solid var(--outline);background:var(--surface2);color:var(--muted);font:inherit;font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;cursor:pointer;flex:0 0 auto}
.wk-pal-list{max-height:min(48vh,380px);overflow:auto;padding:6px}
.wk-pal-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;cursor:pointer}
.wk-pal-item.active{background:var(--surface2)}
.wk-pal-item.first-of-group{margin-top:2px}
.wk-pal-ic{color:var(--muted);font-size:19px;flex:0 0 auto}
.wk-pal-key{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--primary);background:var(--surface2);border-radius:6px;padding:3px 7px;letter-spacing:.3px}
.wk-pal-lbl{flex:1;min-width:0;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-pal-done{text-decoration:line-through;color:var(--muted)}
.wk-pal-st{flex:0 0 auto;font-size:11.5px;color:var(--muted);border:1px solid var(--outline-faint);border-radius:999px;padding:2px 8px}
.wk-pal-none{padding:18px 12px;color:var(--muted);font-size:14px;text-align:center}
.wk-pal-foot{padding:9px 14px;border-top:1px solid var(--outline-faint);font-size:12px;color:var(--muted)}

/* ================= v46: settings / templates / recurring / SSO ================= */

/* global workspace-settings card (only the designated settings admin sees it) */
.wk-global{border:1px solid var(--primary);}
.wk-global .card-title{display:flex;align-items:center;gap:8px}
.wk-global-you{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);border:1px solid var(--outline);border-radius:999px;padding:3px 9px}
.wk-global-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wk-global-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.wk-global-info .muted{font-size:13px;line-height:1.5}
.wk-global-row form{flex:0 0 auto;margin:0}

/* new-task template picker row */
.t-tpl-row{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 10px;background:var(--surface2);border-radius:10px}
.t-tpl-ic{color:var(--muted);font-size:18px}
.t-tpl-sel{flex:1;min-width:0}
.t-tpl-apply{flex:0 0 auto}
.t-tpl-apply[hidden]{display:none}

/* scheduled-task weekday picker */
.t-rec-days{display:inline-flex;gap:5px;flex-wrap:wrap}
.t-rec-days[hidden]{display:none}
.t-rec-day{position:relative;cursor:pointer}
.t-rec-day input{position:absolute;opacity:0;width:1px;height:1px}
.t-rec-day span{display:inline-block;border:1px solid var(--outline);border-radius:999px;padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.t-rec-day input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff}
.t-rec-day input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.t-rec-dom{max-width:90px}
.t-rec-dom[hidden]{display:none}

/* document (PDF) attachment chip */
.t-file-doc{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--surface);color:var(--primary)}
.t-file-doc .material-icons-round{font-size:38px}

/* "or" divider on the work login (Google SSO) */
.wa-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--muted);font-size:12.5px}
.wa-or::before,.wa-or::after{content:"";flex:1;height:1px;background:var(--outline-faint)}
.gsi-wrap{display:flex;justify-content:center;margin-bottom:4px}

/* ================= v47: delight & momentum ================= */

/* board columns get a per-status accent so the flow reads at a glance — on both the
   column top border AND the sticky header underline (which stays visible on scroll) */
.t-col{border-top:3px solid var(--outline-faint)}
.t-col[data-status="open"]{border-top-color:#64748b}
.t-col[data-status="in_progress"]{border-top-color:#0a7ea4}
.t-col[data-status="blocked"]{border-top-color:#f2b705}
.t-col[data-status="in_review"]{border-top-color:#9334e6}
.t-col[data-status="done"]{border-top-color:#0b8043}
.t-col[data-status="cancelled"]{border-top-color:#94a3b8}
.t-col[data-status="open"] .t-col-head{border-bottom-color:#64748b}
.t-col[data-status="in_progress"] .t-col-head{border-bottom-color:#0a7ea4}
.t-col[data-status="blocked"] .t-col-head{border-bottom-color:#f2b705}
.t-col[data-status="in_review"] .t-col-head{border-bottom-color:#9334e6}
.t-col[data-status="done"] .t-col-head{border-bottom-color:#0b8043}
.t-col[data-status="cancelled"] .t-col-head{border-bottom-color:#94a3b8}
.t-col[data-status="cancelled"] .t-card{opacity:.72}   /* cancelled stays muted */
/* a COMPLETED task reads as a full GREEN tile — list row AND board card (both themes) */
.t-col[data-status="done"] .t-card,
.t-row--done{background:rgba(11,128,67,.13);border-color:rgba(11,128,67,.45)}
.t-col[data-status="done"] .t-card:hover,
.t-row--done:hover{border-color:rgba(11,128,67,.7)}
.t-row--done .t-row-title,.t-col[data-status="done"] .t-card-title{color:var(--text)}
body[data-theme="dark"] .t-col[data-status="done"] .t-card,
body[data-theme="dark"] .t-row--done{background:rgba(28,170,95,.17);border-color:rgba(28,170,95,.5)}
@media (prefers-color-scheme: dark){
  body:not([data-theme="light"]) .t-col[data-status="done"] .t-card,
  body:not([data-theme="light"]) .t-row--done{background:rgba(28,170,95,.17);border-color:rgba(28,170,95,.5)}}

/* cards + rows respond to you (hover devices only — no sticky-hover on touch).
   PROFESSIONAL MOTION: one shared easing curve, short distances, no bounce. */
@media (hover:hover){
  .t-card{transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s cubic-bezier(.2,.7,.3,1),border-color .16s ease}
  .t-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10);border-color:var(--outline)}
  .t-row-arrow{transition:transform .16s cubic-bezier(.2,.7,.3,1)}
  .t-row:hover .t-row-arrow{transform:translateX(3px);color:var(--primary)}
  .t-stat{transition:transform .16s cubic-bezier(.2,.7,.3,1),border-color .16s ease}
  .t-stat:hover{transform:translateY(-1px)}
}

/* checklist ticks feel precise — a restrained scale, no wobble or rotation */
.t-check-box .material-icons-round{transition:transform .15s cubic-bezier(.2,.7,.3,1),color .15s ease}
.t-check-box.pop .material-icons-round{animation:wk-pop .3s cubic-bezier(.2,.7,.3,1)}
@keyframes wk-pop{0%{transform:scale(.92)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.t-check-body{transition:color .2s ease}
.t-check-bar{transition:width .4s cubic-bezier(.2,.8,.3,1)}
.t-stat-n.wk-bump{display:inline-block;animation:wk-pop .3s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion: reduce){
  .t-check-box.pop .material-icons-round,.t-stat-n.wk-bump{animation:none}
  .t-card,.t-row-arrow,.t-stat,.t-check-bar{transition:none}
}

/* frosted overlay backdrops (palette + move sheet) — premium, not heavy */
@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))){
  .wk-pal-back,.wk-sheet-back{background:rgba(15,23,42,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
}

/* momentum chip — today's finishes (the streak chip was removed v51) */
.t-stat--donetoday{border-color:rgba(11,128,67,.45);color:#0b8043;background:rgba(11,128,67,.08);font-weight:700}
.t-stat--donetoday .t-stat-n{color:#0b8043}
body:not([data-theme="light"]) .t-stat--donetoday{color:#5bd18f}
body:not([data-theme="light"]) .t-stat--donetoday .t-stat-n{color:#5bd18f}
.t-stat-ic{font-size:16px}

/* the "everything's handled" state — a win, not an empty void */
.t-empty--clear .material-icons-round{color:#0b8043}
.t-empty--clear p{font-weight:600}

/* board tip: the drag half of the sentence only makes sense with a mouse */
@media (hover:none){.t-hint-desk{display:none}}

/* scope tabs: NO horizontal scrolling on phones. The labels stay FULL and
   self-explanatory ("Assigned to me", "Created by me"); tighter sizing keeps all
   four on one 390px line, and on very narrow phones the chips wrap to a second
   row (never a sideways scroll). The list/board toggles move into the toolbar. */
.t-toolbar-vt{display:none;align-items:center;gap:2px;flex:0 0 auto}
@media (max-width:560px){
  .t-tab{padding:6px 9px;font-size:12.5px}
  .t-tab-badge{font-size:11px;padding:0 5px}
  .t-tabs{flex-wrap:wrap;overflow:visible;gap:3px;row-gap:6px}
  .t-tabs > .t-viewtoggle{display:none}
  .t-toolbar-vt{display:inline-flex}
  .t-filter-btn-lbl{display:none}   /* icon-only Filters -> sort + filters + toggles + export share one row */
  .t-filter-btn{padding:8px 10px}
}

/* ---- Leave management (v48) ---- */
.lv-who{display:inline-flex;align-items:center;gap:7px;min-width:0}
.lv-who-name{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-count{background:var(--wnotif,#7c5cff);color:#fff;border-radius:9px;font-size:12px;font-weight:700;padding:0 7px;margin-left:2px}
.lv-pending{border:1px solid var(--wnotif,#7c5cff)}
.lv-req{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--outline-faint)}
.lv-req:first-of-type{border-top:none}
.lv-req-main{min-width:0;flex:1 1 200px}
.lv-req-meta{font-size:13.5px;color:var(--text);margin-top:3px}
.lv-req-reason{font-size:13px;color:var(--muted);margin-top:3px;font-style:italic}
.lv-decide{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin:0}
.lv-people{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.lv-person{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:999px;padding:5px 12px 5px 6px}
.lv-back{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.lv-subhead{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px}
.lv-up-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--outline-faint)}
.lv-up-when{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.lv-dates{display:flex;gap:10px}
.lv-dates .field{flex:1;min-width:0}
.lv-hint{font-size:12.5px;margin:2px 0 10px}
.lv-apply .btn{margin-top:2px}
.lv-row{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--outline-faint)}
.lv-row:first-of-type{border-top:none}
.lv-row-main{flex:1;min-width:0}
.lv-row-when{font-size:14px;color:var(--text)}
.lv-row-sub{font-size:12.5px;color:var(--muted);margin-top:3px;word-break:break-word}
.lv-cancel{flex:0 0 auto;margin:0}
.lv-status{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;flex:0 0 auto;white-space:nowrap}
.lv-status .material-icons-round{font-size:15px}
.lv-status--pending{background:#fff3d6;color:#8a5a00}
.lv-status--approved{background:#d9f4e3;color:#0b6b39}
.lv-status--rejected{background:var(--danger-container);color:var(--on-danger-container)}
.lv-status--cancelled{background:var(--surface3);color:var(--muted)}
.lv-pill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.lv-pill--out{background:#fde2e0;color:#8a2018}
.lv-pill--in{background:var(--surface3);color:var(--muted)}
.lv-tablewrap{overflow-x:auto}
.lv-table{width:100%;border-collapse:collapse;font-size:13.5px}
.lv-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;padding:6px 10px 8px;border-bottom:1px solid var(--outline-faint);white-space:nowrap}
.lv-table td{padding:9px 10px;border-bottom:1px solid var(--outline-faint);vertical-align:middle}
.lv-table td.lv-num,.lv-table th.lv-num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  /* stack the per-member overview into readable cards (no sideways scroll) */
  .lv-tablewrap{overflow-x:visible}
  .lv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lv-table,.lv-table tbody,.lv-table tr,.lv-table td{display:block}
  .lv-table tr{border:1px solid var(--outline-faint);border-radius:12px;padding:4px 12px 8px;margin-bottom:10px}
  .lv-table td{border:0;padding:6px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .lv-table td::before{content:attr(data-label);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
  .lv-table td.lv-cell-who{justify-content:flex-start;padding:8px 0 6px;border-bottom:1px solid var(--outline-faint);margin-bottom:2px}
  .lv-table td.lv-cell-who::before{display:none}
  .lv-table td:last-child{padding-bottom:2px}
}
@media (prefers-color-scheme:dark){
  .lv-status--pending{background:#3a2f10;color:#f0c96a}
  .lv-status--approved{background:#0f3a24;color:#7fe0a6}
  .lv-pill--out{background:#4a1a16;color:#ffb4ab}
}
:root[data-theme="dark"] .lv-status--pending,body[data-theme="dark"] .lv-status--pending{background:#3a2f10;color:#f0c96a}
:root[data-theme="dark"] .lv-status--approved,body[data-theme="dark"] .lv-status--approved{background:#0f3a24;color:#7fe0a6}
:root[data-theme="dark"] .lv-pill--out,body[data-theme="dark"] .lv-pill--out{background:#4a1a16;color:#ffb4ab}
@media (max-width:560px){
  .lv-req-main{flex-basis:100%}
  .lv-dates{flex-direction:column;gap:0}
}
/* ---- leave calendar (summary view) ---- */
.lv-cal-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 12px}
.lv-cal-month{font-weight:700;font-size:15px;color:var(--text);min-width:150px;text-align:center}
.lv-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.lv-cal-wd{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding-bottom:4px}
.lv-cal-pad{min-height:40px;aspect-ratio:1/1}
.lv-cal-day{position:relative;min-height:40px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--surface2);color:var(--text);font-size:13.5px;text-decoration:none;border:1px solid transparent}
.lv-cal-dn{font-weight:600}
a.lv-cal-day{cursor:pointer;transition:border-color .12s}
a.lv-cal-day:hover{border-color:var(--outline)}
.lv-cal-day.has-appr{background:rgba(11,128,67,.16);font-weight:700}
.lv-cal-day.has-pend{background:rgba(242,183,5,.16)}
.lv-cal-day.is-today{outline:2px solid var(--primary);outline-offset:-2px}
.lv-cal-day.is-sel{border-color:#0b8043;box-shadow:0 0 0 2px rgba(11,128,67,.45)}
.lv-cal-badge{position:absolute;top:3px;right:4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#0b8043;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.lv-cal-dot{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:#c98a00}
.lv-cal-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;font-size:12.5px;color:var(--text)}
.lv-cal-legend>span{display:inline-flex;align-items:center;gap:5px}
.lv-cal-key{width:12px;height:12px;border-radius:4px;display:inline-block}
.lv-cal-key--appr{background:rgba(11,128,67,.6)}
.lv-cal-key--pend{background:rgba(242,183,5,.75)}
.lv-cal-tip{margin-left:auto}
.lv-day{margin-top:12px;padding-top:12px;border-top:1px solid var(--outline-faint)}
.lv-day[hidden]{display:none}
.lv-day-head{font-weight:700;color:var(--text);margin-bottom:6px}
.lv-day-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#0b6b39;margin:9px 0 4px}
.lv-day-sec--pend{color:#8a5a00}
.lv-day-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
.lv-day-row .lv-who-name{font-weight:600;color:var(--text)}
.lv-day-range{font-size:12.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
body[data-theme="dark"] .lv-cal-day.has-appr{background:rgba(28,170,95,.24)}
body[data-theme="dark"] .lv-cal-day.has-pend{background:rgba(242,183,5,.2)}
body[data-theme="dark"] .lv-day-sec{color:#7fe0a6}
body[data-theme="dark"] .lv-day-sec--pend{color:#f0c96a}
@media (prefers-color-scheme:dark){
  body:not([data-theme="light"]) .lv-cal-day.has-appr{background:rgba(28,170,95,.24)}
  body:not([data-theme="light"]) .lv-cal-day.has-pend{background:rgba(242,183,5,.2)}
  body:not([data-theme="light"]) .lv-day-sec{color:#7fe0a6}
  body:not([data-theme="light"]) .lv-day-sec--pend{color:#f0c96a}
}
@media (max-width:560px){.lv-cal{gap:3px}.lv-cal-day,.lv-cal-pad{min-height:34px}.lv-cal-tip{flex-basis:100%;margin-left:0}}

/* ---- Notes (personal notebooks, autosaving) ---- */
.nb-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:801px){.nb-wrap{grid-template-columns:300px minmax(0,1fr);align-items:start}}
.nb-editor{min-width:0;padding:14px}
.nb-list{display:flex;flex-direction:column;gap:8px;min-width:0}
.nb-list-head{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:2px 2px 2px}
.nb-item{display:flex;flex-direction:column;gap:2px;background:var(--surface2);border:1px solid var(--outline-faint);border-radius:12px;padding:11px 13px;text-decoration:none;min-width:0}
.nb-item:hover{border-color:var(--outline)}
.nb-item.active{border-color:var(--primary);background:var(--primary-container)}
.nb-item-title{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-item-snip{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-item-snip em{opacity:.7}
.nb-item-when{font-size:11.5px;color:var(--muted);margin-top:2px}
.nb-form{margin:0}
.nb-editor-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.nb-back{display:none;align-items:center;gap:3px;height:34px;padding:0 10px 0 6px;border-radius:9px;color:var(--primary);font-weight:600;font-size:13.5px;flex:0 0 auto;text-decoration:none}
.nb-back:hover{background:var(--surface2)}
.nb-back .material-icons-round{font-size:20px}
.nb-title{flex:1 1 auto;min-width:0;font-size:18px;font-weight:700;color:var(--text);background:transparent;border:0;border-bottom:2px solid transparent;padding:4px 2px}
.nb-title:focus{outline:none;border-bottom-color:var(--primary)}
.nb-status{flex:0 0 auto;font-size:12px;color:var(--muted);min-width:58px;text-align:right}
.nb-status.saving{color:var(--muted)}
.nb-status.saved{color:#0b8043}
.nb-status.err{color:#d83b40}
.nb-status.dim{color:var(--muted);opacity:.7}
.nb-savebtn{flex:0 0 auto}
.nb-body{width:100%;min-height:52vh;resize:vertical;border:1px solid var(--outline-faint);border-radius:12px;background:var(--surface);color:var(--text);padding:13px 14px;font:15px/1.6 inherit;box-sizing:border-box}
.nb-body:focus{outline:none;border-color:var(--primary)}
.nb-editor-foot{margin-top:12px;display:flex;justify-content:flex-end}
.nb-del{margin:0}
.nb-del-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600}
.nb-del-btn .material-icons-round{font-size:18px}
.nb-del-btn:hover{color:#d83b40;background:var(--surface2)}
body[data-theme="dark"] .nb-status.saved{color:#5fd08a}
/* mobile: one pane at a time — the LIST when browsing, the EDITOR only when a
   notebook is explicitly open (.nb-has-sel). The auto-previewed newest note is
   NOT .nb-has-sel, so on mobile the list stays visible + every notebook reachable. */
@media (max-width:800px){
  .nb-wrap:not(.nb-has-sel) .nb-editor{display:none}
  .nb-has-sel .nb-list{display:none}
  .nb-back{display:inline-flex}
  .nb-body{min-height:46vh}
}

/* ===== hover preview (v61): see a task's details without opening it. Desktop /
   fine-pointer only — on touch you open the task by tapping. One floating card is
   reused (positioned by work.js); built with textContent so user text is XSS-safe. */
.wk-preview{position:fixed;z-index:200;left:0;top:0;max-width:340px;width:max-content;
  background:var(--surface);color:var(--text);border:1px solid var(--outline);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.18);padding:12px 14px;font-size:13px;line-height:1.45;
  pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.wk-preview.show{opacity:1;transform:none}
.wk-preview-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.wk-preview-key{font-weight:700;color:var(--muted);font-size:12px;letter-spacing:.02em}
.wk-pv-badge{font-size:11px;font-weight:700;padding:1px 8px;border-radius:9px;background:var(--surface3);color:var(--text)}
.wk-pv-badge.pri-urgent{background:rgba(215,58,64,.15);color:#c62828}
.wk-pv-badge.pri-high{background:rgba(176,111,0,.16);color:#b06f00}
.wk-preview-title{font-weight:700;font-size:14px;margin-bottom:6px}
.wk-preview-desc{color:var(--muted);margin-bottom:8px;white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wk-preview-meta{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.wk-preview-meta div{display:flex;align-items:center;gap:6px}
.wk-preview-meta .material-icons-round{font-size:15px;opacity:.85}
.wk-preview-meta b{color:var(--text);font-weight:600}
body:not([data-theme="light"]) .wk-pv-badge.pri-high{color:#e3a53a}
body:not([data-theme="light"]) .wk-pv-badge.pri-urgent{color:#ef7a7d}