/**
 * MTP Course Wizard / Roadmap stylesheet.
 *
 * v05.12.26.058. Extracted from class-mr-frontend.php
 * shortcode_coursewizard(). Previously inlined as ~1,161 lines of
 * <style>...</style> emitted via PHP heredoc. Zero PHP
 * interpolation points: this is pure static CSS that uses
 * --mtpcw-* CSS variables (populated by an inline style="..."
 * attribute on the parent .mtpcw-wrap element). The variable
 * plumbing stays in the PHP file; only the static rules moved.
 *
 * Why extract:
 *   - PHP file dropped from 3,224 lines (post-v057) to ~2,060
 *     (CSS-stripped).
 *   - Browser caches the CSS asset across page loads; previously
 *     every shortcode render shipped the full 1,161-line payload
 *     in HTML, no cache.
 *   - Asset URL gets a ?ver=MTP_MR_VERSION query string so cache
 *     invalidation is one version bump.
 *
 * Continues Phase 3 monolith decomposition:
 *   Chip A2.1 (v008): mr-pdf-autotrigger.js
 *   Chip A2.2 (v018): mr-pdf-export.js
 *   Chip A3   (v057): mr-coursewizard.js
 *   Chip A4   (v058): mr-coursewizard.css  <- this file
 *
 * Rules are byte-identical to the v057 inlined block. The only
 * change is location.
 */

.mtpcw-wrap{font-family:'Nunito',sans-serif;color:#e8dfc8;position:relative}
/* 04.18.26.009: universal [hidden] guard. Without this, any MTP
   element with an explicit display:flex/grid/block would render
   even when JS set hidden=true, because user-agent [hidden]
   specificity loses to .class{display:flex}. Caused the textbook
   card + placement banner to render empty when the feature was off. */
.mtpcw-wrap [hidden]{display:none !important}
.mtpcw-hdr{padding:22px 28px 6px}
.mtpcw-h{font-family:var(--mtpcw-hdr-tff,'Caveat',cursive);color:var(--mtpcw-hdr-tc,#c9a84c);font-size:var(--mtpcw-hdr-tfs,42px);font-weight:var(--mtpcw-hdr-tfw,400);font-style:italic;line-height:1}
.mtpcw-cap{color:var(--mtpcw-hdr-sc,#7a6a52);font-weight:var(--mtpcw-hdr-sw,400);font-family:var(--mtpcw-hdr-sff,'Nunito',sans-serif);font-size:var(--mtpcw-hdr-sfs,11px);letter-spacing:2px;margin-top:4px;text-transform:uppercase}
.mtpcw-row{padding:14px 28px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;position:relative}
/* 04.15.26.017: Visible school logo badge. Renders the configured
   per-school logo_url as a real <img> next to the school picker so
   the visitor sees the school's brand mark, not just text. Hidden
   when no logo URL is configured for the active school. Image is
   contained inside a fixed 56x56 padded chip so badly-shaped logos
   (very wide or very tall) don't blow out the row layout. */
.mtpcw-school-logo{flex:0 0 auto;width:56px;height:56px;border:1px solid #e0d0a0;border-radius:10px;background:#fff;display:none;align-items:center;justify-content:center;padding:6px;box-sizing:border-box;overflow:hidden}
.mtpcw-school-logo.has-logo{display:inline-flex}
.mtpcw-school-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media(max-width:540px){
  .mtpcw-school-logo{width:44px;height:44px;padding:4px}
  .mtpcw-row{padding:10px 14px;gap:8px}
  .mtpcw-legend{padding:8px 14px;gap:10px;row-gap:6px}
  .mtpcw-legend-grp{gap:12px}
}
/* Compact layout (04.14.26.016): inline icon badges + toggles get
   a right-aligned group inside the controls row. margin-left:auto
   pushes it to the right edge regardless of sibling widths. */
.mtpcw-row-icons{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-left:auto}
.mtpcw-row-rightcap{display:flex;gap:10px;align-items:center;margin-left:auto}
/* Types legend + right-cap (PDF, help) share one row, space between. */
.mtpcw-legend-bar{display:flex;align-items:center;gap:14px;padding:10px 28px;flex-wrap:wrap}
.mtpcw-legend-bar .mtpcw-legend-types{flex:1 1 auto;padding:0}
.mtpcw-legend-rightcap{display:flex;gap:10px;align-items:center;margin-left:auto;flex-shrink:0}
.mtpcw-legend-rightcap .mtpcw-legend-help{position:relative}
@media (max-width:720px){
  .mtpcw-row-icons{width:100%;justify-content:flex-start;margin-left:0}
  .mtpcw-legend-bar{flex-direction:column;align-items:stretch}
  .mtpcw-legend-rightcap{margin-left:0;justify-content:flex-end}
}
.mtpcw-help-inline{width:32px;height:32px;border-radius:50%;border:1.5px solid #c9a84c;background:#fff;color:#7a6032;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;cursor:pointer;flex-shrink:0;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.mtpcw-help-inline:hover{background:#c9a84c;color:#3d2e1a}
.mtpcw-sel{background:transparent;border:1.5px solid var(--mtpcw-in-bc,#c9a84c);color:var(--mtpcw-in-tc,#c9a84c);font-weight:var(--mtpcw-in-tw,400);padding:11px 38px 11px 16px;border-radius:8px;font-family:var(--mtpcw-hdr-iff,'Nunito',sans-serif);font-size:var(--mtpcw-hdr-ifs,14px);min-width:220px;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%23c9a84c' d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.mtpcw-school-picker{position:relative;min-width:260px;flex:0 1 300px}
.mtpcw-school-input{width:100%;padding:11px 16px 11px 42px !important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5'><circle cx='11' cy='11' r='7'/><path d='M21 21l-5-5'/></svg>");background-repeat:no-repeat;background-position:14px center;box-sizing:border-box;cursor:text}
.mtpcw-school-dd{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:340px;overflow-y:auto;background:#fff;border:1px solid #c9a84c;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.15);z-index:40;display:none}
.mtpcw-school-dd.open{display:block}
.mtpcw-school-grp{padding:6px 14px 4px;font-family:'Nunito',sans-serif;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9a7a44;background:#faf5e8;border-bottom:1px solid #e8dfc8;position:sticky;top:0}
.mtpcw-school-opt{padding:10px 14px;font-family:'Nunito',sans-serif;font-size:13.5px;color:#3d2e1a;cursor:pointer;border-bottom:1px solid #f0e8d0}
.mtpcw-school-opt:last-child{border-bottom:none}
.mtpcw-school-opt:hover,.mtpcw-school-opt.active{background:#faf5e8;color:#3d2e1a}
.mtpcw-school-opt.request{color:#0077C8;font-weight:700}
.mtpcw-school-opt mark{background:rgba(201,168,76,.30);color:inherit;padding:0 2px;border-radius:2px}
.mtpcw-school-empty{padding:14px;text-align:center;color:#9a7a44;font-family:'Nunito',sans-serif;font-size:12px;font-style:italic}
.mtpcw-reqbtn{background:transparent;border:1.5px solid rgba(201,168,76,.55);color:#c9a84c;padding:11px 18px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.mtpcw-reqbtn:hover{background:#c9a84c;color:#2a1f12}
.mtpcw-majorwrap{flex:0 1 540px;max-width:640px;min-width:260px;position:relative}

/* Chart Path button: hidden until a major is selected */
.mtpcw-chart{background:#c9a84c;color:#2a1f12;border:1.5px solid #c9a84c;padding:11px 22px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,transform .1s}
.mtpcw-chart:hover{background:#b89a42;border-color:#b89a42}
.mtpcw-chart:active{transform:translateY(1px)}
.mtpcw-chart[hidden]{display:none}
/* 04.17.26.040: when the Compare button is configured as primary
   (default), Chart Path becomes the secondary outlined action.
   Applies whenever Chart Path does NOT carry .mtpcw-btn-primary. */
.mtpcw-chart:not(.mtpcw-btn-primary){background:transparent;color:#c9a84c}
.mtpcw-chart:not(.mtpcw-btn-primary):hover{background:#c9a84c;color:#2a1f12}

/* 04.17.26.034: Compare Major button + panel.
   Sits next to Chart Path, same hidden-until-major-selected pattern,
   outlined style so it reads as a secondary 'what-if' action rather
   than competing with the primary Chart Path CTA. */
.mtpcw-compare-btn{background:transparent;color:#c9a84c;border:1.5px solid #c9a84c;padding:11px 18px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,transform .1s}
.mtpcw-compare-btn:hover{background:#c9a84c;color:#2a1f12}
.mtpcw-compare-btn:active{transform:translateY(1px)}
.mtpcw-compare-btn[hidden]{display:none}
.mtpcw-compare-btn .mtpcw-compare-icon{display:inline-block;margin-right:6px;font-size:14px}
/* 04.17.26.040: primary variant for Compare. When admin sets the
   button order to compare_first (default), Compare gets filled gold
   and the icon keeps the same color/size. */
.mtpcw-compare-btn.mtpcw-btn-primary{background:#c9a84c;color:#2a1f12;font-size:14px;padding:11px 22px}
.mtpcw-compare-btn.mtpcw-btn-primary:hover{background:#b89a42;border-color:#b89a42}

/* 04.17.26.040 Progress Ring, restyled in 04.17.26.043 for in-header
   placement inside Chart Path. No card background/border since the
   Chart Path panel provides its own. Flex row: ring left, title +
   desc + count subtitle right. */
.mtpcw-path-hdr-row{display:flex;gap:16px;align-items:flex-start}
.mtpcw-path-hdr-text{flex:1;min-width:0}
.mtpcw-progress-ring .mtpcw-pr-svg{flex-shrink:0;display:block}
.mtpcw-progress-ring .mtpcw-pr-fill{transition:stroke-dashoffset .6s ease}
@media(max-width:480px){.mtpcw-path-hdr-row{gap:10px}.mtpcw-progress-ring .mtpcw-pr-svg{width:52px;height:52px}}
/* 04.17.26.048: Near-Minor Nudge banner. Cream card with blue border
   stripe (to distinguish from the gold gen-ed banner). Compact, warm,
   actionable. Heading uses Caveat italic for personality. */
.mtpcw-nearminor{background:linear-gradient(135deg,#f5f9fd 0%,#e8f0f9 100%);border:1px solid #c8dbef;border-left:4px solid #0077C8;border-radius:8px;padding:14px 20px;margin:8px 0;box-shadow:0 1px 2px rgba(0,0,0,.04);font-family:'Nunito',sans-serif}
.mtpcw-nearminor-title{font-family:'Caveat',cursive;color:#0a3050;font-size:22px;font-style:italic;line-height:1.1;margin:0 0 6px}
.mtpcw-nearminor-body{font-size:13.5px;color:#2a3a4a;line-height:1.55}
.mtpcw-nearminor-body strong{color:#0a3050;font-weight:800}
.mtpcw-nearminor-remaining{margin-top:8px;font-size:12.5px;color:#3a4a5a}
.mtpcw-nearminor-remaining .mtpcw-nm-course{display:inline-block;background:rgba(0,119,200,.08);color:#0a3050;padding:2px 8px;border-radius:4px;margin:2px 4px 2px 0;font-weight:600}
.mtpcw-nearminor-note{margin-top:8px;font-size:11.5px;color:#5a6a7a;font-style:italic}
@media(max-width:480px){.mtpcw-nearminor{padding:10px 14px}.mtpcw-nearminor-title{font-size:18px}.mtpcw-nearminor-body{font-size:12.5px}}

/* Compare panel - slides down above the canvas when Compare is clicked. */
.mtpcw-compare-panel{display:none;background:#faf7f0;border:1px solid #c9a84c;border-left:4px solid #c9a84c;border-radius:8px;padding:18px 22px;margin:12px 0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.mtpcw-compare-panel.open{display:block}
.mtpcw-compare-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.mtpcw-compare-title{font-family:'Caveat',cursive;color:#7a5a1a;font-size:24px;font-style:italic;margin:0}
.mtpcw-compare-close{background:transparent;border:none;color:#7a5a1a;font-size:20px;cursor:pointer;padding:4px 10px;border-radius:4px;line-height:1}
.mtpcw-compare-close:hover{background:rgba(201,168,76,.15)}
.mtpcw-compare-picker{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;position:relative}
.mtpcw-compare-picker label{font-size:12px;font-weight:700;color:#5a4a2a;text-transform:uppercase;letter-spacing:.4px}
/* 04.17.26.038: compare picker upgraded from native <select> to the
   same typeahead search pattern used by the main major picker. Gives
   us fuzzy search, group headers, keyboard nav, icons per major.
   Styling mirrors .mtpcw-search / .mtpcw-dd / .mtpcw-dd-item but
   scoped under .mtpcw-compare-picker so the two pickers don't fight
   each other's CSS. */
.mtpcw-compare-searchwrap{position:relative;flex:1;min-width:260px}
.mtpcw-compare-search{position:relative;z-index:2;width:100%;background:#fff;border:1.5px solid #c9a84c;color:#2e2720;font-weight:500;padding:11px 16px 11px 42px !important;border-radius:8px;font-family:'Nunito',sans-serif;font-size:14px;box-sizing:border-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5'><circle cx='11' cy='11' r='7'/><path d='M21 21l-5-5'/></svg>");background-repeat:no-repeat;background-position:14px center;min-height:44px}
.mtpcw-compare-search::placeholder{color:#9a7a44;opacity:.8}
.mtpcw-compare-search:focus{outline:none;border-color:#b89a42;box-shadow:0 0 0 3px rgba(201,168,76,.2)}
/* 04.17.26.039: ghost-text autocomplete overlay. Sits behind the
   text input with identical font metrics. The prefix is transparent
   (pure spacer sized to match what the student has already typed)
   and the suffix is rendered in faded gold as a visual hint of what
   completing the match would produce. Pressing Enter accepts it. */
.mtpcw-compare-ghost{position:absolute;top:0;left:0;right:0;bottom:0;padding:11px 16px 11px 42px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:500;line-height:normal;color:transparent;pointer-events:none;z-index:1;white-space:nowrap;overflow:hidden;display:flex;align-items:center;box-sizing:border-box;letter-spacing:0}
.mtpcw-compare-ghost .mtpcw-compare-ghost-prefix{color:transparent;white-space:pre}
/* 04.17.26.053: Compare panel has a dark-brown background so the ghost
   suffix needs a LIGHT (faded gold) color to be readable. The primary
   picker's ghost lives on a cream background so dark-gold works there
   but not here. */
.mtpcw-compare-ghost .mtpcw-compare-ghost-suffix{color:rgba(201,168,76,.55);white-space:pre}
.mtpcw-compare-dd{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid #c9a84c;border-radius:8px;max-height:320px;overflow-y:auto;z-index:10;display:none;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.mtpcw-compare-dd.open{display:block}
.mtpcw-compare-dd-head{padding:8px 14px;background:#faf3e0;color:#7a5a1a;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:1px;position:sticky;top:0;border-bottom:1px solid #e8dcc0}
.mtpcw-compare-dd-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #f2ead3;display:flex;align-items:center;gap:10px;font-size:13.5px;color:#2e2720;min-height:44px}
.mtpcw-compare-dd-item:last-child{border-bottom:none}
.mtpcw-compare-dd-item:hover,.mtpcw-compare-dd-item.kbd-active{background:rgba(201,168,76,.18);color:#3d2e1a}
.mtpcw-compare-dd-icon{flex-shrink:0;font-size:15px;line-height:1}
.mtpcw-compare-dd-name{flex:1;font-weight:600}
.mtpcw-compare-dd-empty{padding:14px;color:#9a7a44;font-style:italic;text-align:center;font-size:13px}
.mtpcw-compare-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:3;background:transparent;border:none;color:#9a7a44;font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1;display:none}
.mtpcw-compare-clear:hover{background:rgba(201,168,76,.15);color:#7a5a1a}
.mtpcw-compare-searchwrap.has-value .mtpcw-compare-clear{display:block}
.mtpcw-compare-summary{font-size:13.5px;color:#3d2e1a;line-height:1.6;padding:10px 14px;background:rgba(201,168,76,.08);border-radius:6px;margin-bottom:14px}
.mtpcw-compare-summary strong{color:#7a5a1a}
.mtpcw-compare-summary .mtpcw-summary-delta{font-weight:800;font-size:14px}
.mtpcw-compare-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:900px){.mtpcw-compare-cols{grid-template-columns:1fr}}
.mtpcw-compare-col{background:#fff;border:1px solid #e8dcc0;border-radius:6px;padding:12px 14px}
.mtpcw-compare-col h4{margin:0 0 8px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#7a5a1a;display:flex;justify-content:space-between;align-items:center}
.mtpcw-compare-col h4 .mtpcw-compare-count{background:rgba(201,168,76,.15);color:#7a5a1a;padding:2px 8px;border-radius:10px;font-size:10.5px;font-weight:700;letter-spacing:0}
.mtpcw-compare-col.col-shared h4{color:#5a6a5a}
.mtpcw-compare-col.col-shared h4 .mtpcw-compare-count{background:rgba(90,106,90,.12);color:#5a6a5a}
.mtpcw-compare-col.col-drop h4{color:#185FA5}
.mtpcw-compare-col.col-drop h4 .mtpcw-compare-count{background:rgba(24,95,165,.12);color:#185FA5}
.mtpcw-compare-col.col-add h4{color:#c9a84c}
.mtpcw-compare-col-items{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.mtpcw-compare-item{background:#faf7f0;border:1px solid #e8dcc0;border-radius:4px;padding:7px 10px;font-size:12.5px;line-height:1.45}
.mtpcw-compare-item .mtpcw-compare-item-code{font-weight:800;color:#3d2e1a;font-family:'JetBrains Mono','Consolas',monospace;font-size:11.5px}
.mtpcw-compare-item .mtpcw-compare-item-name{color:#5a4a2a;margin-left:6px}
.mtpcw-compare-item .mtpcw-compare-readiness{display:block;margin-top:3px;font-size:11px;font-weight:700}
.mtpcw-compare-item .mtpcw-compare-readiness.ready{color:#2e7d32}
.mtpcw-compare-item .mtpcw-compare-readiness.progress{color:#c9a84c}
.mtpcw-compare-item .mtpcw-compare-readiness.blocked{color:#c22929}
.mtpcw-compare-col.col-drop .mtpcw-compare-item{text-decoration:line-through;text-decoration-color:rgba(24,95,165,.45);opacity:.75}
.mtpcw-compare-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:10px;border-top:1px solid #e8dcc0}
.mtpcw-compare-actions button{padding:10px 20px;border-radius:6px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;border:none}
.mtpcw-compare-keep{background:#fff;color:#5a4a2a;border:1.5px solid #c9a84c !important}
.mtpcw-compare-keep:hover{background:rgba(201,168,76,.1)}
.mtpcw-compare-switch{background:#c9a84c;color:#2a1f12}
.mtpcw-compare-switch:hover{background:#b89a42}
.mtpcw-compare-empty{padding:16px;text-align:center;color:#9a7a44;font-style:italic;font-size:12.5px}

/* Slide-down path planner */
.mtpcw-path{max-height:0;overflow:hidden;transition:max-height .45s ease;background:#faf7f0;border-top:1px solid #c9a84c}
.mtpcw-path.open{max-height:2400px}
.mtpcw-path-inner{padding:22px 28px 24px}
.mtpcw-path-hdr{position:relative;margin-bottom:14px;padding-right:110px}
.mtpcw-path-title{font-family:'Caveat',cursive;color:#7a5a1a;font-size:28px;font-style:italic;line-height:1.1}
.mtpcw-path-major{color:#3d2e1a;font-family:'Caveat',cursive;font-style:italic}
.mtpcw-path-desc{color:#6a5a42;font-size:12.5px;margin-top:4px;line-height:1.55}
.mtpcw-path-close-btn{position:absolute;top:0;right:0;background:transparent;color:#3d2e1a;border:1.5px solid #c9a84c;padding:8px 22px;border-radius:6px;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;cursor:pointer}
.mtpcw-path-close-btn:hover{border-color:#7a5a1a;color:#7a5a1a;background:rgba(201,168,76,.1)}
.mtpcw-path-section{margin-top:6px}
.mtpcw-path-section-lbl{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:12px 0 8px;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.mtpcw-path-section-lbl:hover{opacity:.85}
.mtpcw-path-section-lbl.gold{color:#7a5a1a}
.mtpcw-path-section-lbl.blue{color:#0077C8}
.mtpcw-path-caret{display:inline-block;transition:transform .18s;font-size:12px;line-height:1}
.mtpcw-path-section.collapsed .mtpcw-path-caret{transform:rotate(-90deg)}
.mtpcw-path-section.collapsed .mtpcw-path-grid{display:none}
/* 04.17.26.022: column count driven by --mtpcw-path-cols. Default 3,
   admin setting wizard_cols_default + per-visitor localStorage override.
   Responsive breakpoints still force single column on narrow viewports. */
.mtpcw-path-grid{display:grid;grid-template-columns:repeat(var(--mtpcw-path-cols,3),minmax(0,1fr));gap:8px}
@media(max-width:900px){.mtpcw-path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.mtpcw-path-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}}
/* 04.17.26.022: codes-only mode. Hides the course name line, keeps
   the course code chip. Useful when a student already knows codes
   (MATH 1330, MATH 1340) and wants a denser layout. */
.mtpcw-path-grid.hide-names .mtpcw-path-name{display:none}
.mtpcw-path-grid.hide-names .mtpcw-path-code{font-size:12.5px;padding:3px 9px}
/* 04.17.26.022: display strip above wizard sections. Houses the
   column-count segmented toggle and the codes-only checkbox. */
.mtpcw-path-display-strip{display:flex;align-items:center;gap:14px;justify-content:flex-end;margin:4px 0 10px;flex-wrap:wrap;font-family:'Nunito',sans-serif}
.mtpcw-path-cols-toggle{display:inline-flex;border:1.5px solid #c9a84c;border-radius:18px;overflow:hidden;background:#fdf9ec;box-shadow:inset 0 -1px 0 rgba(61,46,26,.04)}
.mtpcw-col-btn{background:transparent;border:none;padding:5px 12px;font:700 11px 'Nunito',sans-serif;color:#7a5a1a;cursor:pointer;letter-spacing:.3px;transition:background .12s ease,color .12s ease}
.mtpcw-col-btn+.mtpcw-col-btn{border-left:1px solid rgba(122,90,26,.25)}
.mtpcw-col-btn:hover{background:rgba(201,168,76,.15)}
.mtpcw-col-btn[aria-pressed="true"]{background:#c9a84c;color:#3d2e1a}
.mtpcw-path-hide-names-lbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font:700 11px 'Nunito',sans-serif;color:#7a5a1a;letter-spacing:.3px;text-transform:uppercase}
.mtpcw-path-hide-names-lbl input{margin:0;accent-color:#c9a84c;cursor:pointer}
@media(max-width:540px){
  .mtpcw-path-display-strip{justify-content:flex-start;gap:10px}
  .mtpcw-col-btn{padding:5px 9px;font-size:10.5px}
}
/* Responsive path sections (04.13.26.053). Shrink label letter-spacing
   on tablet so REQUIRED/ADDITIONAL don't wrap, enlarge the clickable
   area so the collapse caret is easy to tap on phones. */
@media(max-width:900px){
  .mtpcw-path-section-lbl{letter-spacing:1.5px;margin:10px 0 6px}
}
@media(max-width:540px){
  .mtpcw-path-section-lbl{font-size:10.5px;letter-spacing:1px;padding:4px 2px;margin:8px 0 4px}
  .mtpcw-path-caret{font-size:11px}
  .mtpcw-path-opt{padding:10px 12px;font-size:12px}
}
.mtpcw-path-opt{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border:1.5px solid #e0d4b8;border-radius:6px;cursor:pointer;font-size:12.5px;color:#3d2e1a;font-weight:700;user-select:none;transition:border-color .12s,background .12s;min-width:0}
.mtpcw-path-opt-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.mtpcw-path-code{display:inline-block;width:fit-content;font-family:'JetBrains Mono','Consolas','Courier New',monospace;font-size:10.5px;color:#7a5a1a;letter-spacing:.4px;font-weight:800;text-transform:uppercase;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.35);border-radius:4px;padding:2px 7px;white-space:nowrap;line-height:1.15}
.mtpcw-path-opt.blue .mtpcw-path-code{color:#1a5a8a;background:rgba(0,119,200,.1);border-color:rgba(0,119,200,.35)}
.mtpcw-path-opt.forbidden .mtpcw-path-code{color:#7a3a3a;background:rgba(194,41,41,.1);border-color:rgba(194,41,41,.35);text-decoration:none}
.mtpcw-path-name{font-weight:700;line-height:1.25;word-break:break-word}
.mtpcw-path-opt.gold{border-left:3px solid #c9a84c}
/* 04.17.26.023: suggested tone sits between gold (required) and blue
   (open available). Muted gold left-rail plus a dashed inset ring
   communicates "recommended for this major but not mandatory"
   without pulling attention away from true required courses. */
.mtpcw-path-opt.suggested{border-left:3px solid #d6b66d;background:linear-gradient(180deg,#fffdf3 0%,#fdf7e3 100%);box-shadow:inset 0 0 0 1px rgba(201,168,76,.12)}
.mtpcw-path-opt.suggested:hover{border-color:#c9a84c;background:#fff9e8}
.mtpcw-path-opt.blue{border-left:3px solid #0077C8}
.mtpcw-path-opt:hover{border-color:#c9a84c;background:#fdfaf2}
.mtpcw-path-opt.checked{background:rgba(46,133,64,.12);border-color:#2e8540;color:#1e5a2a}
.mtpcw-path-opt.implied{background:rgba(46,133,64,.06);border-color:#2e8540;opacity:.65;cursor:default;color:#4a5a42}
.mtpcw-path-opt.implied .mtpcw-path-cb{background:#2e8540;border-color:#2e8540}
/* Forbidden: course is in the major's do_not_take list (04.12.26.039).
   Greyed out, struck through, click disabled. Visually unmissable
   so a math major doesn't accidentally check Elementary Stats. */
.mtpcw-path-opt.forbidden{background:rgba(194,41,41,.08);border-color:#c22929;border-left:3px solid #c22929;opacity:.7;cursor:not-allowed;text-decoration:line-through;color:#7a3a3a}
.mtpcw-path-opt.forbidden:hover{border-color:#c22929;background:rgba(194,41,41,.08)}
.mtpcw-path-opt.forbidden .mtpcw-path-cb{border-color:#c22929;background:transparent}
.mtpcw-path-opt.forbidden .mtpcw-path-forbidden-tag{margin-left:auto;font-size:10px;font-weight:800;color:#c22929;letter-spacing:.5px;text-transform:uppercase;text-decoration:none}
/* 04.18.26.004: mutex-blocked state. Applied when an admin-authored
   mutual_exclusion rule locks this course because a sibling was selected.
   Visually distinct from red forbidden (which is major-level constraint)
   using amber/grey tones. */
.mtpcw-path-opt.mutex-blocked{background:rgba(154,125,68,.08);border-color:#b89a42;opacity:.55;cursor:not-allowed;position:relative}
.mtpcw-path-opt.mutex-blocked:hover{border-color:#b89a42;background:rgba(154,125,68,.08)}
.mtpcw-path-opt.mutex-blocked .mtpcw-path-cb{border-color:#b89a42;background:transparent}
.mtpcw-path-opt.mutex-blocked .mtpcw-path-code{color:#7a6032}
.mtpcw-path-opt.mutex-blocked::after{content:"PICK ONE";position:absolute;top:4px;right:8px;font-size:9px;font-weight:800;color:#b89a42;letter-spacing:.5px;text-transform:uppercase;background:rgba(255,255,255,0.85);padding:2px 5px;border-radius:3px;pointer-events:none}
/* 04.17.26.023: Suggested badge on cards in the Available Courses
   section. Muted gold chip, mirrors the aesthetic of the Required
   star badge so the two feel like tiers of the same system. */
.mtpcw-path-opt.suggested .mtpcw-path-suggest-tag{margin-left:auto;font-size:9.5px;font-weight:800;color:#7a5a1a;letter-spacing:.6px;text-transform:uppercase;background:rgba(201,168,76,.18);border:1px solid rgba(201,168,76,.42);border-radius:10px;padding:2px 8px;white-space:nowrap;flex-shrink:0}
.mtpcw-path-cb{width:18px;height:18px;border:1.5px solid #c9a84c;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:12px;flex-shrink:0;background:#fff}
.mtpcw-path-opt.checked .mtpcw-path-cb{background:#2e8540;border-color:#2e8540}
.mtpcw-path-empty{color:#9a8a6a;font-size:12px;font-style:italic;padding:8px 2px}

/* No-courses toggle + exam score panel */
.mtpcw-path-nocourse{margin:12px 0 6px;padding:12px 14px;background:#fff;border:1px solid #e0d4b8;border-radius:8px}
.mtpcw-path-noc-label{display:flex;align-items:center;gap:10px;color:#3d2e1a;font-size:13px;cursor:pointer;font-weight:700}
.mtpcw-path-noc-label input{width:16px;height:16px;accent-color:#c9a84c;cursor:pointer}
.mtpcw-path-exam{display:none;margin:10px 0 16px;padding:16px 18px;background:#fdfaf2;border:1px solid #e0d4b8;border-radius:8px}
.mtpcw-path-exam.active{display:block}
.mtpcw-path-exam-title{color:#7a5a1a;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.mtpcw-path-exam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:780px){.mtpcw-path-exam-grid{grid-template-columns:repeat(2,1fr)}}
.mtpcw-path-exam-grid label{display:flex;flex-direction:column;gap:4px;color:#6a5a42;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mtpcw-path-exam-grid input{background:#fff;border:1.5px solid #c9a84c;color:#3d2e1a;padding:9px 10px;border-radius:6px;font-family:'Nunito',sans-serif;font-size:13.5px;text-align:center;box-sizing:border-box;width:100%;font-weight:700}
.mtpcw-path-exam-grid input:focus{outline:none;border-color:#7a5a1a;box-shadow:0 0 0 3px rgba(201,168,76,.25)}
.mtpcw-path-exam-result{margin-top:12px;padding:10px 12px;background:#fff;border-left:3px solid #c9a84c;border-radius:4px;color:#3d2e1a;font-size:12.5px;line-height:1.5}
.mtpcw-path-exam-result.dev{border-left-color:#d97a4a;color:#8a3a1a}

/* No-courses mode: both sections forced collapsed and headers non-interactive */
.mtpcw-path.no-courses-mode .mtpcw-path-section{opacity:.55;pointer-events:none}
.mtpcw-path.no-courses-mode .mtpcw-path-section .mtpcw-path-caret{transform:rotate(-90deg)}
.mtpcw-path.no-courses-mode .mtpcw-path-section .mtpcw-path-grid{display:none}

/* No-courses checkbox disabled when user has manually selected courses */
.mtpcw-path-nocourse.locked{opacity:.55}
.mtpcw-path-nocourse.locked .mtpcw-path-noc-label{cursor:not-allowed}
.mtpcw-path-nocourse.locked input{cursor:not-allowed}
.mtpcw-path-noc-hint{display:block;margin-top:6px;color:#7a6a52;font-size:11px;font-style:italic;font-weight:400}
.mtpcw-search{position:relative;z-index:2;width:100%;background:transparent;border:1.5px solid var(--mtpcw-in-bc,#c9a84c);color:var(--mtpcw-in-tc,#c9a84c);font-weight:var(--mtpcw-in-tw,400);padding:11px 16px 11px 42px !important;border-radius:8px;font-family:var(--mtpcw-hdr-iff,'Nunito',sans-serif);font-size:var(--mtpcw-hdr-ifs,14px);box-sizing:border-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5'><circle cx='11' cy='11' r='7'/><path d='M21 21l-5-5'/></svg>");background-repeat:no-repeat;background-position:14px center}
.mtpcw-search::placeholder{color:var(--mtpcw-in-pc,#c9a84c);opacity:.75}
.mtpcw-search:focus{outline:none;border-color:#c9a84c;box-shadow:0 0 0 3px rgba(201,168,76,.15)}
.mtpcw-search:disabled{opacity:.45;cursor:not-allowed}
/* 04.17.26.022: ghost-text autocomplete overlay. Sits behind the input
   (z-index 1) with the typed portion invisible but space-reserving so
   the faded suffix aligns perfectly to the right of the caret. Pressing
   Enter accepts the ghost. Uses the same font metrics as .mtpcw-search
   so characters line up pixel-for-pixel. pointer-events none so clicks
   pass through to the input. */
.mtpcw-search-ghost{position:absolute;top:0;left:0;right:0;bottom:0;padding:11px 16px 11px 42px;font-family:var(--mtpcw-hdr-iff,'Nunito',sans-serif);font-size:var(--mtpcw-hdr-ifs,14px);font-weight:var(--mtpcw-in-tw,400);line-height:normal;color:transparent;pointer-events:none;z-index:1;white-space:nowrap;overflow:hidden;display:flex;align-items:center;box-sizing:border-box;letter-spacing:0}
.mtpcw-search-ghost .mtpcw-ghost-prefix{color:transparent;white-space:pre}
.mtpcw-search-ghost .mtpcw-ghost-suffix{color:rgba(201,168,76,.42);white-space:pre}
.mtpcw-empty-notice{margin-top:14px;padding:14px 18px;border:1px solid rgba(201,168,76,.4);border-radius:8px;background:rgba(201,168,76,.06);color:#3d2e1a;font-size:13px;line-height:1.6;font-family:'Nunito',sans-serif}
.mtpcw-empty-notice strong{display:block;color:#7a5a1a;font-weight:800;margin-bottom:4px;font-size:14px}
.mtpcw-disclaimer{padding:14px 28px 18px;font-family:'Nunito',sans-serif;line-height:1.5;text-align:center;font-style:italic}
.mtpcw-dd{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#faf7f0;border:1.5px solid #c9a84c;border-radius:8px;max-height:320px;overflow-y:auto;z-index:20;display:none;box-shadow:0 8px 24px rgba(61,46,26,.18)}
.mtpcw-dd.open{display:block}
.mtpcw-dd-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #ede4cf;display:flex;align-items:center;gap:10px;font-size:13px;color:#3d2e1a}
.mtpcw-dd-item:last-child{border-bottom:none}
.mtpcw-dd-item:hover{background:rgba(201,168,76,.18);color:#3d2e1a}
.mtpcw-dd-head{padding:6px 14px;background:#f1e7cc;color:#7a5a1a;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid #c9a84c;position:sticky;top:0;z-index:2}
.mtpcw-dd-icon{font-size:16px;flex-shrink:0}
.mtpcw-dd-name{font-weight:700;flex:1}
.mtpcw-dd-grp{font-size:10px;color:#9a8a6a;letter-spacing:1px;text-transform:uppercase}
.mtpcw-dd-empty{padding:14px;color:#9a8a6a;font-size:12px;text-align:center;font-style:italic}

/* Legend bar */
.mtpcw-legend{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:12px 32px;gap:18px;row-gap:10px;position:relative}
.mtpcw-legend.mtpcw-legend-icons{justify-content:flex-end}
.mtpcw-legend.mtpcw-legend-icons .mtpcw-legend-grp{justify-content:flex-end;margin-left:auto}
.mtpcw-legend-help{width:24px;height:24px;border-radius:50%;border:1.5px solid #c9a84c;background:#fff;color:#7a6032;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;flex-shrink:0;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.mtpcw-legend-help:hover{background:#c9a84c;color:#3d2e1a}
.mtpcw-legend-help-popover{position:absolute;top:48px;left:32px;max-width:380px;background:#ffffff;border:1px solid #c9a84c;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:14px 16px;font-family:'Nunito',sans-serif;font-size:12.5px;color:#3d2e1a;line-height:1.55;z-index:40;display:none}
/* 04.15.26.016: when popover lives inside .mtpcw-canvas-col (because
   help button is in the canvas-tools strip), anchor it to one of four
   corners so it floats by the help button. Default (no class) is
   top-right. .tools-tl, .tools-bl, .tools-br for the other corners. */
.mtpcw-canvas-col{position:relative}
.mtpcw-canvas-col > .mtpcw-legend-help-popover{top:46px;right:14px;left:auto;max-width:380px}
.mtpcw-canvas-col > .mtpcw-legend-help-popover.tools-tl{top:46px;left:14px;right:auto}
.mtpcw-canvas-col > .mtpcw-legend-help-popover.tools-br{top:auto;bottom:46px;right:14px;left:auto}
.mtpcw-canvas-col > .mtpcw-legend-help-popover.tools-bl{top:auto;bottom:46px;left:14px;right:auto}
.mtpcw-legend-help-popover.open{display:block}
.mtpcw-legend-help-popover h4{margin:0 0 6px;font-family:'Caveat',cursive;font-size:18px;color:#7a6032;font-weight:700}
.mtpcw-legend-help-popover dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
.mtpcw-legend-help-popover dt{font-weight:800;color:#7a6032;white-space:nowrap}
.mtpcw-legend-help-popover dd{margin:0;color:#3d2e1a}
.mtpcw-legend-help-popover .hp-close{position:absolute;top:6px;right:10px;background:transparent;border:none;font-size:16px;cursor:pointer;color:#7a6032}
.mtpcw-legend-grp{display:flex;flex-wrap:wrap;gap:22px;align-items:center;row-gap:8px}
/* 04.15.26.015: level types row shrinks-to-fit one line. Container
   queries scale font/dot/gap so all 8+ category chips fit one row at
   desktop width without wrapping "Seminar" to a second line. Below
   640px the wrap behavior re-engages so mobile stays readable. */
.mtpcw-legend-types{padding-top:8px;padding-bottom:14px}
.mtpcw-legend-types .mtpcw-legend-grp{flex-wrap:nowrap;overflow:hidden;gap:clamp(6px,1.4vw,22px);min-width:0}
.mtpcw-legend-types .mtpcw-legend-item{font-size:clamp(9px,0.85vw,12px);padding:clamp(3px,0.5vw,6px) clamp(5px,0.8vw,12px);gap:clamp(4px,0.5vw,7px);flex-shrink:1;min-width:0}
.mtpcw-legend-types .mtpcw-legend-sw,.mtpcw-legend-types .mtpcw-legend-dot{width:clamp(8px,0.8vw,11px);height:clamp(8px,0.8vw,11px)}
@media(max-width:640px){
  .mtpcw-legend-types .mtpcw-legend-grp{flex-wrap:wrap}
  .mtpcw-legend-types .mtpcw-legend-item{font-size:11px}
  .mtpcw-legend-types .mtpcw-legend-sw,.mtpcw-legend-types .mtpcw-legend-dot{width:11px;height:11px}
}
.mtpcw-legend-item{display:flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--mtpcw-ctl-ff,'Nunito'),sans-serif;font-size:var(--mtpcw-ctl-fs,12px);font-weight:var(--mtpcw-ctl-fw,700);color:var(--mtpcw-ctl-tc,#3d2e1a);background:var(--mtpcw-ctl-bg,#fdf9ec);border:1px solid var(--mtpcw-ctl-bc,rgba(201,168,76,.55));padding:var(--mtpcw-ctl-py,5px) var(--mtpcw-ctl-px,12px);border-radius:var(--mtpcw-ctl-br,18px);letter-spacing:var(--mtpcw-ctl-ls,0.2px);text-transform:var(--mtpcw-ctl-tt,none);text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:inset 0 -1px 0 rgba(61,46,26,.04)}
.mtpcw-legend-sw{width:11px;height:11px;border-radius:2px;display:inline-block;flex-shrink:0}
.mtpcw-legend-dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0}
.mtpcw-legend-star{color:#c9a84c;font-size:14px;line-height:1;display:inline-block;text-shadow:0 0 6px rgba(201,168,76,.5);flex-shrink:0}
@media(max-width:980px){.mtpcw-legend{justify-content:flex-start;gap:14px}.mtpcw-legend-grp{gap:16px}}
.mtpcw-legend-completed{background:#2e8540}
.mtpcw-legend-elective{background:transparent;border:1.5px dashed #c9a84c}
.mtpcw-legend-forbidden{background:transparent;border:1.5px solid #c22929;position:relative}
.mtpcw-legend-forbidden::before{content:'';position:absolute;top:50%;left:-1px;right:-1px;height:1.5px;background:#c22929;transform:rotate(-45deg)}
/* MTP toggle: button-styled legend entry with electron orbit
   04.17.26.021: restyled to a stamped pill aesthetic matching the
   designer mockup. Base state has a 1.5px gold border, cream fill,
   soft inset shadow for depth, and a faint text shadow that gives the
   label a pressed-metal feel without fighting the canvas. Pressed
   (aria-pressed=true) fills solid gold with cream text and a slightly
   inset inner shadow so activation reads at a glance. Hover lifts with
   a drop shadow. All colors still overridable via the admin CSS vars
   (--mtpcw-ctl-bg, --mtpcw-ctl-bc, --mtpcw-ctl-tc). */
button.mtpcw-legend-item{
    background:var(--mtpcw-ctl-bg,#fdf9ec);
    border:1.5px solid var(--mtpcw-ctl-bc,#c9a84c);
    color:var(--mtpcw-ctl-tc,#3d2e1a);
    font-family:var(--mtpcw-ctl-ff,'Nunito'),sans-serif;
    font-weight:var(--mtpcw-ctl-fw,700);
    font-size:var(--mtpcw-ctl-fs,12px);
    letter-spacing:var(--mtpcw-ctl-ls,0.2px);
    cursor:pointer;
    padding:6px 14px;
    border-radius:var(--mtpcw-ctl-br,18px);
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .05s ease,color .15s ease;
    box-shadow:inset 0 -1px 0 rgba(61,46,26,.06),0 1px 0 rgba(255,255,255,.6);
    text-shadow:0 1px 0 rgba(255,255,255,.55);
}
button.mtpcw-legend-item:hover{
    border-color:#b8923d;
    background:#fffdf5;
    box-shadow:inset 0 -1px 0 rgba(61,46,26,.08),0 2px 6px rgba(201,168,76,.22);
}
button.mtpcw-legend-item:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(201,168,76,.35),inset 0 -1px 0 rgba(61,46,26,.08);
}
button.mtpcw-legend-item:active{
    transform:translateY(1px);
}
button.mtpcw-legend-item[aria-pressed="true"]{
    background:#c9a84c;
    border-color:#7a5a1a;
    border-width:2px;
    color:#2a1f12;
    font-weight:800;
    box-shadow:inset 0 2px 4px rgba(61,46,26,.35),0 0 0 2px rgba(201,168,76,.3);
    text-shadow:none;
}
button.mtpcw-focus-toggle[aria-pressed="true"]::after{
    content:" ON";
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
    background:#2a1f12;
    color:#c9a84c;
    padding:1px 5px;
    border-radius:3px;
    margin-left:4px;
}
button.mtpcw-legend-item[aria-pressed="true"]:hover{
    background:#b89740;
    border-color:#5a4010;
}
button.mtpcw-legend-item[disabled]{
    cursor:not-allowed;
    opacity:.55;
    box-shadow:none;
    text-shadow:none;
}
.mtpcw-legend-mtp-orbit{position:relative;width:14px;height:14px;display:inline-block;border-radius:50%;background:radial-gradient(circle,#e8c25a 30%,rgba(232,194,90,.3) 65%,transparent 80%);box-shadow:0 0 8px rgba(232,194,90,.5)}
button.mtpcw-legend-item[aria-pressed="true"] .mtpcw-legend-mtp-orbit{animation:mtpcw-mtp-pulse 1.6s ease-in-out infinite}
@keyframes mtpcw-mtp-pulse{
  0%{box-shadow:0 0 0 0 rgba(232,194,90,.75),0 0 8px rgba(232,194,90,.5)}
  70%{box-shadow:0 0 0 9px rgba(232,194,90,0),0 0 8px rgba(232,194,90,.5)}
  100%{box-shadow:0 0 0 0 rgba(232,194,90,0),0 0 8px rgba(232,194,90,.5)}
}

/* Main area: sidebar + canvas */
/* Panel position layouts (04.12.26.062). The admin Map Layout setting
   chooses where the course detail panel sits relative to the canvas.
   Default left preserves the prior behavior. */
.mtpcw-main{display:grid;gap:0;min-height:520px}
.mtpcw-main.mtpcw-pp-left  {grid-template-columns:260px 1fr;grid-template-areas:"banner banner" "panel canvas"}
.mtpcw-main.mtpcw-pp-right {grid-template-columns:1fr 260px;grid-template-areas:"banner banner" "canvas panel"}
.mtpcw-main.mtpcw-pp-below {grid-template-columns:1fr;grid-template-areas:"banner" "canvas" "panel"}
.mtpcw-main.mtpcw-pp-top   {grid-template-columns:1fr;grid-template-areas:"banner" "panel" "canvas"}
.mtpcw-main .mtpcw-panel       {grid-area:panel}
/* 04.15.26.017 CRITICAL FIX: grid-area must live on the actual grid
   child. Prior to v016 .mtpcw-canvas-wrap WAS the direct grid child
   so this rule worked. v016 introduced .mtpcw-canvas-col as a wrapper
   around canvas-wrap (to host the new tools strip), and the
   grid-area declaration was never migrated. Result: when the gened
   banner is display:none (every visit until a gen-ed major picks),
   auto-placement put canvas-col into the first free cell which was
   col 1 (260px panel column), smashing the canvas to 260px wide.
   Pinning grid-area:canvas to canvas-col forces correct placement
   regardless of banner state. */
.mtpcw-main .mtpcw-canvas-col  {grid-area:canvas;min-width:0}
.mtpcw-main .mtpcw-canvas-wrap {grid-area:canvas}
.mtpcw-main .mtpcw-gened-banner{grid-area:banner}
/* In below/top mode the panel becomes a horizontal strip, not a tall
   sidebar - drop the min-height so it does not waste space. */
.mtpcw-main.mtpcw-pp-below .mtpcw-panel,
.mtpcw-main.mtpcw-pp-top   .mtpcw-panel{min-height:0;padding:14px 24px}
@media(max-width:780px){
  .mtpcw-main,.mtpcw-main.mtpcw-pp-left,.mtpcw-main.mtpcw-pp-right{grid-template-columns:1fr;grid-template-areas:"banner" "panel" "canvas"}
}
.mtpcw-panel{background:transparent;padding:18px 20px;border-right:1px solid #3a2c18;color:#e8dfc8;font-size:13px}
@media(max-width:780px){.mtpcw-panel{border-right:none;border-bottom:1px solid #3a2c18}}
/* 04.17.26.009: compact panel on mobile - reduce empty state height. */
@media(max-width:640px){
  .mtpcw-panel{padding:10px 14px}
  .mtpcw-panel-empty{padding:12px 10px;font-size:12px}
  .mtpcw-main{min-height:auto}
}
.mtpcw-panel-empty{color:#9a8a6a;font-style:italic;text-align:center;padding:28px 12px;font-size:13px;line-height:1.55}
/* 04.19.26.012: desktop default. Show the "click on the map" phrase,
   hide the phone-specific phrase. Phone media query below flips it. */
.mtpcw-panel-empty-desktop{display:inline}
.mtpcw-panel-empty-phone{display:none}
.mtpcw-panel-empty.hidden{display:none}
.mtpcw-panel-detail{display:none}
.mtpcw-panel-detail.show{display:block}
.mtpcw-panel-code{color:#c9a84c;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.mtpcw-panel-name{margin:0 0 12px;font-family:'Caveat',cursive;color:#3d2e1a;font-size:28px;font-style:italic;font-weight:400;line-height:1.1;word-break:normal;overflow-wrap:break-word}
.mtpcw-panel-lvl{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:14px}
.mtpcw-panel-section{color:#c9a84c;font-size:11px;letter-spacing:2px;font-weight:700;text-transform:uppercase;margin:18px 0 6px;border-top:1px solid #3a2c18;padding-top:14px}
.mtpcw-panel-section:first-of-type{border-top:none;padding-top:0}
.mtpcw-panel-body{color:#c9b89a;font-size:12.5px;line-height:1.55}
.mtpcw-panel-body ul{margin:6px 0 0 18px;padding:0}
.mtpcw-panel-body li{margin:3px 0}
.mtpcw-panel-body .empty{color:#6a5a42;font-style:italic}
/* MTP CTA button in detail panel (04.12.26.039).
   Only rendered when clicked course has mtp_url AND status=active.
   Style matches Course Finder's enroll-now CTA with the same pulse. */
.mtpcw-panel-cta-wrap{margin-top:18px;padding-top:14px;border-top:1px solid #3a2c18;display:none}
.mtpcw-panel-cta-wrap.show{display:block}
.mtpcw-panel-cta{display:block;text-align:center;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.5px;transition:transform .15s,box-shadow .15s;animation:mtpcw-cta-pulse 2.5s ease-in-out infinite;position:relative}
.mtpcw-panel-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,119,200,.4);animation:none}
@keyframes mtpcw-cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,194,90,.45)}
  50%{box-shadow:0 0 0 10px rgba(232,194,90,0)}
}

/* Canvas */
.mtpcw-canvas-wrap{position:relative;background:#ede8dc;overflow-x:auto;overflow-y:hidden;min-height:420px}
/* 04.15.26.016: Tools widget now an in-flow strip ABOVE or BELOW the
   canvas (was overlay-positioned in v015 which covered course nodes).
   Wrapper .mtpcw-canvas-col stacks the strip + canvas vertically.
   Position: above-right (default), above-left, below-right, below-left.
   Houses Download Roadmap PDF + ? Help button. */
.mtpcw-canvas-col{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.mtpcw-canvas-tools{display:flex;gap:8px;align-items:center;padding:8px 14px;background:transparent}
.mtpcw-canvas-tools.mtpcw-tools-right{justify-content:flex-end}
.mtpcw-canvas-tools.mtpcw-tools-left{justify-content:flex-start}
.mtpcw-tools-btn{font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;color:#3d2e1a;background:#fff;border:1px solid #c9a84c;border-radius:6px;padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:background .15s,color .15s,box-shadow .15s}
.mtpcw-tools-btn:hover{background:#c9a84c;color:#3d2e1a;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mtpcw-tools-btn .mtpcw-pdf-icon{font-size:13px;color:#0077C8}
.mtpcw-tools-btn:hover .mtpcw-pdf-icon{color:#3d2e1a}
.mtpcw-tools-btn.mtpcw-legend-help{width:28px;height:28px;padding:0;border-radius:50%;justify-content:center;font-size:14px;font-weight:800;color:#7a6032}
@media(max-width:640px){
  .mtpcw-canvas-tools{gap:6px;padding:6px 10px}
  .mtpcw-tools-btn{font-size:11px;padding:5px 10px}
  .mtpcw-tools-btn.mtpcw-legend-help{width:24px;height:24px;font-size:12px}
}
.mtpcw-canvas-wrap canvas{display:block}
/* Gen-ed quantitative literacy banner (04.13.26.041). Renders above
   the canvas when a gen-ed major is active. Gold-themed to match the
   "approved" highlight on the canvas nodes. */
.mtpcw-gened-banner{background:linear-gradient(135deg,var(--gened-bg-start,#fdf8ee) 0%,var(--gened-bg-end,#f5ecd0) 100%);border-left:4px solid var(--gened-border-color,#c9a84c);padding:14px 20px;margin:12px 16px;border-radius:6px;font-family:'Nunito',sans-serif;font-size:13px;line-height:1.55;color:var(--gened-body-color,#3d2e1a);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mtpcw-gened-banner strong{color:var(--gened-heading-color,#7a5a1a);font-weight:800}
.mtpcw-gened-banner .mtpcw-gened-excl-list{margin-top:6px;font-size:12px;color:#7a3a3a}
.mtpcw-gened-banner .mtpcw-gened-excl-code{font-family:'Courier New',monospace;background:rgba(194,41,41,.08);color:#a22020;padding:1px 6px;border-radius:3px;font-weight:700;margin-right:4px;font-size:11px}
/* Responsive tuning for gen-ed banner (04.13.26.053). Matches the
   780px breakpoint used elsewhere. Tablet shrinks padding, phone
   shrinks again + drops the excl-code chips to wrap cleanly. */
@media(max-width:900px){
  .mtpcw-gened-banner{padding:12px 16px;margin:10px 12px;font-size:12.5px;line-height:1.5}
}
@media(max-width:540px){
  .mtpcw-gened-banner{padding:10px 12px;margin:8px 8px;font-size:12px;line-height:1.5;border-left-width:3px;border-radius:4px}
  .mtpcw-gened-banner .mtpcw-gened-excl-list{font-size:11px;line-height:1.6}
  .mtpcw-gened-banner .mtpcw-gened-excl-code{font-size:10px;padding:1px 5px;display:inline-block;margin-bottom:2px}
}
/* Fit mode (04.12.26.062): when the visitor presses the Fit toggle,
   scale the canvas down to fit the container width. The bitmap stays
   crisp; the browser scales display dimensions proportionally so
   aspect ratio is preserved. */
.mtpcw-canvas-wrap.mtpcw-fit{overflow:hidden}
/* 04.17.26.009: on mobile, if user manually enables fit mode,
   cap the minimum display width so text stays readable. Canvas
   scales to container but never below 640px effective width. */
@media(max-width:640px){
  .mtpcw-canvas-wrap{min-height:300px}
  .mtpcw-canvas-wrap.mtpcw-fit canvas{min-width:640px}
  .mtpcw-canvas-wrap.mtpcw-fit .mtpcw-labels{min-width:640px}
  .mtpcw-canvas-wrap.mtpcw-fit{overflow-x:auto;overflow-y:hidden}
}
.mtpcw-fit-icon{display:inline-block;font-size:14px;line-height:1;color:#c9a84c;flex-shrink:0}
button.mtpcw-fit-toggle[aria-pressed="true"] .mtpcw-fit-icon{color:#e8c25a}
/* PDF download button (04.13.26.014). Styled to match the fit
   toggle so it blends into the existing legend/toolbar row. */
/* PDF download button (04.13.26.022). Legend-item variant - sits
   next to the Fit/Scroll toggle. Inherits legend-item styling for
   consistency; only needs icon + busy-state overrides. */
.mtpcw-pdf-dl .mtpcw-pdf-icon{display:inline-block;font-size:12px;line-height:1;color:#c9a84c;flex-shrink:0;margin-right:2px}
.mtpcw-pdf-dl:hover .mtpcw-pdf-icon{color:#e8c25a}
.mtpcw-pdf-dl.busy{opacity:.6;pointer-events:none}
.mtpcw-pdf-dl.busy .mtpcw-pdf-icon{animation:mtpcw-pdf-spin 1s linear infinite}
@keyframes mtpcw-pdf-spin{to{transform:rotate(360deg)}}
.mtpcw-canvas{display:block;cursor:default}
/* 04.17.26.028: inline Download + Help pills (merged into legend).
   Visually distinct from the toggle pills so they read as 'primary
   action' not 'state toggle'. Download gets a subtle gold fill to
   anchor the right edge of the control row; Help is a small circular
   pill with a centered glyph. Both respect the existing pill border
   and hover / active transitions from .mtpcw-legend-item. */
.mtpcw-legend-item.mtpcw-legend-tool{background:rgba(201,168,76,.18);font-weight:700}
.mtpcw-legend-item.mtpcw-legend-tool:hover{background:rgba(201,168,76,.32)}
.mtpcw-legend-item.mtpcw-pdf-dl{padding-left:14px;padding-right:14px}
.mtpcw-legend-item.mtpcw-legend-help{min-width:34px;justify-content:center;font-weight:800;padding-left:12px;padding-right:12px}
.mtpcw-canvas.clickable{cursor:pointer}
/* Pan-by-drag (04.12.26.064): grab cursor when canvas overflows the
   wrap and visitor can drag to scroll. .panning takes precedence over
   .clickable so the cursor stays consistent during a drag. */
.mtpcw-canvas.pannable:not(.panning):not(.clickable){cursor:grab}
.mtpcw-canvas.panning{cursor:grabbing !important}
.mtpcw-canvas-wrap.mtpcw-fit .mtpcw-canvas.pannable{cursor:default}
/* HTML label overlay (04.13.26.002). Sits above the canvas and
   renders course codes + node labels as real HTML text instead of
   canvas-drawn bitmap text. Native browser text stays crisp at every
   display scale, no downsample blur. pointer-events:none so the
   canvas still receives all clicks/hover. */
.mtpcw-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;font-family:'Nunito',sans-serif}
.mtpcw-lbl{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;color:#2e2720;font-weight:700;user-select:none;overflow:hidden;transition:opacity .12s ease}
.mtpcw-lbl.done{color:#fff}
.mtpcw-lbl.forbidden{color:#a05050;text-decoration:line-through;text-decoration-color:rgba(194,41,41,0.7);text-decoration-thickness:1.5px}
.mtpcw-lbl-code{position:absolute;display:inline-block;background:#fffaf0;color:#3d2e1a;font-weight:800;letter-spacing:0;line-height:1;white-space:nowrap;user-select:none;text-align:center;border:1px solid rgba(201,168,76,0.7);border-radius:2px;padding:0 3px;box-sizing:border-box}/* v015: hardcoded 1px top/bottom removed; inline padding override now drives chip vertical spacing via chip_padding_y. */
.mtpcw-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9a8a6a;font-size:14px;font-style:italic;pointer-events:none}
.mtpcw-loading.hidden{display:none}

/* Request modal */
.mtpcw-req-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center}
.mtpcw-req-modal.open{display:flex}
.mtpcw-req-ov{position:absolute;inset:0;background:rgba(20,14,8,.72);backdrop-filter:blur(3px)}
.mtpcw-req-card{position:relative;background:#fff;color:#2e2720;border-radius:14px;padding:32px;max-width:480px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.35);z-index:1;max-height:90vh;overflow-y:auto}
/* 04.18.26.003: Wave A student-facing features. */
.mtpcw-placement-banner{display:flex;gap:12px;align-items:flex-start;background:#eef5fb;border:1px solid #0077C8;border-left:4px solid #0077C8;color:#0A3050;padding:12px 16px;margin:0 0 14px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:13px;line-height:1.55}
.mtpcw-placement-banner[hidden]{display:none}
.mtpcw-placement-banner .mtpcw-pb-icon{font-size:20px;flex-shrink:0;line-height:1}
.mtpcw-placement-banner .mtpcw-pb-body{flex:1;min-width:0}
.mtpcw-placement-banner .mtpcw-pb-body p{margin:0 0 6px}
.mtpcw-placement-banner .mtpcw-pb-body p:last-child{margin-bottom:0}
.mtpcw-textbook-card{display:flex;gap:12px;align-items:center;background:#fdf9ec;border:1px solid #c9a84c;border-left:4px solid #c9a84c;color:#3d2e1a;padding:10px 14px;margin:10px 28px 0;border-radius:8px;font-family:'Nunito',sans-serif;font-size:12.5px;line-height:1.55}
.mtpcw-textbook-card[hidden]{display:none}
.mtpcw-textbook-card .mtpcw-tc-icon{font-size:22px;flex-shrink:0;line-height:1}
.mtpcw-textbook-card .mtpcw-tc-body{flex:1;min-width:0}
.mtpcw-textbook-card .mtpcw-tc-body p{margin:0 0 4px}
.mtpcw-textbook-card .mtpcw-tc-body p:last-child{margin-bottom:0}
.mtpcw-textbook-card .mtpcw-tc-link{color:#0077C8;font-weight:700;text-decoration:none;flex-shrink:0;white-space:nowrap}
.mtpcw-textbook-card .mtpcw-tc-link:hover{text-decoration:underline}

/* 04.18.26.015: Outcomes Card. Per-major content surfaced when the
   student picks a major. Hidden until feat_outcomes is on AND at least
   one content field is populated on that major. Uses the same gold-
   themed palette as the other cards; grid layout with 1/2/3 auto-
   responsive columns for the three content sections. */
.mtpcw-outcomes-card{background:#fdf9ec;border:1px solid #c9a84c;border-left:4px solid #c9a84c;color:#3d2e1a;padding:14px 18px;margin:10px 28px 0;border-radius:8px;font-family:'Nunito',sans-serif;font-size:12.5px;line-height:1.55}
.mtpcw-outcomes-card[hidden]{display:none}
.mtpcw-outcomes-card .mtpcw-oc-header{display:flex;align-items:center;gap:14px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(201,168,76,.35)}
.mtpcw-outcomes-card .mtpcw-oc-title-wrap{flex:1;min-width:0}
.mtpcw-outcomes-card .mtpcw-oc-kicker{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#9a7a44;text-transform:uppercase;margin-bottom:2px}
.mtpcw-outcomes-card .mtpcw-oc-title{font-family:'Caveat',cursive;font-size:24px;color:#3d2e1a;line-height:1.1}
.mtpcw-outcomes-card .mtpcw-oc-image{max-height:60px;max-width:120px;border-radius:4px;object-fit:cover;flex-shrink:0}
.mtpcw-outcomes-card .mtpcw-oc-image[hidden]{display:none}
.mtpcw-outcomes-card .mtpcw-oc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mtpcw-outcomes-card .mtpcw-oc-section[hidden]{display:none}
.mtpcw-outcomes-card .mtpcw-oc-heading{font-size:11px;font-weight:800;letter-spacing:.5px;color:#7a5a1a;text-transform:uppercase;margin-bottom:6px}
.mtpcw-outcomes-card .mtpcw-oc-salary-body{font-size:14px;font-weight:700;color:#3d2e1a;line-height:1.35}
.mtpcw-outcomes-card ul{list-style:none;margin:0;padding:0}
.mtpcw-outcomes-card ul li{padding:3px 0;font-size:12.5px;color:#3d2e1a;line-height:1.4}
.mtpcw-outcomes-card ul li + li{border-top:1px dotted rgba(201,168,76,.35)}
.mtpcw-outcomes-card .mtpcw-oc-employers-list li::before{content:"\2022 ";color:#c9a84c;font-weight:800;margin-right:4px}
.mtpcw-outcomes-card .mtpcw-oc-alumni-list li{font-size:12px;color:#3d2e1a}
.mtpcw-career-btn{background:transparent;color:#0077C8;border:1.5px solid #0077C8;padding:11px 16px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,transform .1s}
.mtpcw-career-btn:hover{background:#0077C8;color:#fff}
.mtpcw-career-btn:active{transform:translateY(1px)}
.mtpcw-career-btn[hidden]{display:none}
.mtpcw-career-btn .mtpcw-career-icon{display:inline-block;margin-right:6px;font-size:14px}
.mtpcw-career-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center}
.mtpcw-career-modal.open{display:flex}
.mtpcw-career-ov{position:absolute;inset:0;background:rgba(20,14,8,.72);backdrop-filter:blur(3px)}
.mtpcw-career-card{position:relative;background:#fff;color:#2e2720;border-radius:14px;padding:36px 32px 32px;max-width:640px;width:92%;box-shadow:0 8px 40px rgba(0,0,0,.35);z-index:1;max-height:90vh;overflow-y:auto;font-family:'Nunito',sans-serif;line-height:1.6}
.mtpcw-career-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:#f0e6cc;color:#7a5a1a;border-radius:50%;font-size:14px;cursor:pointer;font-weight:700;line-height:1}
.mtpcw-career-close:hover{background:#c9a84c;color:#fff}
.mtpcw-career-title{font-family:'Caveat',cursive;color:#7a5a1a;font-size:30px;font-style:italic;line-height:1.1;margin:0 0 14px;padding-right:30px}
.mtpcw-career-body{font-size:14px;color:#3d2e1a}
.mtpcw-career-body p{margin:0 0 10px}
.mtpcw-career-body p:last-child{margin-bottom:0}
.mtpcw-career-body a{color:#0077C8;font-weight:700}
@media(max-width:540px){
  .mtpcw-placement-banner{padding:10px 12px;font-size:12.5px}
  .mtpcw-textbook-card{flex-wrap:wrap;margin:10px 14px 0}
  .mtpcw-textbook-card .mtpcw-tc-link{margin-top:4px}
  .mtpcw-career-title{font-size:24px}
  .mtpcw-career-card{padding:28px 20px 22px}
}
.mtpcw-req-close{position:absolute;top:14px;right:18px;font-size:22px;cursor:pointer;color:#9a7a44;line-height:1;padding:4px 8px;border-radius:6px;border:none;background:none}
.mtpcw-req-close:hover{color:#2e2720;background:#f5f0e0}
.mtpcw-req-title{font-family:'Caveat',cursive;font-size:26px;color:#2e2720;margin:0 0 4px;font-style:italic}
.mtpcw-req-sub{font-size:13px;color:#6b5d3e;line-height:1.6;margin-bottom:20px}
.mtpcw-req-field{margin-bottom:13px;position:relative}
.mtpcw-req-field label{display:block;font-size:11px;font-weight:700;color:#7a5a20;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.mtpcw-req-field input,.mtpcw-req-field textarea{width:100%;padding:9px 12px;border:1px solid #ddd4b8;border-radius:7px;font-family:'Nunito',sans-serif;font-size:13.5px;color:#2e2720;background:#fdfbf7;box-sizing:border-box;transition:border-color .15s}
.mtpcw-req-field input:focus,.mtpcw-req-field textarea:focus{border-color:#c9a84c;outline:none}
.mtpcw-req-field textarea{min-height:70px;resize:vertical}
.mtpcw-req-hint{font-size:11px;color:#9a7a44;margin-top:3px}
.mtpcw-req-drop{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #c9a84c;border-top:none;border-radius:0 0 7px 7px;z-index:10;display:none;box-shadow:0 4px 12px rgba(0,0,0,.12);max-height:190px;overflow-y:auto}
.mtpcw-req-drop-item{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0e8d0;color:#2e2720}
.mtpcw-req-drop-item:last-child{border-bottom:none}
.mtpcw-req-drop-item:hover{background:#fdf8ee}
.mtpcw-req-drop-code{font-size:10px;font-weight:700;color:#9a7a44;background:#f5f0e0;padding:2px 6px;border-radius:4px}
.mtpcw-req-submit{background:#c9a84c;color:#fff;border:none;padding:11px 28px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;cursor:pointer;width:100%;transition:background .15s;margin-top:4px}
.mtpcw-req-submit:hover{background:#b07d2a}
.mtpcw-req-submit:disabled{background:#ccc;cursor:not-allowed}
.mtpcw-req-msg{margin-top:12px;padding:10px 14px;border-radius:7px;font-size:13px;display:none}
.mtpcw-req-msg.ok{background:#f0faf0;border:1px solid #a5d6a7;color:#2e7d32;display:block}
.mtpcw-req-msg.err{background:#fdecea;border:1px solid #f5b5ae;color:#b00020;display:block}

/* ============================================================
   04.19.26.011 PHONE CANVAS OVERLAY
   ============================================================
   Fullscreen overlay for phones: tap "View Roadmap Fullscreen",
   canvas relocates into overlay, user gets pinch-zoom + pan + tap
   to select course. Overlay handles landscape rotation via CSS
   + JS. The actual canvas element is SHARED with the inline view
   (JS moves it between parent containers) so all hitTest + draw
   logic works unchanged. */

/* "View Roadmap Fullscreen" button - HIDDEN by default. Only shown
   on phone viewports via @media rules below. */
.mtpcw-phone-open-overlay{display:none}

/* Overlay root - hidden by default (display:none, not visibility,
   so no focus traps or layout impact). JS adds .is-open to reveal. */
.mtpcw-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
  background:#0f0905;
  flex-direction:column;
  overflow:hidden;
  /* prevent iOS rubber-band scroll bleeding to body */
  overscroll-behavior:contain;
  /* respect safe areas on phones with notches */
  padding-top:env(safe-area-inset-top,0);
  padding-bottom:env(safe-area-inset-bottom,0);
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}
.mtpcw-overlay.is-open{display:flex}
/* Prevent body scroll while overlay open. JS adds this class to body. */
body.mtpcw-overlay-locked{overflow:hidden;position:fixed;width:100%}

.mtpcw-overlay-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#1a1208;
  border-bottom:1px solid rgba(201,168,76,.25);
  flex:0 0 auto;
}
.mtpcw-overlay-title{
  font-family:'Caveat',cursive;
  color:#e8c25a;
  font-size:22px;
  line-height:1;
  font-style:italic;
  flex:0 0 auto;
}
.mtpcw-overlay-hint{
  font-size:10.5px;
  color:#9a8a6a;
  font-family:'Nunito',sans-serif;
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  line-height:1.3;
}
.mtpcw-overlay-close{
  background:transparent;
  border:1.5px solid #c9a84c;
  color:#c9a84c;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  padding:0;
  cursor:pointer;
  flex:0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Nunito',sans-serif;
  font-weight:700;
}
.mtpcw-overlay-close:hover,.mtpcw-overlay-close:active{background:#c9a84c;color:#1a1208}

/* Stage = the container where the canvas-wrap is dropped in.
   Fills remaining space, content clipped. The transform origin is
   top-left so pinch-zoom math is predictable. */
.mtpcw-overlay-stage{
  flex:1 1 auto;
  position:relative;
  overflow:hidden;
  background:#ede8dc;
  /* Disable browser's default touch gestures so our JS handlers own them */
  touch-action:none;
  /* GPU layer promotion for smooth pan/zoom transforms */
  will-change:transform;
  contain:strict;
}

/* When canvas-wrap is relocated INTO the stage, override its
   inline-mode layout: fill the stage, no scroll (JS handles pan),
   transform applies to its inner content. */
.mtpcw-overlay-stage .mtpcw-canvas-wrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  min-height:0;
  transform-origin:0 0;
  will-change:transform;
}
.mtpcw-overlay-stage .mtpcw-canvas-wrap canvas{
  position:absolute;
  top:0;
  left:0;
  max-width:none;
  max-height:none;
  touch-action:none;
}
.mtpcw-overlay-stage .mtpcw-canvas-wrap .mtpcw-labels{
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
}

/* Bottom sheet for course detail - slides up from stage bottom */
.mtpcw-overlay-sheet{
  display:none;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-height:50%;
  background:#fdfbf4;
  border-top:2px solid #c9a84c;
  border-radius:16px 16px 0 0;
  box-shadow:0 -8px 24px rgba(0,0,0,.35);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px 18px 16px;
  /* Animation */
  transform:translateY(100%);
  transition:transform .22s ease-out;
  z-index:2;
}
.mtpcw-overlay-sheet.is-open{display:block;transform:translateY(0)}
.mtpcw-overlay-sheet-grip{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:4px;
  border-radius:2px;
  background:rgba(61,46,26,.25);
}
.mtpcw-overlay-sheet-close{
  position:absolute;
  top:8px;
  right:10px;
  background:transparent;
  border:1px solid rgba(61,46,26,.25);
  color:#3d2e1a;
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:18px;
  line-height:1;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mtpcw-overlay-sheet-body{
  color:#3d2e1a;
  font-family:'Nunito',sans-serif;
  font-size:13px;
  line-height:1.5;
  padding-top:8px;
}
.mtpcw-overlay-sheet-body .mtpcw-sheet-code{
  font-size:10.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:700;
  color:#c9a84c;
  margin-bottom:4px;
}
.mtpcw-overlay-sheet-body .mtpcw-sheet-name{
  font-family:'Caveat',cursive;
  font-size:26px;
  font-style:italic;
  color:#3d2e1a;
  line-height:1.1;
  margin:0 0 10px;
  word-break:normal;
  overflow-wrap:break-word;
}
.mtpcw-overlay-sheet-body .mtpcw-sheet-lvl{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:12px;
}
.mtpcw-overlay-sheet-body .mtpcw-sheet-section{
  color:#c9a84c;
  font-size:10.5px;
  letter-spacing:1.5px;
  font-weight:700;
  text-transform:uppercase;
  margin:14px 0 4px;
  border-top:1px solid rgba(201,168,76,.3);
  padding-top:10px;
}
.mtpcw-overlay-sheet-body .mtpcw-sheet-section:first-of-type{border-top:none;padding-top:0}
.mtpcw-overlay-sheet-body .mtpcw-sheet-body{font-size:12.5px;color:#5a4a2a}
.mtpcw-overlay-sheet-body .mtpcw-sheet-body ul{margin:4px 0 0 16px;padding:0}
.mtpcw-overlay-sheet-body .mtpcw-sheet-body li{margin:2px 0}

/* --------- Show the "View Roadmap Fullscreen" button on phones --------- */
@media (max-width:540px){
  .mtpcw-phone-open-overlay{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:calc(100% - 16px);
    margin:10px 8px 4px;
    padding:14px 18px;
    background:linear-gradient(135deg,#c9a84c 0%,#b08830 100%);
    color:#1a1208;
    border:none;
    border-radius:10px;
    font-family:'Nunito',sans-serif;
    font-size:14px;
    font-weight:800;
    letter-spacing:.3px;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(201,168,76,.35);
    min-height:48px;
    touch-action:manipulation;
  }
  .mtpcw-phone-open-overlay:active{transform:scale(.98)}
  .mtpcw-phone-open-overlay span:first-child{font-size:18px;line-height:1}

  /* On phones, hide the inline canvas entirely and direct user to
     the fullscreen button. The cramped inline canvas was the whole
     reason we built the overlay. */
  .mtpcw-canvas-wrap{display:none}
  /* But when the canvas-wrap has been relocated INTO the overlay
     stage, force it visible again. The overlay-stage selector has
     higher specificity so this works without !important. */
  .mtpcw-overlay-stage .mtpcw-canvas-wrap{display:block}
  /* 04.19.26.012: flip the panel-empty hint on phones. The default
     desktop phrase ("Click any course on the map...") is confusing
     when the inline map is hidden. Swap to the phone-specific phrase
     that matches what the user actually sees. */
  .mtpcw-panel-empty-desktop{display:none}
  .mtpcw-panel-empty-phone{display:inline}
  /* Hide the canvas tools strip inline too - the Download Roadmap
     button and help button will be offered inside the overlay instead
     in a future iteration. For now users can still download the PDF
     from the inline tools strip if admin configured it above the
     canvas wrap. */
}

/* ============================================================
   04.19.26.005 MOBILE OVERHAUL
   ============================================================
   Dedicated phone-first redesign targeting 360-420px Android
   viewports. Additive: no desktop or tablet rules are modified.
   All selectors prefixed with .mtpcw- so scope cannot leak. */

/* ---------- LARGE PHONE / SMALL TABLET (540-720px) ---------- */
@media (max-width:720px){
  .mtpcw-row{padding:8px 12px;gap:6px}
  .mtpcw-legend-bar{padding:8px 12px}
  .mtpcw-canvas-tools{padding:6px 10px}
}

/* ---------- PHONE (up to 540px) - PRIMARY FIX LAYER ---------- */
@media (max-width:540px){

  /* === 04.19.26.006 PADDING NORMALIZATION ===
     The admin-only notices (Course Wizard / Roadmap) use inline
     style="margin:10px 28px 0" - those 28px side margins become
     red bands on 360-400px Android viewports since they shrink
     the visible content by 56px. Override inline styles with
     attribute selectors + !important. Also normalize the textbook
     and outcomes cards which share the same 28px margin pattern. */
  .mtpcw-wrap > div[style*="margin:10px 28px"],
  .mtpcw-wrap div[style*="margin:10px 28px"]{
    margin-left:8px !important;
    margin-right:8px !important;
    margin-top:8px !important;
    box-sizing:border-box !important;
    max-width:calc(100vw - 16px) !important;
  }
  .mtpcw-textbook-card,
  .mtpcw-outcomes-card{
    margin-left:8px !important;
    margin-right:8px !important;
    box-sizing:border-box !important;
    max-width:calc(100vw - 16px) !important;
  }
  /* Ensure the outermost wrap itself has zero residual side margin
     that would be painted by a parent theme as page background bleed */
  .mtpcw-wrap,.mtpcw-root{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100vw;
    box-sizing:border-box;
  }

  /* === HEADER COMPRESSION === */
  .mtpcw-root{margin:0;border-radius:0}
  .mtpcw-hdr{padding:14px 14px 8px}
  .mtpcw-hdr .mtpcw-h{font-size:32px;line-height:1.05}
  .mtpcw-hdr .mtpcw-cap{font-size:10.5px;letter-spacing:2px;margin-top:2px}

  /* Row 1: logo left, school picker right */
  .mtpcw-row{padding:10px 12px 4px;gap:8px;flex-wrap:wrap}
  .mtpcw-school-logo{width:40px;height:40px;padding:3px;flex:0 0 40px}
  .mtpcw-school-picker{min-width:0;flex:1 1 auto;width:calc(100% - 52px)}
  .mtpcw-school-input,.mtpcw-sel{width:100%;min-width:0;padding:10px 14px 10px 38px !important;font-size:13px}

  /* Row 2: major search full-width */
  .mtpcw-search-wrap{width:100%;flex:1 1 100%;order:10}
  .mtpcw-search{width:100%;min-width:0;padding:11px 14px 11px 38px !important;font-size:13px}

  .mtpcw-row .mtpcw-compare-btn,
  .mtpcw-row .mtpcw-chart-btn{width:100%;padding:10px 16px;font-size:13px;order:20}

  .mtpcw-row-icons{order:30;width:100%;justify-content:space-between;gap:8px;margin-left:0;padding:4px 0}
  .mtpcw-row-rightcap{width:100%;margin-left:0;justify-content:space-around;padding:4px 0}

  /* === LEGEND - horizontal scroll, not wrap === */
  .mtpcw-legend{padding:6px 12px;gap:8px;row-gap:6px;overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity}
  .mtpcw-legend-grp{gap:10px;flex-shrink:0;scroll-snap-align:start}
  .mtpcw-legend-item{flex-shrink:0;padding:5px 10px;font-size:11px;border-radius:14px}

  .mtpcw-legend-bar{padding:6px 12px;flex-direction:column;align-items:stretch;gap:6px}
  .mtpcw-legend-types{overflow-x:auto;flex-wrap:nowrap}
  .mtpcw-legend-rightcap{justify-content:center;padding:4px 0}

  /* === CANVAS - scrollable with usable minimum width === */
  .mtpcw-canvas-wrap{
    overflow-x:auto;
    overflow-y:hidden;
    min-height:280px;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }
  .mtpcw-canvas-wrap canvas{min-width:720px;touch-action:pan-x pan-y}
  .mtpcw-canvas-wrap .mtpcw-labels{min-width:720px}
  .mtpcw-canvas-wrap.mtpcw-fit{overflow-x:auto}
  .mtpcw-canvas-wrap.mtpcw-fit canvas{min-width:720px}
  /* "swipe to pan" hint using actual arrow char, not a CSS escape
     (CSS content: strings swallow backslash-escapes when the
     stylesheet is served via PHP heredoc, which is why my v004
     attempt printed "2194" as literal text). Use the UTF-8 byte
     sequence for U+2194 directly. */
  .mtpcw-canvas-col::after{
    content:"↔ swipe to pan";
    display:block;
    text-align:center;
    font-size:10.5px;
    color:#9a8a6a;
    font-style:italic;
    padding:4px 0 8px;
    font-family:'Nunito',sans-serif;
    letter-spacing:.5px;
  }

  /* === DETAIL PANEL === */
  .mtpcw-panel{padding:14px 16px;font-size:13px}
  .mtpcw-panel-name{font-size:24px;margin:0 0 10px;line-height:1.1}
  .mtpcw-panel-code{font-size:10.5px;letter-spacing:1.2px}
  .mtpcw-panel-lvl{font-size:10px;padding:3px 10px}
  .mtpcw-panel-section{font-size:10.5px;letter-spacing:1.5px;margin:14px 0 4px;padding-top:10px}
  .mtpcw-panel-body{font-size:12.5px;line-height:1.55}
  .mtpcw-panel-cta{padding:13px 20px;font-size:13px}

  /* === PLAN YOUR PATH - fix word-per-line wrap bug === */
  .mtpcw-path-inner{padding:16px 14px 20px;min-width:0}
  .mtpcw-path > *,
  .mtpcw-path-inner > *{min-width:0;max-width:100%}
  .mtpcw-path-hdr{padding-right:0;margin-bottom:10px}
  .mtpcw-path-title{font-size:22px;line-height:1.1}
  .mtpcw-path-major{display:block;margin-top:2px}
  .mtpcw-path-desc{font-size:12px;line-height:1.5;max-width:100%}
  .mtpcw-path-close-btn{position:static;display:inline-block;margin-top:10px;padding:7px 16px;font-size:12px}
  .mtpcw-path-section,.mtpcw-path-section-lbl,.mtpcw-path-grid,.mtpcw-path-opt{min-width:0;max-width:100%;box-sizing:border-box}
  .mtpcw-path-opt{
    padding:12px 14px;
    font-size:13px;
    min-height:44px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .mtpcw-path-code{font-size:11px;padding:2px 7px;letter-spacing:.3px}
  .mtpcw-path-name{font-size:12.5px;line-height:1.35}
  .mtpcw-path-opt input[type=checkbox]{
    width:20px;height:20px;
    flex:0 0 20px;
    accent-color:#c9a84c;
  }
  .mtpcw-path-display-strip{gap:8px;margin:2px 0 8px;padding:0}
  .mtpcw-col-btn{padding:4px 8px;font-size:10px}
  /* 04.19.26.015: hide the 3/4/6 column toggle on phones. The
     phone media query above locks .mtpcw-path-grid to 2 columns,
     so the toggle would do nothing. Keep "Codes only" visible
     since it still works (hide-names class can toggle on any col
     count). Layout collapses gracefully to a single control. */
  .mtpcw-path-cols-toggle{display:none !important}
  .mtpcw-path-exam-grid{grid-template-columns:1fr;gap:6px}

  /* === COMPARE MAJOR DIALOG - full-screen on phones === */
  .mtpcw-compare-modal,.mtpcw-cmp-modal{
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100vw;height:100vh;max-width:100vw;max-height:100vh;
    margin:0;padding:16px 14px 24px;
    border-radius:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:9999;
  }
  .mtpcw-compare-modal .mtpcw-cmp-close,
  .mtpcw-cmp-modal .mtpcw-cmp-close{position:fixed;top:10px;right:10px;z-index:1}
  .mtpcw-cmp-section,.mtpcw-cmp-row{width:100%;min-width:0;box-sizing:border-box}
  .mtpcw-cmp-cta,.mtpcw-compare-action{width:100%;padding:13px 18px;font-size:13px}

  /* === REQUEST SCHOOL MODAL === */
  .mtpcw-req-modal{padding:14px;border-radius:0;min-height:100vh}
  .mtpcw-req-field{margin-bottom:10px}
  .mtpcw-req-field input,.mtpcw-req-field textarea{padding:11px 14px;font-size:14px}
  .mtpcw-req-submit{padding:13px 20px;font-size:14px}

  .mtpcw-tools-btn{padding:8px 14px;font-size:12px;min-height:36px}
  .mtpcw-fit-toggle{display:none}
  .mtpcw-footer{padding:14px 16px 20px;font-size:11.5px;line-height:1.5}
}

/* ---------- NARROW PHONE (up to 400px) ---------- */
@media (max-width:400px){
  .mtpcw-hdr .mtpcw-h{font-size:28px}
  .mtpcw-hdr .mtpcw-cap{font-size:10px;letter-spacing:1.5px}
  .mtpcw-row{padding:8px 10px 4px}
  .mtpcw-panel-name{font-size:22px}
  .mtpcw-path-title{font-size:20px}
  .mtpcw-legend{padding:5px 10px;gap:6px}
  .mtpcw-legend-item{padding:4px 9px;font-size:10.5px}
}