/* Competency journey: baseline bars, learn pulse, results tabs, radar, proof report, ClaraLearn edge notes */

/* shared bars with role-target tick */
.cb { display: grid; grid-template-columns: 92px 1fr 26px auto; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.cb-l { color: var(--t2); }
.cb-bar { position: relative; height: 8px; border-radius: 99px; background: var(--tint); }
.cb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--teal); border-radius: 99px; transition: width .7s cubic-bezier(.22,1,.36,1); }
.cb-bar i.b0 { background: #C9D3D3; border-radius: 99px 0 0 99px; } .cb-bar i.b1 { background: var(--teal); border-radius: 0 99px 99px 0; transition: none; }
.cb-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gold); border-radius: 2px; }
.cb-v { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; text-align: right; }
.cb-lv { font-style: normal; font-size: 10.5px; color: var(--t3); min-width: 62px; }
.lv { font-style: normal; font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: var(--tint); color: var(--t2); }
.lv-working { background: rgba(196,137,10,.12); color: var(--amber); } .lv-proficient { background: var(--teal-soft); color: var(--teal-d); } .lv-advanced { background: rgba(61,140,106,.16); color: var(--green); }

/* starting profile in the chat */
.cpcard { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 28px rgba(30,60,60,.08); padding: 14px 16px; margin-left: 38px; }
.cp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; }
.cp-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ln); font-size: 12.5px; color: var(--t2); line-height: 1.45; } .cp-note b { color: var(--t1); }

/* self-rating in the chat */
.selfbox { margin: -4px 0 0 38px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 28px rgba(30,60,60,.08); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; animation: materialize .4s both; }
.sr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ln); }
.sr-l { display: flex; flex-direction: column; font-size: 13px; } .sr-l small { color: var(--t3); font-size: 11px; }
.sr-p { display: flex; gap: 5px; }
.sr-p button { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--ln2); background: #fff; font-size: 12px; transition: .15s; } .sr-p button:hover { border-color: var(--teal); color: var(--teal-d); } .sr-p button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.sr-f { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.sr-f .go { padding: 7px 18px; border-radius: 99px; border: 0; background: var(--t1); color: #fff; font-size: 13px; } .sr-f .go:disabled { opacity: .35; }
.sr-skip { border: 0; background: none; color: var(--t3); font-size: 12px; text-decoration: underline; }

/* Learn: competency pulse in the strip */
#view.view-learn.tl-open { --tl-extra: 94px; }
.pchip { font-size: 11px; padding: 3px 10px; border-radius: 99px; background: var(--tint); color: var(--t2); white-space: nowrap; transition: background .3s; } .pchip b { font-weight: 600; } .pchip.up { background: var(--teal-soft); color: var(--teal-d); }
.pchip.flash { animation: pflash 1.2s ease; } @keyframes pflash { 0% { transform: scale(1); } 25% { transform: scale(1.18); background: var(--teal); color: #fff; } 100% { transform: scale(1); } }
.pulse { display: none; margin-top: 10px; grid-template-columns: auto repeat(4, 1fr); gap: 4px 18px; align-items: center; }
.tl.open .pulse { display: grid; }
.pulse-t { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); }
.pulse .cb { grid-template-columns: auto 1fr 24px; padding: 0; } .pulse .cb-lv { display: none; } .pulse .cb-l { font-size: 11.5px; }

/* competency change shown in the marker result and after assessments */
.cdelta { margin-left: auto; font-size: 11.5px; padding: 3px 10px; border-radius: 99px; background: var(--teal-soft); color: var(--teal-d); font-weight: 600; animation: pflash 1.2s ease; } .cdelta.neg { background: rgba(196,75,75,.1); color: var(--red); }
.moved { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--teal-soft); }
.moved-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; } .moved-h a { color: var(--teal-d); }
.moved-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.moved-g div { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--t2); } .moved-g b { font-size: 13.5px; color: var(--t1); font-weight: 600; } .moved-g em { font-style: normal; font-weight: 600; color: var(--green); } .moved-g em.neg { color: var(--red); } .moved-g em.zero { color: var(--t3); }

/* results tabs */
.rtabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--tint); }
.rtabs button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font-size: 12.5px; color: var(--t2); transition: .15s; } .rtabs button:hover { color: var(--t1); } .rtabs button.on { background: #fff; color: var(--teal-d); font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* competency journey */
.cj { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; grid-template-rows: auto auto; gap: 14px; }
.cj-r { grid-row: span 2; }
.radar { width: 100%; height: auto; display: block; margin: 4px 0 0; }
.radar .rg { fill: none; stroke: var(--ln2); } .radar .ax { stroke: var(--ln2); }
.radar .pn { fill: rgba(61,140,132,.22); stroke: var(--teal); stroke-width: 2; } .radar .pb { fill: none; stroke: #9AA7A7; stroke-width: 1.5; stroke-dasharray: 4 3; } .radar .pt { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.radar .nd { fill: var(--teal); } .radar text { font-size: 10.5px; fill: var(--t2); }
.rlegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--t2); } .rlegend span { display: inline-flex; align-items: center; gap: 6px; }
.rlegend i { width: 14px; height: 0; border-top: 2px solid; display: inline-block; } .k-b { border-color: #9AA7A7; border-top-style: dashed !important; } .k-n { border-color: var(--teal); border-top-width: 3px !important; } .k-t { border-color: var(--gold); } .k-p { border-color: #B6BDBD; }
.jr { display: grid; grid-template-columns: 150px 1fr 110px 40px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ln); } .jr:last-child { border-bottom: 0; }
.jr-l { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .jr-l span { display: flex; gap: 6px; align-items: center; } .jr-l s { text-decoration: none; color: var(--t3); font-size: 11px; }
.jr-b small { display: block; margin-top: 5px; font-size: 11px; color: var(--t3); }
.jr-d { font-family: ui-monospace, Menlo, monospace; color: var(--green); font-size: 13px; text-align: right; } .jr-d.neg { color: var(--red); }
.spark { width: 110px; height: 26px; } .spark polyline { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linejoin: round; } .spark line { stroke: #C9D3D3; stroke-width: 1.4; stroke-dasharray: 3 3; } .spark circle { fill: var(--teal); }
.cj-e { grid-column: 2; }
.mvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.mv { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ln); background: #fff; transition: .15s; } .mv:hover { border-color: var(--teal); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(61,140,132,.12); }
.mv-d { font-weight: 600; color: var(--green); font-size: 14px; min-width: 28px; } .mv-d.neg { color: var(--red); }
.mv-t { flex: 1; font-size: 12.5px; } .mv-t em { font-style: normal; font-size: 10.5px; color: var(--t3); margin-left: 4px; } .mv-t small { display: block; margin-top: 3px; color: var(--t2); font-size: 11.5px; line-height: 1.35; }
.mv-go { color: var(--t3); font-size: 18px; align-self: center; }

/* program proof report */
.pf-t { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.pf-g { display: grid; grid-template-columns: 1.25fr .8fr 1.2fr; gap: 14px; }
.pb-r { display: grid; grid-template-columns: 90px 1fr 74px; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; color: var(--t2); } .pb-r b { font-size: 12px; color: var(--t1); text-align: right; font-weight: 600; }
.pb-b { position: relative; height: 10px; border-radius: 99px; background: var(--tint); } .pb-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; } .pb-b .b1 { background: var(--teal); z-index: 1; } .pb-b .b0 { background: #C9D3D3; z-index: 2; }
.pf-d { display: flex; flex-direction: column; align-items: stretch; } .donut { --p: 70; width: 120px; height: 120px; margin: 4px auto 0; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--p) * 1%), var(--tint) 0); display: grid; place-items: center; position: relative; } .donut::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--card); } .donut b { position: relative; font: 600 30px 'Cormorant Garamond', serif; color: var(--teal-d); }
.ret { width: 100%; height: auto; display: block; } .ret .gl { stroke: var(--ln); } .ret .gt { font-size: 9px; fill: var(--t3); }
.ret .rc { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linejoin: round; } .ret .rp { fill: none; stroke: #B6BDBD; stroke-width: 2; stroke-dasharray: 5 4; } .ret .dc { fill: var(--teal); } .ret .dp { fill: #B6BDBD; }
.pf-n { margin: 12px 2px 0; }

/* ClaraLearn edge note */
.edge { position: fixed; z-index: 90; display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #17302D; color: #E8F3F1; font-size: 12px; line-height: 1.4; box-shadow: 0 12px 32px rgba(0,0,0,.25); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; pointer-events: auto; }
.edge.on { opacity: 1; transform: none; }
.edge b { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8FD0C8; margin-bottom: 2px; font-weight: 600; }
.edge-hex { flex: none; width: 16px; height: 18px; margin-top: 2px; background: #8FD0C8; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.edge button { margin-left: auto; border: 0; background: none; color: #8FD0C8; font-size: 16px; line-height: 1; padding: 0 2px; }

@media (max-width: 1100px) { .cj { grid-template-columns: 1fr; } .cj-r, .cj-e { grid-row: auto; grid-column: auto; } .pf-g, .mvs { grid-template-columns: 1fr; } .jr { grid-template-columns: 120px 1fr 40px; } .jr .spark { display: none; } }

/* Phones and small tablets: bottom tab bar instead of the side rail, tighter spacing, stacked grids */
@media (max-width: 640px) {
  body, body.rail-collapsed { padding-left: 0; padding-bottom: var(--mobile-nav-h); --rail-w: 0px; --mobile-nav-h: calc(68px + env(safe-area-inset-bottom, 0px)); }
  main { padding: 18px 14px 90px; }
  .rail, body.rail-collapsed .rail { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--mobile-nav-h); flex-direction: row; align-items: center; padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); border-right: 0; border-top: 1px solid var(--ln); box-shadow: 0 -6px 20px rgba(0,0,0,.05); }
  .rail-top, .rail-title, .rail-bottom { display: none; }
  .rail-items, body.rail-collapsed .rail-items { flex-direction: row; justify-content: space-around; width: 100%; margin: 0; gap: 0; }
  .rail-items a, body.rail-collapsed .rail-items a { flex: 1; min-width: 0; min-height: 56px; flex-direction: column; gap: 2px; padding: 4px 2px; font-size: 9.5px; justify-content: center; border-radius: 10px; white-space: normal; text-align: center; }
  .rail-items a svg { width: 20px; height: 20px; }
  body .rail .rail-items a .t { display: block; max-width: 100%; min-height: 24px; line-height: 12px; font-size: 9.5px; }
  #fab { bottom: calc(var(--mobile-nav-h) + 12px); right: 12px; }
  #clara { z-index: 40; bottom: var(--mobile-nav-h); width: 100%; padding-top: env(safe-area-inset-top, 0px); }
  #view.view-why { height: auto; min-height: calc(100dvh - var(--mobile-nav-h)); }
  #view.view-learn { height: auto; min-height: calc(100dvh - var(--mobile-nav-h)); padding: 12px 12px 84px; overflow: visible; }
  .lhead, .tlhead { flex-wrap: wrap; gap: 8px; }
  .vtabs { overflow-x: auto; max-width: 100%; }
  #view table { display: block; max-width: 100%; overflow-x: auto; }
  .view-results .narrow > .row:first-child { flex-wrap: wrap; gap: 10px; align-items: flex-start !important; }
  .rtabs { max-width: 100%; overflow-x: auto; }
  .rtabs button { white-space: nowrap; padding: 7px 10px; }
  .pf-t { grid-template-columns: 1fr; } .moved-g { grid-template-columns: repeat(2, 1fr); }
  .jr { grid-template-columns: 1fr 44px; gap: 6px 10px; } .jr-l { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } .jr-b { grid-column: 1; } .jr-d { grid-column: 2; }
  .pulse { grid-template-columns: 1fr 1fr; } .pulse-t { grid-column: 1 / -1; }
  .cb { grid-template-columns: 78px 1fr 24px; } .cb-lv { display: none; }
  .selfbox, .cpcard, .pcard { margin-left: 0; } .sr { flex-wrap: wrap; }
  .wy-in { width: 94%; } .wy h1 { font-size: 36px; } .wy-go { width: 100%; justify-content: center; } .wy-cta { width: 100%; }
  .row { flex-wrap: wrap; gap: 10px; }
  .pad { padding: 16px; }
  #view { overflow-wrap: anywhere; }
  .tag, .pchip, .cdelta { white-space: normal; }
  .btn, .opt, .jol button, #chips button, .pills button, .sr-p button { min-height: 44px; }
  #cclose { min-width: 44px; }
  #msgs { min-height: 0; padding: 12px; }
  #chips { max-height: 112px; overflow-y: auto; flex-shrink: 0; }
  #clara header { flex: none; padding: 10px 12px; }
  .m { overflow-wrap: anywhere; }
  #cform { padding: 10px; gap: 6px; flex-shrink: 0; }
  #cform > button { flex: none; }
  #cform input, .cbody #cform input, input[type=text], textarea, .lta { font-size: 16px; }
  .crit { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px 10px; }
  .crit > span { grid-column: 1 / -1; }
  .crit > b { text-align: right; }
  .cj, .cj > *, .pf, .pf-g > *, .rtabs { min-width: 0; }
  .jr-l, .moved-h, .cp-h, .sr-f { flex-wrap: wrap; gap: 8px; }
  .pb-r { grid-template-columns: 80px minmax(0, 1fr) 64px; gap: 6px; }
  .stage { flex-wrap: wrap; }
}