/* DTS Traceboard — additions to the mockup design system for the live app. */

/* ---------- Shell ---------- */
.popover{max-height:72vh;overflow:auto}
.pop-foot{display:flex;justify-content:space-between;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--border);margin-top:4px}
.pop-empty{padding:14px 10px;color:var(--text-3);font-size:13px}
.rail-signout{color:var(--rail-text);width:100%;justify-content:flex-start;padding-inline:6px}
.rail-signout:hover{background:var(--rail-hover);color:#fff}
.nav a{text-decoration:none}
.toast{animation:toast-in .25s ease-out}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}
a.plain{color:inherit}
.back-link{display:inline-flex;margin-bottom:14px;font-size:13px;color:var(--text-3)}
.inline-edit{font-size:12px;font-weight:500;margin-left:8px}
.tools-col{display:flex;flex-direction:column;gap:8px}
.summary-lead{margin:-12px 0 22px}

/* ---------- Empty and error states ---------- */
.empty-state{text-align:center;padding:48px 24px;max-width:620px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.card.empty-state{max-width:none}
.empty-ic{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-ink);margin-bottom:6px}
.timeline-empty{padding:18px 20px;color:var(--text-3);font-size:13.5px}

/* ---------- Program cards ---------- */
.program-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:20px}
.program-card{padding:20px;display:flex;flex-direction:column;gap:16px;color:var(--text);transition:box-shadow .15s,border-color .15s}
a.program-card:hover{text-decoration:none;box-shadow:var(--shadow);border-color:var(--border-strong)}
.program-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.program-card h2{font-size:17px;font-weight:600;line-height:1.35;margin-top:8px}
.program-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border);padding-top:14px;margin-top:auto}
.program-foot>span,.program-foot>a{display:inline-flex;align-items:center;gap:6px}

/* ---------- Overview ---------- */
.journey-block+.journey-block{border-top:1px dashed var(--border);margin-top:8px}
.journey-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;margin:16px 0 0}
.journey-title .muted{margin-left:auto;font-weight:500}
.journey-block .journey{padding-top:50px}
.j-gate{cursor:pointer;text-decoration:none}
.j-gate:hover{text-decoration:none}
.j-label{overflow:hidden}
.j-label b,.j-label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.scope-grid>section{padding:16px 20px 18px}
.scope-grid>section+section{border-left:1px solid var(--border)}
.scope-list{margin-top:8px}
.scope-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--text)}
.scope-list li:first-child{border-top:0}
.scope-ic{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.scope-ic.in{background:var(--green-soft);color:var(--green-ink)}
.scope-ic.out{background:var(--surface-2);color:var(--text-3);box-shadow:inset 0 0 0 1px var(--border)}

/* ---------- Roadmap (dates positioned from the server) ---------- */
.rm-weeks{grid-template-columns:repeat(var(--weeks,12),1fr)}
.rm-tl{background-size:calc(100% / var(--weeks,12)) 100%}
.rm-tl::after{left:var(--today-pos,-10%)}
.rm-tl .bar-plan,.rm-tl .bar-act{left:var(--l);width:var(--w)}
.rm-tl .tl-gate{left:var(--l)}
.due-dot{position:absolute;top:50%;left:var(--l);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--muted)}
.rm-name a.ttl{color:inherit}
.rm-name a.ttl:hover{color:var(--primary-ink)}
.row-tools{margin-left:auto;display:inline-flex;gap:10px;padding-left:10px;font-size:12px;font-weight:500;opacity:0;transition:opacity .15s;white-space:nowrap}
.rm-row:hover .row-tools,.row-tools:focus-within{opacity:1}
@media (hover:none){.row-tools{opacity:1}}
.leaf{color:var(--green)}
.ai-ic.done{color:#fff}
.ai-check{width:10px;height:10px;stroke-width:3}

/* ---------- Deliverables ---------- */
.deliv-link{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.deliv-sub{display:block;margin-top:4px}
.progress-cell{display:grid;grid-template-columns:1fr 40px;gap:10px;align-items:center}
.progress-cell .num{text-align:right}
.leaf-inline{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--bg-tint);font-size:13px;color:var(--text-2)}
.tl-text,.feed-body{white-space:pre-line}
.feed-body{font-size:13px;color:var(--text-2);margin-top:6px}
.tl-author{font-size:12px;color:var(--text-3);margin-top:8px}
.tl-delete{margin-left:auto}
.tl-delete .icon-btn{width:26px;height:26px}
.feed-item.unread{background:var(--primary-soft)}

/* ---------- KPIs ---------- */
.radar-wrap.no-radar{grid-template-columns:minmax(0,1fr)}
.kpi-foot{font-size:12px;color:var(--text-3);margin-top:6px}

/* ---------- Approvals ---------- */
.signed.returned::after{background:var(--amber-dot)}
.stamp.returned{color:var(--amber)}

/* ---------- Forms ---------- */
.form-page{max-width:900px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.four{grid-template-columns:1fr 1fr 1fr auto;align-items:end}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;min-width:0}
.field-hint{font-size:12px;color:var(--text-3);margin-top:5px}
.field-error{color:var(--danger);font-size:12px;margin-top:5px}
.field-error:empty{display:none}
.input-validation-error{border-color:var(--danger)}
.form-alert.validation-summary-valid{display:none}
.form-alert.validation-summary-errors{padding:10px 14px;border-radius:10px;background:var(--danger-soft);color:var(--danger);margin-bottom:16px;font-size:13px}
.form-alert ul{margin:0}
.form-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.form-foot{display:flex;gap:8px;align-items:center;padding:14px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
.spacer{flex:1}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft)}
.switch-row{display:flex;align-items:center;gap:10px}
.measure-box{border:1px solid var(--border);border-radius:12px;padding:12px 16px 16px;margin:18px 0 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.measure-box legend{font-size:12.5px;font-weight:600;color:var(--text-2);padding:0 6px}
.ladder-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.manage-list li{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--border);font-size:13.5px}
.manage-list li:first-child{border-top:0}
.manage-list .grow{flex:1;min-width:0}
.scope-add{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:10px;padding:14px 20px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
.dropzone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1.5px dashed var(--border-strong);border-radius:12px;background:var(--surface-2);cursor:pointer;color:var(--text-2)}
.dropzone:hover{border-color:var(--primary)}
.dropzone-list{flex-basis:100%;font-size:12.5px;color:var(--text-3)}
input[type=file]:focus-visible+.dropzone,.dropzone:focus-within{outline:2px solid var(--focus);outline-offset:2px}

/* Radio buttons styled as a segmented control */
.seg-radio label{position:relative;display:inline-flex}
.seg-radio input[type=radio]{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg-radio input[type=radio]+span{height:28px;padding:0 11px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-3);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg-radio input[type=radio]:checked+span{background:var(--raised);color:var(--text);box-shadow:0 1px 2px rgba(12,35,64,.08),0 0 0 1px var(--border)}
.seg-radio input[type=radio]:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}

/* ---------- Sign in ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--bg)}
.auth-story{background:radial-gradient(120% 90% at 0% 100%,rgba(41,171,184,.22),transparent 60%),#0C2340;color:#fff;padding:36px 52px;display:flex;flex-direction:column;gap:28px}
.auth-copy{margin-top:auto;max-width:470px}
.auth-copy h1{color:#fff;font-size:34px;line-height:1.2;margin:10px 0 14px;font-weight:600}
.auth-copy p{color:#C6D4E1;font-size:15px;line-height:1.6}
.auth-rail{position:relative;display:grid;grid-template-columns:1fr 1.6fr 2fr 1.4fr;gap:6px;height:10px;max-width:470px;margin:6px 0 18px}
.auth-seg{border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.auth-seg.done{background:#29ABB8}
.auth-seg.current span{display:block;height:100%;width:58%;background:#29ABB8;animation:auth-fill 1.6s cubic-bezier(.2,.7,.2,1) both}
.auth-gate{position:absolute;top:-5px;width:18px;height:18px;margin-left:-9px;transform:rotate(45deg);border-radius:3px;box-shadow:0 0 0 3px #0C2340}
.auth-gate.g1{left:16.7%;background:#4FB98D}
.auth-gate.g2{left:43.3%;background:#4FB98D}
.auth-gate.g3{left:76.7%;background:#E08A1E}
.auth-foot{color:#8CA3BA;font-size:12px}
.auth-main{display:flex;align-items:center;justify-content:center;padding:32px 20px}
.auth-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.auth-card h2{font-size:26px;font-weight:600}
.auth-card .check{padding:0;align-items:center}
.auth-card .check span{color:var(--text-2);font-size:13px}
.auth-submit{height:42px;margin-top:6px}
@keyframes auth-fill{from{width:0}}

/* ---------- Review fixes ---------- */
.journey-block .journey{padding-top:58px}
.toast.error .ic{color:#FF9C95}
.rm{min-width:max(1060px,calc(var(--weeks,12) * 36px + 640px))}
.inline-edit{opacity:0;transition:opacity .15s}
.bl-head:hover .inline-edit,.kpi-row:hover .inline-edit,.opp:hover .inline-edit,.decision:hover .inline-edit,
.ai:hover .inline-edit,tr:hover .inline-edit,.inline-edit:focus-visible{opacity:1}
@media (hover:none){.inline-edit{opacity:1}}
.criteria{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.criteria li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text)}
.criteria li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:7px;flex:none}
.criteria .by{display:block;font-size:12px;color:var(--text-3)}
.quick-progress{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.quick-progress .form-control,.quick-progress .form-select{min-height:30px;height:30px;padding:4px 8px;font-size:12.5px;width:auto}
.quick-progress input[type=number]{width:74px}
.dropzone.dragover{border-color:var(--primary);background:var(--primary-soft)}
.gate-submit{margin-left:6px}
.plan-gap{font-weight:600}
.plan-gap.behind{color:var(--amber)}
.plan-gap.ahead{color:var(--green-ink)}

/* ---------- Collapsible sidebar (desktop) ---------- */
.menu-btn{display:inline-flex}
@media (min-width:1025px){
  .app{transition:grid-template-columns .22s ease-out}
  /* Collapsed: a narrow rail with the logo mark, menu icons (named by their title tooltip) and the avatar. */
  html.rail-collapsed .app{grid-template-columns:72px minmax(0,1fr)}
  html.rail-collapsed .rail{padding-inline:12px;overflow-x:hidden}
  html.rail-collapsed .brand{justify-content:center;padding-inline:0}
  html.rail-collapsed .brand-name,
  html.rail-collapsed .nav-text,
  html.rail-collapsed .nav-label,
  html.rail-collapsed .prog-wrap,
  html.rail-collapsed .rail-foot .who>span:last-child,
  html.rail-collapsed .rail-signout{display:none}
  html.rail-collapsed .nav a{justify-content:center;padding:10px 0}
  html.rail-collapsed .nav a[aria-current="page"]::before{left:-12px}
  html.rail-collapsed .nav+.nav-label+.nav{border-top:1px solid var(--rail-border);margin-top:10px;padding-top:10px}
  html.rail-collapsed .nav .count{position:absolute;top:1px;right:1px;margin:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}
  html.rail-collapsed .rail-foot{padding-inline:0;align-items:center}
  html.rail-collapsed .rail-foot .who{justify-content:center}
}
@media (prefers-reduced-motion: reduce){.app{transition:none}}

/* ---------- Customer review fixes ---------- */
.dotted-tip{border-bottom:1px dotted var(--text-3);cursor:help}
.nowrap{white-space:nowrap}
.nav .count.neutral{background:rgba(255,255,255,.16);color:var(--rail-text)}
.j-gate em{background:var(--surface);padding:0 4px;border-radius:4px}
.journey-list{display:none;list-style:none;margin:12px 0 4px;padding:0}
.journey-list li{display:flex;align-items:center;gap:12px;padding:9px 0}
.journey-list li+li{border-top:1px solid var(--border)}
.jl-dot{width:12px;height:12px;border-radius:999px;background:var(--track);flex:none;margin-inline:3px}
.jl-phase.done .jl-dot{background:var(--primary)}
.jl-phase.current .jl-dot{background:var(--surface);box-shadow:inset 0 0 0 3px var(--primary)}
.jl-main{display:flex;flex-direction:column;min-width:0;flex:1}
.jl-main b{font-size:13.5px;font-weight:600;color:var(--text)}
.jl-main span{font-size:12px;color:var(--text-3)}
.jl-phase.future .jl-main b{color:var(--text-2)}
.jl-gate a{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}
.jl-gate .gate-ic{margin-inline:3px}
.jl-gate .badge{flex:none}
.ladder{align-items:start}
.rung.r1,.rung.r2{margin-top:0}
.lg-tick{width:3px;height:14px;border-radius:2px;background:var(--text-3)}
.lg-tick.tgt{background:var(--green)}
.bl-mark{width:3px;margin-left:-1.5px}
.appr-body>section.appr-files{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}
.evidence+.evidence{margin-top:14px}
.evidence .attach{margin-top:6px}
.decision-scope{font-size:13.5px;color:var(--text-2);margin-bottom:8px}
.decide>p.small{margin-top:10px}
.digest-programs{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.digest-programs li{display:flex;align-items:center;gap:8px;font-size:13.5px}
.digest-programs .dp-name{flex:1;min-width:0}
.auth-help{margin-top:4px;font-size:13px;color:var(--text-3);text-align:center}
.ai{grid-template-columns:minmax(0,1fr) 210px}
.ai .meter .v{gap:10px;align-items:baseline}
.ai .meter .v b{white-space:nowrap}
.j-labels{height:58px}
.j-label b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.program-foot>span.row{margin-left:auto}
.feed-item.notif{display:block;padding:0}
.notif-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 20px;color:inherit;text-decoration:none}
.notif-link:hover{background:var(--surface-2);text-decoration:none}
.notif-link .t strong{color:var(--primary-ink)}
.notif-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif-text .s{font-size:13px;color:var(--text-2)}
.notif-link time{font-size:12px;color:var(--text-3);white-space:nowrap}
.notif-chev{color:var(--text-3)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-story{padding:24px 20px;gap:18px}
  .auth-copy h1{font-size:24px}
  .auth-copy p{display:none}
}
@media (max-width:760px){
  .scope-grid{grid-template-columns:minmax(0,1fr)}
  .scope-grid>section+section{border-left:0;border-top:1px solid var(--border)}
  .form-grid,.form-grid.three,.form-grid.four,.ladder-form{grid-template-columns:minmax(0,1fr)}
  .scope-add{grid-template-columns:minmax(0,1fr)}
  .tools-col{flex-direction:row;flex-wrap:wrap}
  .d-hero .row{flex-wrap:wrap !important}
  .ai{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .journey-scroll{display:none}
  .journey-list{display:block}
  .j-legend{display:none}
  /* Roadmap on phones: name, status and % per row; the timeline needs a wider screen. */
  .rm{min-width:0}
  .rm-row{grid-template-columns:minmax(0,1fr) auto 44px}
  .rm-row>div:nth-child(2),.rm-row>.rm-tl,.rm-row>.rm-weeks{display:none}
  .rm-name .row-tools,.rm-name .measure,.rm-name .badge{display:none}
  .rm-row{align-items:start}
  .rm-name{align-items:flex-start}
  .rm-name .ttl{white-space:normal;overflow:visible;text-overflow:clip}
  .rm-row>div:nth-child(3){max-width:118px}
  .rm-row>div:nth-child(3) .badge{white-space:normal;height:auto;line-height:1.25;padding-block:3px}
  .rm-tools .legend{display:none}
}