/* Product workspace: a quiet shell, compact working surfaces, and a shared
   spacing scale. Loaded after legacy component styles during migration. */
:root {
  --bg: #f8f9fb; --bg-2: #fff; --panel: #fff; --panel-2: #f4f6f8;
  --text: #1d2935; --muted: #637181; --border: #e2e7ed; --border-strong: #c9d2dc;
  --accent: #253f50; --accent-soft: #edf2f5; --danger: #a93d36;
  --radius: 8px; --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); padding-left: 208px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [contenteditable]:focus-visible { outline: 2px solid #337c98; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.topbar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 208px; height: 100dvh; padding: 26px 16px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border: 0; border-right: 1px solid var(--border); box-shadow: none; }
.workspace-brand { display: flex; gap: 10px; align-items: center; padding: 0 8px 34px; text-decoration: none; color: #172d3a; font-size: 18px; font-weight: 600; letter-spacing: -.5px; }
.workspace-mark { width: 31px; height: 35px; border: 1px solid #ccd7df; border-radius: 7px; display: grid; place-items: center; color: #385768; font-size: 19px; }
.workspace-team { display: block; font-size: 10px; line-height: 17px; font-weight: 400; letter-spacing: .1px; color: #74818d; }
.topbar-actions { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 5px; margin: 0; width: 100%; }
.nav-caption { color: #85919c; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; padding: 0 13px 9px; }
.nav-item { display: flex; align-items: center; justify-content: space-between; min-height: 40px; width: 100%; text-align: left; border: 0; border-radius: 5px; background: transparent; color: #5e6c79; padding: 9px 13px; font-size: 13px; font-weight: 500; box-shadow: none; }
.nav-item:hover { background: #f5f7f9; color: #203948; }
.nav-item.is-active { background: #edf2f5; color: #243f50; font-weight: 600; }
.nav-count { font: 10px "IBM Plex Mono", monospace; color: #647985; }
.workspace-add.btn { margin: 20px 5px 0; min-height: 35px; font-size: 12px; border-radius: 5px; background: #243f50; border: 1px solid #243f50; color: white; box-shadow: none; }
.topbar-menu { display: block; position: static; margin-top: auto; padding: 30px 0 20px; box-shadow: none; border: 0; background: transparent; }
.workspace-settings summary { padding: 8px 13px; color: #76838e; font-size: 11px; cursor: pointer; }
.workspace-settings .nav-item { min-height: 32px; font-size: 11px; }
.topbar-meta { display: flex !important; flex-direction: column; align-items: flex-start; flex: 0; gap: 8px; padding: 15px 12px 0; margin: 0; border-top: 1px solid var(--border); }
#countPill { background: none; border: 0; padding: 0; border-radius: 0; font: 10px "IBM Plex Mono", monospace; color: #7a8996; }
#savedPill { display: block; min-height: 24px; padding: 0; border: 0; background: transparent; font-size: 11px; font-weight: 400; color: #53796b; box-shadow: none; white-space: normal; text-align: left; }
#savedPill.is-error, #savedPill.is-auth { color: #a53f39; }
#savedPill.is-saving, #savedPill.is-offline, #savedPill.is-local { color: #927443; }
.topbar .menu-btn { display: none; }
.workspace-context { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid var(--border); background: #fff; color: #87929e; font-size: 9px; font-weight: 500; letter-spacing: 1.2px; }
#environmentLabel { letter-spacing: .6px; font-size: 9px; }
.layout { display: block; width: 100%; margin: 0; padding: 0; }
.board, .board.is-attention, .board.is-tasks, .board.is-detail, .board.is-timeline, .board.tl-host { display: block; width: 100%; max-width: none; min-width: 0; padding: 30px 36px 64px; margin: 0; }
.board h1, .tl-toolbar-title h2 { font: 600 27px/1.25 var(--font-body); letter-spacing: -.8px; color: #1a2d3a; margin: 0; }
.btn, .tl-btn { border-radius: 5px; min-height: 33px; box-shadow: none; font-size: 12px; }
.controlbar { position: static; padding: 18px 36px 0; margin: 0; border: 0; background: transparent; flex-wrap: wrap; gap: 10px; }
.cb-stages, .cb-sep { display: none; }
.cb-filters { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
.cb-search, .cb-select, .cb-chip { background: white; border: 1px solid var(--border); min-height: 32px; border-radius: 5px; color: #536677; font-size: 11px; }
.cb-search { max-width: 260px; }
.tiles { display: flex; gap: 12px; margin-bottom: 22px; }
.tile { flex: 1; padding: 0; border: 1px solid var(--border); border-radius: 6px; box-shadow: none; background: #fff; }
.tile-top { padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center; }
.tile-n { grid-column: 2; grid-row: 1; font-size: 22px; font-weight: 500; }
.tile-l { grid-column: 1; grid-row: 1; font-size: 12px; }
.tile-d { display: none; }
.rows { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.prow { padding: 16px; background: white; border: 1px solid var(--border); border-radius: 6px; box-shadow: none; }
.prow:hover { border-color: #b8c7d2; box-shadow: 0 3px 12px #23394b06; }
.pr-lbl { color: #7b8894; font-size: 9px; font-weight: 500; letter-spacing: .6px; }
.pr-val { font-size: 12px; line-height: 1.55; }
.pr-counts { color: #70808d; font-size: 10px; }
.pr-foot { gap: 7px; flex-wrap: wrap; border-top: 1px solid #edf0f3; padding-top: 10px; }
.pr-foot .lk { font-size: 10px; }
.chip, .health { border-radius: 4px; font-size: 9px; padding: 3px 6px; box-shadow: none; }
.grp-head { padding: 16px 0 10px; color: #5c6c79; font-size: 10px; letter-spacing: 1px; }
.grp-desc { font-size: 10px; font-weight: 400; letter-spacing: 0; color: #89939c; }
.grp-n { background: #edf1f4; border: 0; }
.attention-head { margin-bottom: 25px; }
.attention-head .eyebrow { margin: 0 0 9px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #80909c; }
.attention-head select { background: white; border: 1px solid var(--border); border-radius: 5px; padding: 8px 12px; font-size: 12px; }
.focus-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 28px; }
.focus-tabs { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.focus-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 0; color: #75818d; font-size: 12px; }
.focus-tab.is-active { border-color: #345567; color: #294858; font-weight: 600; }
.focus-tab span { margin-left: 5px; font: 10px "IBM Plex Mono", monospace; }
.focus-list { list-style: none; padding: 0; margin: 0; }
.focus-row { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 17px 2px; border-bottom: 1px solid #e7ebef; }
.focus-row input { width: 16px; height: 16px; accent-color: #365a68; }
.focus-row-main { flex: 1; min-width: 0; }
.focus-row-main button { display: block; text-align: left; border: 0; background: none; padding: 0; color: #263f4e; font-size: 13px; line-height: 1.5; }
.focus-row-main small { display: block; color: #7b8894; margin-top: 5px; font-size: 11px; }
.focus-due { font-size: 10px; color: #647985; white-space: nowrap; }
.focus-due.is-late { color: #a9453e; }
.focus-aside { border-left: 1px solid var(--border); padding-left: 25px; }
.focus-aside h2 { color: #85919b; font-size: 10px; letter-spacing: .9px; text-transform: uppercase; margin: 8px 0 17px; }
.focus-aside p, .focus-aside summary { font-size: 11px; color: #71808d; line-height: 1.65; }
.focus-milestone { margin-bottom: 20px; }
.focus-milestone b { display: block; font-size: 12px; color: #334c5b; font-weight: 500; }
.focus-milestone small { color: #82909b; font-size: 10px; }
.focus-aside details { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 15px; }
.review-list { padding-left: 0; list-style: none; }
.review-list li { padding: 8px 0; font-size: 11px; color: #637785; }
.review-list button { border: 0; background: none; color: #294b5e; padding: 0; text-align: left; }
.attention-empty { padding: 25px 0; color: #7a8995; font-size: 12px; }
.tasks-head { margin-bottom: 20px; }
.tasks-head .crumb { display: none; }
.tlist { border: 1px solid var(--border); border-radius: 6px; background: white; }
.titem { border-bottom-color: #e9edf1; }
.trow { gap: 10px; min-height: 58px; padding: 12px 14px; }
.ttext { font-size: 12px; line-height: 1.55; }
.towner, .tdue, .twait, .tprod { font-size: 10px; }
.twait { opacity: 1; width: auto; justify-self: start; border: 0; color: #8a949d; }
.twait:not(.is-on) { font-size: 0; width: 26px; min-height: 25px; }
.twait:not(.is-on)::after { content: '—'; font-size: 12px; }
.twait.is-on { background: #f7f0e5; color: #927544; border: 0; border-radius: 4px; padding: 3px 6px; }
.detail { width: 100%; max-width: none; }
.dhead { padding: 0 0 22px; }
.dmeta, .dlinks { font-size: 11px; }
.dtitle { font-size: 27px; }
.dcols { grid-template-columns: 210px minmax(0,1fr); gap: 24px; }
.dnav { gap: 7px; }
.dphase, .dtab, .dpanel { box-shadow: none; border: 1px solid var(--border); border-radius: 6px; }
.dpanel { padding: 23px; background: #fff; }
.product-summary { border: 1px solid var(--border); border-radius: 6px; margin-top: 20px; background: #fff; gap: 20px; padding: 16px; }
.product-summary span { font-size: 9px; color: #85929e; letter-spacing: .7px; text-transform: uppercase; }
.product-summary b, .product-summary small, .product-summary select { font-size: 12px; }
.product-summary>div:first-child { grid-column: 1 / -1; }
.modal-backdrop, .tl-dialog-backdrop { backdrop-filter: blur(3px); background: #12253545; }
.modal, .tl-dialog { border-radius: 10px; box-shadow: 0 25px 90px #172f4330; border: 1px solid #dbe3eb; }
.modal-head h2, .tl-dialog h3 { font-size: 18px; }
.modal-body .field-label { font-size: 11px; }
@media(min-width:1500px) { .board, .board.tl-host { padding-right: 48px; padding-left: 48px; } }
@media(max-width:1150px) { .focus-layout { grid-template-columns: minmax(0,1fr) 225px; gap: 20px; } .rows { grid-template-columns: 1fr; } }
@media(max-width:900px) {
 body { padding-left: 170px; } .topbar { width: 170px; padding: 22px 10px 16px; }
 .workspace-brand { font-size: 16px; gap: 8px; padding-left: 4px; } .workspace-team { font-size: 9px; }
 .board, .board.is-attention, .board.is-tasks, .board.is-detail, .board.is-timeline, .board.tl-host { padding: 24px 22px 50px; }
 .workspace-context, .controlbar { padding-left: 22px; padding-right: 22px; }
 .focus-layout { grid-template-columns: 1fr; } .focus-aside { border-left: 0; padding: 10px 0; }
 .dcols { display: flex; flex-direction: column; } .dnav { display: flex; flex-wrap: wrap; } .dphase { flex: 1 1 180px; } .dtab { flex: 1 1 100px; }
}
@media(max-width:620px) {
 body { padding-left: 0; padding-top: 59px; }
 .topbar { inset: 0 0 auto; width: 100%; height: 59px; padding: 11px 17px; flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--border); }
 .workspace-brand { padding: 0; font-size: 16px; } .workspace-team { display: none; } .workspace-mark { width: 25px; height: 29px; font-size: 15px; }
 .topbar .menu-btn { display: block; border: 1px solid var(--border); background: white; color: #405968; font-size: 11px; min-height: 30px; }
 .topbar-actions { display: none; position: absolute; top: 58px; left: 0; right: 0; width: 100%; padding: 16px; background: white; border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px #20364815; }
 .nav-open .topbar-actions { display: flex; } .topbar-menu { padding: 12px 0 0; } .topbar-meta { display: none !important; }
 .workspace-context { height: 39px; padding: 0 18px; font-size: 8px; } #environmentLabel { font-size: 8px; }
 .board, .board.is-attention, .board.is-tasks, .board.is-detail, .board.is-timeline, .board.tl-host { padding: 22px 18px 40px; }
 .board h1, .tl-toolbar-title h2 { font-size: 24px; } .controlbar { padding: 14px 18px 0; }
 .attention-head { align-items: flex-start; gap: 15px; } .focus-tabs { gap: 15px; } .focus-tab { font-size: 11px; }
 .focus-row { gap: 9px; } .focus-due { max-width: 65px; white-space: normal; text-align: right; }
 .tiles { gap: 7px; } .tile-top { padding: 10px; } .tile-n { font-size: 18px; } .tile-l { font-size: 10px; }
 .grp-desc { display: none; }
 .dcols { gap: 15px; } .dpanel { padding: 17px; } .product-summary { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media print { body { padding: 0; background: #fff; } .topbar, .workspace-context, .controlbar { display: none !important; } .board, .board.tl-host { padding: 0; } }

.page-description, .tl-toolbar-sub { color: #798895; font-size: 12px; margin-top: 8px; line-height: 1.6; }
.text-link { border: 0; padding: 0; background: none; color: #34576b; font-size: 11px; }
.focus-stage-dot { width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; }
.tl-toolbar { margin-bottom: 25px; gap: 20px; align-items: center; }
.tl-toolbar-title .eyebrow { color: #7e8f9b; font-size: 9px; letter-spacing: 1.4px; margin: 0 0 8px; }
.tl-toolbar-controls { gap: 7px; align-items: center; }
.tl-toolbar-controls .tl-field>span { display: none; }
.tl-field input, .tl-field select { border: 1px solid var(--border); border-radius: 5px; min-height: 32px; font-size: 11px; background: #fff; }
.tl-toolbar-controls .tl-field select { max-width: 170px; }
.tl-toolbar-controls .tl-btn { border: 1px solid var(--border); background: white; min-height: 32px; padding: 6px 10px; font-size: 10px; border-radius: 5px; }
.tl-zoom { border-color: var(--border); border-radius: 5px; }
.tl-zoom-btn { min-height: 30px; padding: 5px 9px; font-size: 10px; background: white; }
.tl-zoom-btn.is-on { background: #edf2f5; color: #28495b; }
.tl-legend { margin-bottom: 15px; font-size: 10px; gap: 17px; color: #82909a; }
.tl-swatch-planned { background: #c5d2d8; border: 0; height: 8px; }
.tl-swatch-actual { height: 8px; background: #456774; }
.tl-scroll { border-radius: 6px; border-color: #d4dce4; background: white; }
.tl-grid { grid-template-columns: 260px minmax(0,1fr); }
.tl-corner { background: #263e4d; color: #c7d2d9; font-size: 9px; letter-spacing: .8px; display: flex; align-items: center; padding: 17px; border-color: #47606d; }
.tl-head { background: #263e4d; border-bottom-color: #47606d; }
.tl-head-grid { min-height: 48px; }
.tl-hcell { padding: 9px 12px; border-right-color: #435867; gap: 3px; }
.tl-hcell-label { color: #f3f6f8; font-family: var(--font-body); font-size: 10px; letter-spacing: 1px; }
.tl-hcell-sub { color: #9aaeba; font-size: 8px; }
.tl-phase { background: #edf1f4; padding: 9px 17px; font-size: 9px; font-weight: 500; color: #748591; letter-spacing: 1.1px; }
.tl-label { padding: 10px 11px; min-height: 54px; gap: 5px; flex-wrap: nowrap; border-right-color: #dbe2e9; }
.tl-product { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 3px 0; font-size: 12px; font-weight: 500; line-height: 1.4; flex: 1; }
.tl-expand { flex-shrink: 0; width: 19px; height: 25px; font-size: 11px; }
.tl-label-actions { width: auto; flex-shrink: 0; }
.tl-mini { border: 0; border-radius: 4px; padding: 3px 5px; min-height: 26px; color: #84929e; font-size: 9px; }
.tl-mini:hover { color: #2c5267; background: #edf3f6; }
.tl-label-stage { background: #fcfdfe; min-height: 36px; padding: 4px 10px 4px 35px; color: #6b7f8e; font-size: 10px; }
.tl-label-stage>span:nth-child(2) { flex: 1; }
.tl-stage-dot { width: 5px; height: 5px; margin-right: 4px; }
.tl-track { min-height: 36px; background-image: var(--tl-lines); }
.tl-bars { min-height: 36px; }
.tl-row:not(.tl-row-stage) .tl-bars { min-height: 54px; }
.tl-row-tools .tl-label { min-height: 29px; background: #f8fafb; padding: 2px 13px 2px 35px; }
.tl-row-tools .tl-track { min-height: 29px; background-color: #f8fafb; }
.tl-plan-note { font-size: 9px; color: #8795a0; padding: 7px 12px; display: block; }
.tl-bar { border-radius: 2px; height: 12px; top: 13px; border: 0; overflow: hidden; }
.tl-bar-planned { background: color-mix(in srgb, var(--bar-color) 32%, white); border-left: 2px solid var(--bar-color); border-right: 3px solid var(--bar-color); z-index: 1; }
.tl-bar-actual { background: var(--bar-color); top: 25px; height: 4px; border-radius: 0; opacity: .95; }
.tl-row:not(.tl-row-stage) .tl-bar-planned { top: 18px; height: 16px; }
.tl-row:not(.tl-row-stage) .tl-bar-actual { top: 35px; height: 4px; }
.tl-bar-caption { display: block; padding: 1px 5px; color: #294553; font-size: 8px; white-space: nowrap; overflow: hidden; }
.tl-row-stage .tl-bar-caption { display: none; }
.tl-mark { width: 9px; height: 9px; top: 21px; border: 1px solid white; background: #1d3949; }
.tl-today { width: 1px; background: #cf846b; opacity: .8; }
.tl-warn { flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; text-align: center; background: #fbefdf; color: #a47d46; line-height: 15px; }
.tl-unscheduled { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; margin-top: 28px; padding: 22px 0 0; }
.tl-unscheduled h3 { font-size: 12px; font-weight: 500; color: #536e7f; }
.tl-unscheduled p { font-size: 11px; color: #83929d; margin: 6px 0 15px; }
.tl-unscheduled ul { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-unscheduled li { border: 1px solid var(--border); border-radius: 5px; background: white; padding: 7px 11px; gap: 10px; }
.tl-unscheduled-name { font-size: 11px; font-weight: 500; }
.tl-dialog { width: min(440px,calc(100vw - 32px)); }
.tl-dialog h3 { color: #253f50; margin-bottom: 20px; }
.tl-dialog .tl-field input, .tl-dialog .tl-field select { min-height: 38px; font-size: 12px; }
.tl-dialog .tl-field { font-size: 11px; }
.tl-fieldset { border: 1px solid #e1e7ec; border-radius: 5px; padding: 12px; }
.tl-fieldset legend { font-size: 10px; color: #7c8e9c; padding: 0 5px; }
.tl-dialog .tl-btn-primary { background: #28495b; color: #fff; }
@media(max-width:1100px) { .tl-toolbar { align-items: flex-start; flex-direction: column; } }
@media(max-width:620px) { .tl-toolbar-controls { gap: 5px; } .tl-toolbar-controls .tl-field select { max-width: 140px; } .tl-grid { grid-template-columns: 210px minmax(0,1fr); } .tl-toolbar-controls [data-tl-expand-all] { display: none; } }
.workspace-dialog { width: min(520px,calc(100vw - 32px)); border: 1px solid #d3dfe7; border-radius: 10px; padding: 26px; max-height: 90dvh; overflow: auto; margin: auto; color: #284150; box-shadow: 0 25px 90px #172f4330; }
.workspace-dialog::backdrop { background: #12253545; backdrop-filter: blur(3px); }
.workspace-dialog h2 { font-size: 21px; letter-spacing: -.5px; margin: 5px 0 22px; }
.workspace-dialog .eyebrow { font-size: 9px; letter-spacing: 1px; color: #7a8c99; text-transform: uppercase; }
.workspace-dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: #6b8090; margin-bottom: 15px; }
.workspace-dialog input:not([type=checkbox]), .workspace-dialog select, .workspace-dialog textarea { width: 100%; border: 1px solid #d9e1e8; border-radius: 5px; padding: 9px 10px; font-size: 12px; color: #2b4758; background: #fff; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-checks { display: flex; flex-wrap: wrap; gap: 15px; }
.form-checks label { flex-direction: row; align-items: center; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.dialog-actions button { padding: 8px 14px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; background: white; color: #496273; }
.dialog-actions .btn-primary { background: #294b5e; color: white; }
.conflict-field { border: 1px solid #dde5eb; border-radius: 5px; margin-top: 18px; padding: 12px; }
.conflict-field legend { font: 10px "IBM Plex Mono",monospace; max-width: 100%; overflow-wrap: anywhere; }
.conflict-field pre { white-space: pre-wrap; max-height: 140px; overflow: auto; font-size: 11px; background: #f5f7f9; padding: 8px; }

.meeting-actions { grid-column:1/-1; display:grid; gap:10px; }
.meeting-actions > span {font-size:12px;color:var(--muted)}
.meeting-action-row {display:grid;grid-template-columns: minmax(160px,1fr) 130px 145px 32px;gap:8px;margin-bottom:8px}
.m-action-add {justify-self:start}
@media(max-width:650px){.meeting-action-row{grid-template-columns:1fr 1fr}.meeting-action-row .action-text{grid-column:1/-1}}

.recovery-diff{padding:10px 0;border-bottom:1px solid var(--border)}
.recovery-diff pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:var(--bg);padding:10px;font-size:12px}

.portfolio-heading{margin-bottom:24px}
.page-description{font-size:13px;color:#637181;line-height:1.6;margin:8px 0 0}
.pr-val,.ttext{font-size:13px}.pr-counts,.focus-row-main small{font-size:11px;color:#637181}
.pr-lbl,.grp-head{color:#5e6f7e}.pr-owner{font-size:11px;color:#637181}
.tl-row-milestone .tl-label,.tl-row-milestone .tl-track{min-height:30px;background-color:#fafbfc}
.tl-row-milestone .tl-label{padding-left:34px}

.summary-outcome > b{font-weight:400!important;font-size:14px!important;line-height:1.6!important;max-width:90ch}
.summary-background{margin-top:10px;color:#637181;font-size:12px}
.summary-background summary{cursor:pointer;color:#365769}
.summary-background > div{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;max-height:300px;overflow:auto;padding:14px 0;font-weight:400}

.product-summary>div,.product-summary>label{padding:5px;gap:5px}
.summary-wrap>summary,.stage-navigation>summary{padding:13px 0;font-size:12px;color:#385768;cursor:pointer}
.stage-navigation{min-width:0}
.stage-navigation>summary span{display:block;color:#768593;font-size:11px;margin-top:5px}
@media(min-width:981px){.stage-navigation>summary{display:none}}
@media(min-width:621px){.summary-wrap>summary{display:none}}
@media(max-width:620px){.summary-wrap{border-bottom:1px solid var(--border);margin-top:8px}.summary-wrap .product-summary{margin-top:0}.dhead{padding-bottom:8px;margin-bottom:6px}.product-summary small{font-size:12px}}

.recovery-dialog{width:min(760px,calc(100vw - 32px));padding:0}
.recovery-dialog>.modal{width:100%;max-width:none;max-height:none;border:0;box-shadow:none;background:white}
@media(max-width:620px){.topbar-meta{display:contents!important}#countPill{display:none}#savedPill{position:fixed;top:19px;right:76px;max-width:105px;font-size:10px;min-height:22px}}

.trow .twait,.trow .tdue.is-empty,.trow .tmore{opacity:1!important;visibility:visible!important;font-size:11px!important;color:#607585}
.trow .twait{min-width:52px;min-height:28px;border:1px solid #dce4ea;background:#f8fafb;border-radius:4px}
.trow .twait::after,.trow .twait::before{content:none!important}
.trow .twait.is-on{background:#fff6e4;color:#8c6328!important;border-color:#e9d7b2}
.trow .tdue.is-empty{border:1px dashed #cbd6de;border-radius:4px;padding:4px;min-height:28px}
.trow .tmore{font-size:18px!important;min-width:26px;min-height:28px}

.pr-star{border:0;background:none;color:#718493;font-size:17px;padding:0 3px;min-height:28px;min-width:26px}
.pr-star[aria-pressed="true"]{color:#af812c}
.detail-edit{margin-left:auto}

/* ============================================================
   DENSITY + RAIL
   The table was ~59px per row with a 1100px task column and four
   crammed columns on the right. Tighter rows, capped content width,
   and column widths that reflect what each one holds.
   ============================================================ */

/* --- collapsible rail --- */
.rail-toggle {
  position: absolute; left: 168px; top: 14px; z-index: 60;
  width: 20px; height: 20px; line-height: 1; padding: 0;
  border: 1px solid var(--border, #e6e7e9); border-radius: 5px;
  background: #fff; color: var(--muted-2, #7c828a); cursor: pointer;
  font-size: 11px;
}
.rail-toggle:hover { color: var(--text, #16181b); border-color: var(--border-strong, #d3d6d9); }
body.rail-collapsed .topbar { width: 52px; }
body.rail-collapsed .rail-toggle { left: 16px; }
body.rail-collapsed .nav-item > span:first-child,
body.rail-collapsed .nav-caption,
body.rail-collapsed .workspace-team,
body.rail-collapsed .workspace-settings,
body.rail-collapsed .workspace-add,
body.rail-collapsed .topbar-meta { display: none; }
body.rail-collapsed .workspace-brand { justify-content: center; }
@media (max-width: 900px) { .rail-toggle { display: none; } }

/* --- task table density --- */
.board.is-tasks { max-width: 1180px; }
.tasks-head { margin-bottom: 12px; }
.tlist { border-radius: 8px; }
.trow {
  grid-template-columns: 26px minmax(0, 1fr) 132px 86px 74px 68px 24px;
  gap: 8px; padding: 5px 12px; min-height: 0;
}
.titem .trow { align-items: center; }
.trow.thead { padding: 6px 12px; }
.ttext { font-size: 12.5px; line-height: 1.35; }
.tgrp { margin-bottom: 14px; }
.tgrp-head { margin-bottom: 6px; }

/* --- add a task --- */
.task-add {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 140px auto;
  gap: 8px; margin: 0 0 16px; align-items: center;
}
.task-add .in, .task-add .cb-select { font-size: 12.5px; padding: 7px 10px; }
.task-add .ta-text { border-style: dashed; }
.task-add .btn { padding: 7px 14px; font-size: 12.5px; }
@media (max-width: 760px) {
  .task-add { grid-template-columns: 1fr 1fr; }
  .task-add .ta-text { grid-column: 1 / -1; }
}

/* --- filter bar: quieter now that it holds one or two things --- */
.controlbar { padding: 8px 0; }
.cb-filters { gap: 8px; }
.cb-search { min-width: 240px; font-size: 12.5px; padding: 6px 10px; }
.cb-select, .cb-chip { font-size: 12px; padding: 6px 10px; }
.cb-filters > [hidden] { display: none !important; }

/* --- the focus tabs and grouping segment, matched to each other --- */
.seg-b { font-size: 12px; padding: 5px 12px; }

/* Product names were truncating to "Com…", which tells you nothing. */
.trow { grid-template-columns: 26px minmax(0, 1fr) 176px 84px 74px 68px 24px; }
.tlist-head { border: 0; background: none; margin-bottom: 2px; }
.tlist-head .trow { background: none; border: 0; }
.tlist-head .titem { border: 0; }
.tprod span { max-width: 168px; }

/* ============================================================
   SHELL v3 — horizontal top nav.
   The left rail cost 190px of the width the task table needed, the
   collapse left a dead gutter, and the "P" mark plus the
   PRODUCT WORKSPACE / Team workspace strip carried no information.
   ============================================================ */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  width: auto; height: auto; min-height: 52px;
  padding: 0 22px; border: 0; border-bottom: 1px solid var(--border, #e6e7e9);
  background: #fff;
}
.tb-brand {
  font-size: 14px; font-weight: 650; letter-spacing: -.008em;
  color: var(--text, #16181b); white-space: nowrap;
}
.tb-tabs { display: flex; gap: 2px; justify-self: center; }
.tb-tabs .nav-item {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--muted, #52585f);
  padding: 7px 14px; border-radius: 7px; white-space: nowrap;
}
.tb-tabs .nav-item:hover { background: var(--bg-3, #f2f3f4); color: var(--text, #16181b); }
.tb-tabs .nav-item.is-active {
  background: var(--bg-3, #f2f3f4); color: var(--text, #16181b); font-weight: 650;
}
.tb-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.tb-right .btn { font-size: 12.5px; padding: 7px 13px; }
.tb-more { position: relative; }
.tb-more > summary {
  list-style: none; cursor: pointer; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 6px;
  color: var(--muted-2, #7c828a); font-size: 15px; line-height: 1;
}
.tb-more > summary::-webkit-details-marker { display: none; }
.tb-more > summary:hover { background: var(--bg-3, #f2f3f4); color: var(--text, #16181b); }
.tb-more-menu {
  position: absolute; right: 0; top: 32px; min-width: 190px; z-index: 60;
  background: #fff; border: 1px solid var(--border, #e6e7e9); border-radius: 8px;
  padding: 5px; display: grid; gap: 1px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
}
.tb-more-menu .nav-item {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 12.5px; color: var(--muted, #52585f);
  padding: 7px 10px; border-radius: 6px; width: 100%;
}
.tb-more-menu .nav-item:hover { background: var(--bg-3, #f2f3f4); color: var(--text, #16181b); }

/* the rail is gone, so nothing is offset by it any more */
.workspace-brand, .nav-caption, .workspace-settings, .workspace-add,
.rail-toggle, .menu-btn, .topbar-meta { display: none !important; }
body { padding-left: 0 !important; }
.board.is-list, .board.is-detail, .board.is-tasks, .board.is-timeline {
  margin-left: auto; margin-right: auto; padding-left: 22px; padding-right: 22px;
}
.controlbar { padding: 9px 22px; border-bottom: 1px solid var(--border, #e6e7e9); }

.save-pill {
  appearance: none; background: none; border: 0; cursor: default;
  font: inherit; font-size: 11px; color: var(--muted-2, #7c828a); padding: 0 2px;
}

@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto; row-gap: 6px; padding: 8px 14px; }
  .tb-tabs { grid-column: 1 / -1; justify-self: start; overflow-x: auto; }
  .board.is-list, .board.is-detail, .board.is-tasks { padding-left: 14px; padding-right: 14px; }
  .controlbar { padding: 8px 14px; }
}

/* Search lives in the header now; the control bar only carries Starred. */
.tb-search {
  min-width: 150px; max-width: 190px; font-size: 12.5px; padding: 6px 10px;
  border: 1px solid var(--border-strong, #d3d6d9); border-radius: 7px; background: #fff;
}
.tb-search:focus { outline: none; border-color: var(--accent, #3A4F5C); }
.controlbar { padding: 7px 22px; }
.controlbar:not(:has(.cb-chip:not([hidden]))) { display: none; }

/* page head: title, focus tabs and grouping on one line where there is room */
.tasks-head .dtitle { font-size: 20px; }
.tasks-head { margin-bottom: 10px; }
.board.is-tasks { padding-top: 16px; }
.task-add { margin-bottom: 12px; }
.tgrp-head { font-size: 9.5px; }

#countPill { display: none !important; }
/* Starred reads as part of the page, not a floating bar above it. */
.controlbar { border-bottom: 0; padding: 10px 22px 0; }
.cb-chip {
  border: 1px solid var(--border-strong, #d3d6d9); border-radius: 999px;
  background: #fff; font-size: 11.5px; padding: 4px 11px; cursor: pointer;
}
.cb-chip[aria-pressed="true"] {
  background: var(--bg-3, #f2f3f4); border-color: var(--muted-2, #7c828a);
  color: var(--text, #16181b); font-weight: 600;
}

/* Bridge-down warning. Amber, not red: the board is saving fine, only the
   mirror to Google is broken, so this is a warning and not an error. */
.bridge-banner {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 22px; font-size: 12.5px; line-height: 1.4;
  color: #7a5320; background: #fdf6ec; border-bottom: 1px solid #e8d5b5;
}
.bridge-banner b { font-weight: 650; }
.bb-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #b4801f; flex: 0 0 auto;
}
.bb-retry {
  margin-left: auto; font: inherit; font-size: 12px; font-weight: 600;
  color: #7a5320; background: #fff; border: 1px solid #e0c79b;
  border-radius: 6px; padding: 4px 11px; cursor: pointer; white-space: nowrap;
}
.bb-retry:hover:not(:disabled) { background: #fbf0dd; }
.bb-retry:disabled { opacity: .6; cursor: default; }
.bb-x {
  font: inherit; font-size: 15px; line-height: 1; color: #b08a52;
  background: none; border: 0; cursor: pointer; padding: 0 2px;
}
.bb-x:hover { color: #7a5320; }
@media (max-width: 700px) { .bridge-banner { padding: 8px 14px; flex-wrap: wrap; } }

/* ============================================================
   CARD v4 — three bands, and colour that means something.
   The old card was one flat run of nine same-weight chips with the
   next task cut mid-word by a one-line ellipsis. Bands: who it is,
   where it is, what is happening. Colour is spent on three things
   only: the stage, an overdue date, and a blocked/paused flag.
   Everything on it edits in place.
   ============================================================ */

.rows { gap: 14px; }
.prow {
  padding: 0; border-left-width: 3px; border-radius: 8px;
  display: flex; flex-direction: column;
}
.prow:hover { border-color: var(--border-strong, #d3d6d9); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }

/* Starred products carry a full ring, not a slightly different star glyph.
   Yonatan could not tell them apart at a glance, which is the only thing
   starring is for. */
.prow.is-star { border-color: #c8a04a; box-shadow: inset 0 0 0 1px #dcbd7c; }
.prow.is-star:hover { border-color: #b98f36; box-shadow: inset 0 0 0 1px #c8a04a, 0 1px 2px rgba(15, 23, 42, .05); }

/* --- band 1: who it is --- */
.pr-head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 11px 13px 0; margin: 0;
}
.pr-head .card-name {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 14.5px; font-weight: 640; line-height: 1.3; letter-spacing: -.006em;
  color: var(--text, #16181b);
  border-radius: 4px; padding: 1px 3px; margin-left: -3px; cursor: text;
  overflow-wrap: anywhere;
}
.pr-head .card-name:hover { background: var(--bg-3, #f2f3f4); }
.pr-head .card-name:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-soft, #edf2f5); outline: none; }
.pr-star { order: -1; font-size: 14px; padding: 0; min-width: 18px; min-height: 18px; color: #b9c0c7; }
.pr-star:hover { color: #8b939b; }
.pr-star[aria-pressed="true"] { color: #c8a04a; }

/* Priority is a button now, so it can be set without the modal. */
.pr-head .prio {
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  border-radius: 4px; padding: 2px 5px; line-height: 1.3; cursor: pointer;
}
.pr-head .prio.is-none {
  background: none; border: 1px dashed var(--border-strong, #d3d6d9);
  color: var(--muted-2, #7c828a); font-weight: 500; opacity: 0;
}
.prow:hover .pr-head .prio.is-none, .pr-head .prio.is-none:focus-visible { opacity: 1; }

/* --- band 2: where it is --- */
.pr-where {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 13px 0;
}
/* A solid coloured pill per card turned the list into confetti. The stage
   colour survives as a dot; the pill itself stays quiet. */
.pr-stage {
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-3, #f2f3f4); color: #3d444b;
  border: 1px solid transparent; border-radius: 5px; padding: 3px 7px;
}
.pr-stage:hover { border-color: var(--border-strong, #d3d6d9); background: #fff; }
.pr-stage i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c, #94a3b8);
  flex: 0 0 auto; opacity: 1;
}
.pr-stage b {
  font-weight: 500; font-size: 9.5px; letter-spacing: 0;
  color: var(--muted-2, #7c828a); font-variant-numeric: tabular-nums;
}
.pr-where .pr-owner {
  margin: 0; font-size: 11.5px; color: var(--muted, #52585f);
  border-radius: 4px; padding: 1px 4px; cursor: text; min-width: 8px;
}
.pr-where .pr-owner:hover { background: var(--bg-3, #f2f3f4); }
.pr-where .pr-owner:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-soft, #edf2f5); outline: none; }
.pr-owner.is-empty::before {
  content: attr(data-ph); color: var(--muted-2, #7c828a); font-size: 11px; opacity: 0;
}
.prow:hover .pr-owner.is-empty::before, .pr-owner.is-empty:focus::before { opacity: 1; }
.pr-owner:focus::before { content: none; }

.pr-where .stale, .pr-head .flag, .pr-head .health {
  font-size: 10px; font-weight: 600; border-radius: 4px; padding: 2px 6px;
  text-transform: none; letter-spacing: 0;
}
.pr-flagline {
  margin: 8px 13px 0; padding: 6px 9px; border-radius: 5px;
  background: #fdf6ec; border: 1px solid #f0e2c8;
  color: #7a5320; font-size: 11.5px; line-height: 1.45;
}

/* --- band 3: what is happening --- */
.pr-body { padding: 11px 13px 0; display: grid; gap: 7px; }
.pr-line {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 3px 9px;
  align-items: center;
}
/* The bar, the count and the next missing item share one row inside column 2.
   Absolutely positioning the count off the bar's width put "1/3" on top of the
   checklist text as soon as a stage name got long. */
.pr-prog { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pr-lbl {
  margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #949ba2; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-prog .bar {
  flex: 0 0 auto; width: 56px; height: 4px; margin: 0; border-radius: 999px;
  background: #e9ebee; overflow: hidden; box-shadow: none;
}
.pr-prog .bar > span { background: var(--s); }
.pr-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--muted, #52585f);
  font-variant-numeric: tabular-nums;
}
.pr-note {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 1.4;
  color: var(--muted, #52585f);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-line > .pr-note { grid-column: 2; }
.pr-note.is-dim { color: var(--muted-2, #7c828a); }

/* --- the task list: every open task, right on the card ---
   These rows are deliberately quieter than the detail page's. The full row puts
   five chips under every task, which on a card showing every task is more
   chrome than content. A tick, the text, the date. Nothing else. */
.pr-line.is-tasks { align-items: start; }
/* The label doubles as the fold control, so the whole band collapses to its
   first task without stealing a row for a button. */
.pr-tasks-toggle {
  display: flex; align-items: center; gap: 4px;
  font: inherit; font-size: 9px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #949ba2; line-height: 1.4;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.pr-tasks-toggle:hover { color: var(--muted, #52585f); }
.pr-morelink {
  grid-column: 2; justify-self: start; margin-top: 4px; padding: 0;
  font: inherit; font-size: 11px; color: var(--muted-2, #7c828a);
  background: none; border: 0; cursor: pointer;
}
.pr-morelink:hover { color: var(--text, #16181b); text-decoration: underline; }
.pr-tasks {
  grid-column: 2; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 168px; overflow-y: auto; overscroll-behavior: contain;
}
.pr-tasks::-webkit-scrollbar { width: 6px; }
.pr-tasks::-webkit-scrollbar-thumb { background: #dfe2e6; border-radius: 999px; }
.pt {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) 16px; gap: 1px 8px;
  align-items: start;
}
/* Priority is a stripe, not another chip: the row already carries a tick, the
   text and a date, and a fourth coloured token per task turns the list to soup. */
.pt.prio-p1 { border-left: 2px solid #b4342c; margin-left: -6px; padding-left: 4px; }
.pt.prio-p2 { border-left: 2px solid #A97C50; margin-left: -6px; padding-left: 4px; }
.pt.prio-p3 { border-left: 2px solid #d3d6d9; margin-left: -6px; padding-left: 4px; }
.pt-menu {
  grid-row: 1; grid-column: 3; justify-self: end; margin-top: -1px;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted-2, #7c828a); cursor: pointer;
  font-size: 13px; line-height: 1; opacity: 0;
}
.prow:hover .pt-menu, .pt-menu:focus-visible { opacity: 1; }
.pt-menu:hover { background: var(--bg-3, #f2f3f4); color: var(--text, #16181b); }
.pt-check {
  grid-row: 1 / span 2; margin-top: 2px;
  width: 14px; height: 14px; border-radius: 4px; padding: 0;
  border: 1.5px solid #c6ccd2; background: transparent; cursor: pointer;
}
.pt-check:hover { border-color: var(--s); background: color-mix(in srgb, var(--s) 12%, transparent); }
.pt-text {
  font-size: 12.5px; line-height: 1.4; color: var(--text, #16181b); cursor: text;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  border-radius: 4px; padding: 1px 4px; margin-left: -4px;
}
.pt-text:hover { background: var(--bg-3, #f2f3f4); }
.pt-text:focus {
  -webkit-line-clamp: unset; display: block; white-space: pre-wrap;
  background: #fff; box-shadow: 0 0 0 2px var(--accent-soft, #edf2f5); outline: none;
}
.pt-when {
  grid-column: 2; font-size: 11px; color: var(--muted-2, #7c828a);
  font-variant-numeric: tabular-nums;
}
.pt-due { font-weight: 600; color: var(--muted, #52585f); cursor: pointer; border-radius: 3px; padding: 0 2px; }
.pt-due:hover { background: var(--bg-3, #f2f3f4); }
.pt-due.is-late { color: #b4342c; font-weight: 700; }
.pt-due.is-none { font-weight: 400; color: var(--muted-2, #7c828a); }
.pt.is-waiting .pt-text { color: var(--muted, #52585f); }
.pt.is-backlog { opacity: .62; }

/* steps, and the two quick-adds */
.pt .task-subcount { font-size: 10px; padding: 0 5px; vertical-align: 1px; }
.pt .subtask-list { grid-column: 2 / -1; margin: 4px 0 0; padding-left: 0; gap: 4px; }
.pt .subtask-text { font-size: 11.5px; }
.pt .subtask-add, .pt .subtask-quickadd { grid-column: 2 / -1; justify-self: start; margin-top: 4px; }
.pt .subtask-add {
  font: inherit; font-size: 10.5px; color: var(--muted-2, #7c828a);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.pt .subtask-add:hover { color: var(--text, #16181b); text-decoration: underline; }
.pr-line.is-tasks .task-quickadd {
  grid-column: 2; width: 100%; margin-top: 7px; font-size: 11.5px; padding: 4px 7px;
  border-radius: 6px;
}

/* --- "To finish" opens the stage checklist in place --- */
.pr-checks-toggle {
  font: inherit; text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; border-radius: 4px;
}
.pr-checks-toggle:hover .pr-note { color: var(--text, #16181b); }
/* The note stops growing inside the toggle so the caret sits against the text
   it belongs to, not stranded at the far edge of the card. */
.pr-checks-toggle .pr-note { flex: 0 1 auto; }
.pr-caret { flex: 0 0 auto; margin-right: auto; font-size: 11px; line-height: 1; color: #a9b0b7; }
.pr-checks-toggle:hover .pr-caret { color: var(--muted, #52585f); }
.pr-checks {
  grid-column: 2; list-style: none; margin: 5px 0 1px; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.pc { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.pc-check {
  margin-top: 1px; width: 14px; height: 14px; border-radius: 4px; padding: 0;
  border: 1.5px solid #c6ccd2; background: transparent; cursor: pointer;
  font-size: 10px; line-height: 1; color: #fff; display: grid; place-items: center;
}
.pc-check:hover { border-color: var(--s); }
.pc-check.is-on { background: var(--s); border-color: var(--s); }
.pc-text { font-size: 12px; line-height: 1.4; color: var(--muted, #52585f); overflow-wrap: anywhere; }
.pc.is-done .pc-text { color: var(--muted-2, #7c828a); text-decoration: line-through; }
.pc.is-skip .pc-text { text-decoration: none; font-style: italic; }
.pc-tag, .pc-val {
  font-size: 10.5px; color: var(--muted-2, #7c828a); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.pc-tag { font-style: italic; }

/* --- foot --- */
.pr-foot {
  margin: 11px 0 0; margin-top: auto; padding: 8px 13px; gap: 10px;
  border-top: 1px solid #eef0f2; background: #fcfcfd;
  border-radius: 0 0 6px 6px; align-items: center;
}
.pr-counts { margin: 0; font-size: 11px; color: var(--muted-2, #7c828a); }
.pr-counts b { font-weight: 650; color: var(--muted, #52585f); }
.pr-foot .lk {
  font-size: 11px; color: var(--muted, #52585f); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.pr-foot .lk:hover { color: var(--accent, #3A4F5C); text-decoration: underline; }
.pr-edit { margin-left: auto; font-size: 11px; color: var(--muted-2, #7c828a); }
.pr-go { font-size: 11.5px; }
@media (max-width: 620px) {
  .pr-line { grid-template-columns: 1fr; }
  .pr-tasks, .pr-checks { grid-column: 1; }
}

/* --- the funnel under each phase tile, back again --- */
.tstages { border-top: 1px solid var(--border, #e6e7e9); padding: 4px 5px 5px; display: grid; gap: 0; }
.tstage {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: 0; border-radius: 4px; padding: 3px 7px;
  font: inherit; font-size: 11px; color: var(--muted, #52585f); text-align: left;
}
.tstage:hover { background: var(--bg-3, #f2f3f4); color: var(--text, #16181b); }
.tstage.is-on { background: var(--bg-3, #f2f3f4); color: var(--text, #16181b); font-weight: 600; }
.tstage i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.tstage span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tstage b { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 10.5px; }
.tstage.is-zero { color: #a8aeb4; }
.tstage.is-zero b { font-weight: 400; }
.tile { align-self: start; }
.tile-top { padding: 12px 14px 10px; }

/* ============================================================
   TASKS PAGE — three focus tabs (Needs info is gone) and a
   product filter that takes more than one product at a time.
   ============================================================ */
.tasks-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.msel { position: relative; }
.msel-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; color: var(--muted, #52585f);
  background: #fff; border: 1px solid var(--border-strong, #d3d6d9);
  border-radius: 7px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.msel-btn:hover { color: var(--text, #16181b); }
.msel-btn.is-on { color: var(--text, #16181b); font-weight: 600; background: var(--bg-3, #f2f3f4); }
.msel-btn i { font-size: 9px; color: var(--muted-2, #7c828a); }
/* The button sits at the right edge of the controls row, so a left-anchored
   menu ran off the page and clipped every product name and count. */
.msel-menu {
  position: absolute; right: 0; left: auto; top: 34px; z-index: 70; min-width: 264px;
  max-height: 340px; overflow: auto; padding: 5px;
  background: #fff; border: 1px solid var(--border, #e6e7e9); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.msel-acts {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 8px 7px; margin-bottom: 3px; border-bottom: 1px solid var(--border, #e6e7e9);
  font-size: 10.5px; color: var(--muted-2, #7c828a);
}
.msel-acts button {
  font: inherit; font-size: 11px; font-weight: 600; color: var(--accent, #3A4F5C);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.msel-acts button:disabled { color: #b9c0c7; cursor: default; }
.msel-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 6px; font-size: 12px; color: var(--muted, #52585f); cursor: pointer;
}
.msel-opt:hover { background: var(--bg-3, #f2f3f4); }
.msel-opt.is-on { color: var(--text, #16181b); font-weight: 550; }
.msel-opt input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent, #3A4F5C); cursor: pointer; }
.msel-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.msel-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-opt b { font-weight: 500; font-size: 11px; color: var(--muted-2, #7c828a); font-variant-numeric: tabular-nums; }

/* --- delete a step, from the tasks table and from a product card --- */
.tsub { position: relative; justify-content: flex-start; }
/* The step text must not stretch, or the delete control lands 600px away at the
   far edge of the table and reads as belonging to the row, not the step. */
.tsub .stext { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 60px); }
.sdel {
  font: inherit; font-size: 12px; line-height: 1; color: #b9c0c7;
  background: none; border: 0; padding: 2px 5px; cursor: pointer;
  opacity: 0; flex: 0 0 auto; border-radius: 4px;
}
.tsub:hover .sdel, .sdel:focus-visible { opacity: 1; }
.sdel:hover { color: #b4342c; background: #fdf1f0; }
.subtask.is-done .subtask-text { text-decoration: line-through; opacity: .55; }
.subtask-check.is-on { color: var(--accent, #3A4F5C); }

/* ============================================================
   DELETE = DO IT, THEN OFFER UNDO
   Every delete used to raise a browser confirm (or grow a
   confirm bar under the row). The dialog was paid on every
   delete including the ones you meant, and it could not be
   styled, positioned, or dismissed with anything but the mouse.
   ============================================================ */
.toast.has-action {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 16px;
}
.toast-msg { min-width: 0; }
.toast-act {
  font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap;
  color: var(--accent, #3A4F5C); background: var(--bg-3, #f2f3f4);
  border: 1px solid var(--border-strong, #d3d6d9); border-radius: 7px;
  padding: 5px 12px; cursor: pointer;
}
.toast-act:hover { background: #fff; border-color: var(--accent, #3A4F5C); }

/* A menu row that destroys something should not look like the rows that do not. */
.stage-opt.is-danger { color: #b4342c; }
.stage-opt.is-danger:hover { background: #fdf1f0; }
.stage-opt.is-danger .stage-dot { display: none; }

/* inline replacement for the "New checklist item" prompt() */
.ck-add-in { width: 100%; margin-top: 4px; font-size: 12.5px; padding: 7px 10px; }

/* ============================================================
   INLINE FORM POPOVER — the last of the window.prompt calls.
   prompt() blocked the page, could not sit next to the control
   you clicked, and on a two-value edit (a link's URL then its
   label) it stacked two dialogs with no way back to the first.
   ============================================================ */
.stage-pop.is-form { min-width: 268px; max-width: 320px; padding: 12px; cursor: default; }
.fp-title {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 600; color: var(--muted, #52585f);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-body { display: grid; gap: 10px; }
.fp-field { display: grid; gap: 4px; }
.fp-field > span {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #949ba2;
}
.fp-field .in {
  width: 100%; font: inherit; font-size: 12.5px; padding: 7px 9px;
  border: 1px solid var(--border-strong, #d3d6d9); border-radius: 6px;
  background: #fff; color: var(--text, #16181b);
}
.fp-field .in:focus { outline: none; border-color: var(--accent, #3A4F5C); }
.fp-field textarea.in { resize: vertical; min-height: 46px; line-height: 1.45; }
.fp-hint { font-size: 10.5px; color: var(--muted-2, #7c828a); }
.fp-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 1px; }
.fp-actions button {
  font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.fp-cancel {
  background: none; border: 1px solid transparent; color: var(--muted-2, #7c828a);
}
.fp-cancel:hover { color: var(--text, #16181b); border-color: var(--border, #e6e7e9); }
.fp-save {
  background: var(--accent, #3A4F5C); border: 1px solid var(--accent, #3A4F5C);
  color: #fff; font-weight: 600;
}
.fp-save:hover { filter: brightness(1.1); }