/* Training mode: toolbar, banner, "?" badges and the connected (non-modal) help panel.
   Single source of truth for learn-* styling. Colours come from the shared theme tokens only. */
.learn-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:8px 24px;background:var(--s1);border-bottom:1px solid var(--brd);color:var(--t0);flex-shrink:0;font-size:1rem}
.workspace-utilities .learn-toolbar{padding:0;border:0;min-height:0;background:none}
.learn-actions{display:flex;align-items:center;gap:8px}
.learn-toolbar button,.learn-dialog button,.learn-banner button{font:inherit;cursor:pointer}
.learn-toolbar .learn-academy{font-size:1rem;min-height:36px;padding:6px 12px;border-radius:var(--radius-md)}
.learn-label-short{display:none}
.learn-switch{display:flex;align-items:center;gap:8px;min-height:36px;border:1px solid var(--brd);border-radius:var(--radius-pill);padding:6px 12px;background:var(--s2);color:var(--t1);font-size:1rem;white-space:nowrap}
.learn-switch[aria-checked=true]{border-color:var(--grn);background:color-mix(in srgb,var(--grn) 14%,var(--s1));color:var(--t0)}
.learn-switch-track{width:26px;height:15px;border-radius:var(--radius-pill);background:var(--brd);position:relative;flex-shrink:0}
.learn-switch-track:after{content:'';position:absolute;width:11px;height:11px;top:2px;left:2px;background:var(--t1);border-radius:50%;transition:transform .15s}
.learn-switch[aria-checked=true] .learn-switch-track{background:var(--grn)}
.learn-switch[aria-checked=true] .learn-switch-track:after{transform:translateX(11px);background:var(--s1)}

.learn-banner{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 24px;background:color-mix(in srgb,var(--grn) 10%,var(--s1));border-bottom:1px solid color-mix(in srgb,var(--grn) 35%,var(--brd));color:var(--t0);font-size:1rem;line-height:1.4;flex-shrink:0}
.learn-banner[hidden]{display:none}
.learn-banner strong{color:var(--grn);white-space:nowrap}
.learn-banner-text{flex:1 1 280px;color:var(--t1);min-width:0}
.learn-banner-actions{display:flex;gap:8px;flex-wrap:wrap}

/* "?" badges sit in a fixed overlay so page grids and labels are untouched. */
.learn-icon{display:none!important}
.learn-icon-layer{position:fixed;inset:0;pointer-events:none;z-index:9000}
body.training-on .learn-icon{display:inline-flex!important;align-items:center;justify-content:center;position:fixed;margin:0;padding:0;width:24px;height:24px;min-width:24px;border:1px solid var(--grn);border-radius:50%;background:color-mix(in srgb,var(--grn) 18%,var(--s1));color:var(--t0);font:700 .8125rem/1 var(--font-sans,system-ui);cursor:help;pointer-events:auto;z-index:1}
body.training-on .learn-icon[hidden]{display:none!important}
@media(pointer:coarse){body.training-on .learn-icon{width:28px;height:28px;min-width:28px}}
body.training-on :is(input,select,textarea){cursor:help!important}
.learn-icon:hover,.learn-icon:focus-visible{background:color-mix(in srgb,var(--grn) 35%,var(--s1))!important;outline:2px solid var(--blu);outline-offset:2px}

/* Connected help panel: positioned beside its anchor by training-mode.js. */
.learn-dialog{position:fixed;inset:auto;margin:0;padding:0;z-index:9010;display:flex;flex-direction:column;max-width:calc(100vw - 24px);background:var(--s1);color:var(--t0);border:1px solid var(--brd);border-radius:var(--radius-lg);box-shadow:0 12px 40px #0006;font-size:1rem;line-height:1.5;overflow:hidden}
.learn-dialog[hidden]{display:none!important}
.learn-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--brd);flex-shrink:0}
.learn-dialog-header strong{font-size:1rem;color:var(--t0)}
.learn-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--brd);border-radius:var(--radius-md);background:transparent;color:var(--t1);font-size:1.25rem;line-height:1}
.learn-close:hover{color:var(--t0);border-color:var(--t2)}
.learn-dialog-body{display:flex;flex:1;min-height:0;overflow:hidden}
.learn-sidebar{display:none}
.learn-dialog.learn-library .learn-sidebar{display:block;width:190px;flex-shrink:0;padding:12px 10px;overflow:auto;border-right:1px solid var(--brd);background:var(--s0)}
.learn-sidebar button{display:block;width:100%;text-align:left;border:0;border-radius:var(--radius-md);background:transparent;color:var(--t1);padding:8px 10px;margin-bottom:2px;font-size:.9375rem;line-height:1.4}
.learn-sidebar button:hover,.learn-sidebar button[aria-current=true]{background:var(--s2);color:var(--t0)}
.learn-sidebar small{display:block;color:var(--t2);font-size:.875rem}
.learn-progress-label{padding:12px 10px 4px;color:var(--t1);font-size:.9375rem}
.learn-progress{display:block;width:100%;height:5px;margin:6px 0;accent-color:var(--grn)}
.learn-main{flex:1;min-width:0;padding:18px;max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain}
.learn-main h2{margin:0 0 10px;font-size:1.25rem;line-height:1.3;color:var(--t0)}
.learn-main h3{margin:18px 0 6px;font-size:1rem;color:var(--t0)}
.learn-main p,.learn-main li{color:var(--t1);font-size:1rem}
.learn-main p{margin:6px 0 12px}
.learn-main ol{padding-left:22px;margin:6px 0}.learn-main li{padding-left:4px;margin:6px 0}
.learn-main a.learn-source{color:var(--blu)}
.learn-eyebrow{margin-bottom:6px;color:var(--t2);font-size:.9375rem;font-weight:600}
.learn-caption,.learn-verification,.learn-locate-note,.learn-empty{display:block;color:var(--t2);font-size:.9375rem;margin:8px 0}
.learn-lead{color:var(--t1)}

/* Home: start action, search, path cards, collapsed workflows and topics. */
.learn-home-start{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.learn-home-start small{color:var(--t2);font-size:.9375rem}
.learn-search{display:block;width:100%;box-sizing:border-box;margin:0 0 4px}
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.learn-path{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border:1px solid var(--brd);border-radius:var(--radius-lg);background:var(--s2);color:var(--t0)}
.learn-path:hover{border-color:var(--blu)}
.learn-path strong{font-size:1rem}
.learn-path span{color:var(--t1);font-size:.9375rem}
.learn-path small{margin-top:6px;color:var(--grn);font-size:.9375rem}
.learn-topics{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.learn-topics[hidden]{display:none}
.learn-topics button:not(.btn){min-height:32px;padding:5px 10px;border:1px solid var(--brd);border-radius:var(--radius-md);background:var(--s2);color:var(--t0);font-size:.9375rem}
.learn-topics button:not(.btn):hover{border-color:var(--blu)}

/* Lesson blocks. */
.learn-quick{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0 0 8px}
.learn-quick dt{margin-top:8px;color:var(--t2);font-size:.9375rem;font-weight:600}
.learn-quick dd{margin:0;color:var(--t0)}
.learn-example,.learn-practice,.learn-context{margin:10px 0;padding:10px 12px;border:1px solid var(--brd);border-radius:var(--radius-md);background:var(--s2);color:var(--t0)}
.learn-practice{border-color:color-mix(in srgb,var(--grn) 40%,var(--brd));background:color-mix(in srgb,var(--grn) 8%,var(--s1))}
.learn-caution{margin:12px 0;padding:10px 12px;border-left:3px solid var(--amb);border-radius:0 var(--radius-md) var(--radius-md) 0;background:color-mix(in srgb,var(--amb) 10%,var(--s1));color:var(--t0)}
.learn-quiz{margin:16px 0;padding:12px 14px;border:1px solid var(--brd);border-radius:var(--radius-md)}
.learn-quiz legend{padding:0 4px;color:var(--t1);font-weight:600}
.learn-quiz label{display:flex;align-items:flex-start;gap:8px;margin:6px 0;color:var(--t0);cursor:pointer}
.learn-quiz input{margin-top:4px;accent-color:var(--blu)}
.learn-feedback{min-height:20px;margin:8px 0 0;color:var(--grn)}
.learn-sim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.learn-sim-grid label{display:flex;flex-direction:column;gap:4px;color:var(--t1);font-size:.9375rem}
.learn-sim-grid input{width:100%;box-sizing:border-box}
.learn-step{margin:8px 0;padding:8px 12px;border:1px solid var(--brd);border-radius:var(--radius-md);background:var(--s2)}
.learn-step>summary,.learn-more>summary{cursor:pointer;color:var(--t0);font-weight:600;line-height:1.5}
.learn-more{margin:8px 0}.learn-more>summary{color:var(--blu);font-weight:500}
.learn-workflow-expand{margin:12px 0;padding:10px 0;border-top:1px solid var(--brd);border-bottom:1px solid var(--brd)}
.learn-workflow-expand>summary{cursor:pointer;color:var(--blu);font-weight:600;line-height:1.5}
.learn-workflow{margin-top:6px}
.learn-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--brd)}
.learn-footer>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.learn-footer small{color:var(--grn);font-size:.9375rem}

.learn-active-target{outline:2px solid var(--grn)!important;outline-offset:4px}
.learn-connector{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9005;overflow:visible}
.learn-connector[hidden]{display:none}
.learn-connector path{stroke:var(--grn);stroke-width:2;fill:none}
.learn-dialog :is(input,select,textarea){cursor:auto!important}
.learn-dialog :focus-visible,.learn-toolbar :focus-visible,.learn-banner :focus-visible{outline:2px solid var(--blu);outline-offset:2px}

@media(max-width:760px){
  .learn-banner{display:block;padding:8px 12px;font-size:.9375rem}
  .learn-banner strong{margin-right:6px}.learn-banner-actions{margin-top:6px}
  .learn-label-long{display:none}.learn-label-short{display:inline}
  .learn-toolbar .learn-academy,.learn-switch{padding:6px 10px}
}
@media(max-width:700px){
  .learn-dialog.learn-library .learn-sidebar{display:none}
  .learn-dialog .learn-main{padding:14px}
  .learn-grid,.learn-sim-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.learn-switch-track:after{transition:none}}