/* FAST-01 portal additions on top of sourcepro.css (the unchanged D2.5-V2.3 design system).
   Only covers controls and states the standalone prototype did not have: e-mail/password inputs, multi-selects, the account menu,
   error toasts, the sign-in page and wrapping table cells. All values use the original design tokens. */
input[type=email],input[type=tel],input[type=url],input[type=date],input[type=password],input[type=search]{width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 14px; font-size:1rem; font-family:inherit; color:inherit}
select[multiple]{min-height:150px; padding:6px}
select[multiple] option{padding:6px 8px; border-radius:8px}
label.field small{font-weight:500}
.lp-main{display:flex; flex-direction:column; gap:var(--gap, 18px); min-width:0}
.lp-main > .stack{width:100%}

/* FINAL-01/UIUX-11: skip link -- visually hidden until focused, so keyboard/screen-reader users can jump past the header. */
.lp-skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--violet); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; font-weight:700; text-decoration:none}
.lp-skip:focus{left:0}

/* FINAL-01/UIUX-REQA: the header "More" link that replaces each portal's old dropdown clutter. */
.l4-more-link{display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; color:var(--muted); font-weight:700; font-size:.85rem; text-decoration:none; margin-right:4px; white-space:nowrap}
.l4-more-link:hover{background:var(--sunk); color:var(--ink)}
@media (max-width:520px){.l4-more-link span{display:none} .l4-more-link{padding:8px}}

/* UI correction: this reserved a fixed 240px-plus-gap right-hand column on EVERY page in the application
   (shell() renders it identically for all 8 portals) for a collapsed "video guide coming soon" accordion --
   no video has ever existed in this environment, so every single screen permanently sacrificed real
   workspace width to an empty reserved column. That is the actual, platform-wide source of the "wide
   empty area to the right of the main information" complaint, not something specific to one dashboard.
   #main now takes the full width everywhere; the (unchanged, still-collapsed-by-default) video-guide
   feature renders as a small, compact note below the content instead of a permanent side rail. */
.lp-mainwrap{display:block}
.lp-vguide{margin-top:20px; max-width:360px}
.lp-vguide-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.lp-vguide-box summary{display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-size:.85rem; color:var(--muted)}
.lp-vguide-box summary::-webkit-details-marker{display:none}
.lp-vguide-box summary b{color:var(--ink); flex:1}
.lp-vguide-caret{transition:transform .15s}
.lp-vguide-box[open] .lp-vguide-caret{transform:rotate(180deg)}
.lp-vguide-body{padding-top:10px}
.lp-vguide-body .tiny{font-size:.76rem}
@media (max-width:900px){.lp-vguide-box{border-radius:12px}}
.toast.err{background:var(--bad); color:#fff}
details.lp-me{position:relative}
details.lp-me > summary{list-style:none; cursor:pointer; border:none; padding:0}
details.lp-me > summary::-webkit-details-marker{display:none}
details.lp-me .menu{min-width:230px}
details.lp-me .menu .menu-sep{font-weight:800; color:var(--ink); padding:8px 12px 0; font-size:.92rem}
.lp-menu-note{padding:0 12px 6px}
td.wrap,th.wrap{white-space:normal; min-width:180px}
.tablewrap td .pill{margin-right:4px}
.lp-empty{padding:4px 2px}
.lp-prog{margin:4px 0}
.lp-tag-row{display:flex; flex-wrap:wrap; gap:6px}
.lp-sub{display:flex; flex-wrap:wrap; gap:8px}
.lp-sub a{text-decoration:none}
.lp-answer{background:var(--sunk); border-radius:12px; padding:12px 14px; white-space:pre-wrap; font-size:.94rem}
.lp-review{border-left:4px solid var(--violet)}
.lp-mods{display:flex; flex-direction:column; gap:8px}
.lp-mod{display:grid; grid-template-columns:2fr 1fr 2fr; gap:8px}
@media (max-width:640px){.lp-mod{grid-template-columns:1fr}}
.lp-hero-actions{display:flex; gap:8px; flex-wrap:wrap}
.lp-check{display:flex; gap:10px; align-items:flex-start; font-weight:500; font-size:.92rem}
.lp-check input{margin-top:3px; width:18px; height:18px; accent-color:var(--violet)}
.lp-result-row{display:grid; grid-template-columns:minmax(120px,1fr) 3fr auto; gap:10px; align-items:center; font-size:.9rem}
.lp-stage{display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center}
.lp-stage i{font-style:normal; padding:3px 9px; border-radius:99px; background:var(--sunk); color:var(--muted); font-size:.74rem; font-weight:700}
.lp-stage i.on{background:var(--violet-soft); color:var(--violet)}
.lp-stage i.done{background:var(--teal-soft); color:var(--good)}

/* Sign-in page, modelled on the original welcome screen */
.lp-login{min-height:100vh; display:flex; flex-direction:column}
.lp-login main{flex:1; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px}
.lp-login-in{width:100%; max-width:980px; display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:820px){.lp-login-in{grid-template-columns:1fr}}
.lp-login .welcome-brand{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.lp-login .welcome-brand img{height:64px; width:auto}
.lp-portals{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.lp-portals button{border:1.5px solid var(--line); background:var(--surface); border-radius:14px; padding:12px 8px; font:inherit; font-weight:700; cursor:pointer; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:4px}
.lp-portals button.on{border-color:var(--violet); background:var(--violet-soft); color:var(--violet)}
.lp-demo{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.lp-demo button{width:100%; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 12px; font:inherit; cursor:pointer; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap}
.lp-demo button:hover{border-color:var(--violet)}
.lp-demo code{font-size:.8rem; color:var(--muted)}
.lp-barrow{gap:10px; flex-wrap:nowrap}
.lp-barrow .fbar{flex:1; height:12px}
.lp-barrow .fbar span{background:var(--brand)}
.lp-barrow .mono{min-width:3em; text-align:right}
.lp-sel{background:var(--violet-soft)}
details.lp-me > summary.avatar-btn{color:var(--on-violet); display:grid; place-items:center}
a.chipbtn{text-decoration:none; color:inherit; display:inline-flex; align-items:center}
a.chipbtn.on{color:var(--violet)}
/* FINAL-01/UIUX-04: superseded by the --tabn custom-property rule in sourcepro.css, which handles any tab count (not just 4/5). Kept as a harmless no-op selector in case any cached markup still carries the old lp-tabs-N class. */
.lp-dim{opacity:.62}
.lp-scale button{min-width:40px; width:auto; padding:0 10px}
.lp-scale{flex-wrap:wrap}
.qopt[aria-pressed="true"]{border-color:var(--violet); background:var(--violet-soft)}
.chipbtn[aria-pressed="true"]{background:var(--violet-soft); border-color:var(--violet); color:var(--violet)}
.likert + .likert{border-top:1px solid var(--line); padding-top:12px}
.qopt.wrong[aria-pressed="true"]{border-color:var(--bad); background:var(--bad-soft)}
/* FAST-03: field-level errors and environment banner */
.field-err{display:block;color:#b42318;font-size:.82rem;margin-top:4px;font-weight:600}
[aria-invalid="true"]{border-color:#b42318!important;box-shadow:0 0 0 2px rgba(180,35,24,.15)}
.env-banner{background:#13235b;color:#fff;font-size:.8rem;padding:6px 16px;text-align:center}
.env-banner b{color:#ffb35c}
.code-once{font-family:ui-monospace,monospace;font-size:1.1rem;letter-spacing:.06em;background:#fff7ed;border:1px dashed #f08a24;padding:10px 14px;border-radius:10px;display:inline-block;user-select:all}
/* FAST-04: the account menu grew (portal links, journeys); keep it inside the viewport and scrollable (D-F04-05) */
details.lp-me .menu{max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain}
.linkbtn{background:none;border:0;color:var(--brand,#6E61E9);cursor:pointer;padding:0 2px;font:inherit;text-decoration:underline}
.lp-me-row td{font-weight:700;background:rgba(110,97,233,.07)}
/* FAST-04.2: build label, guided journey steps, workspace and defect review */
.lp-build{font-weight:700}
.lp-steps{padding-left:1.2rem}
.lp-step{padding:8px 0;border-bottom:1px solid rgba(110,97,233,.12)}
.lp-step .row{flex-wrap:wrap;gap:6px}
.lp-expected{color:#2f5d3a}
.pill.lp-role{background:#eef0ff;color:#4b40c9}
.lp-prereq{margin:4px 0 0 1.1rem}
.lp-defect{padding:6px 0}
.lp-defect .row input{min-width:0;max-width:100%}

/* ===== FAST-04.2 Phase 0: public welcome, sign up, organisation requests ===== */
.lp-public .bar-in{display:flex; align-items:center; justify-content:space-between; gap:12px}
.lp-pubnav{display:flex; gap:8px}
.lp-public .lp-login-in{grid-template-columns:1fr; max-width:980px; margin-inline:auto; align-items:start}
/* UI correction: sign-in/create-account is a dialog now, not a section embedded in the homepage's
   scroll flow -- the first screen communicates product value, never a form (Problem B). Native <dialog>:
   no extra dependency, built-in Escape-to-close and top-layer stacking; a backdrop click close is wired
   in index.js. */
dialog.lp-auth-dialog{border:none; border-radius:var(--r-xl); padding:28px; width:min(480px,calc(100vw - 32px)); max-height:min(640px,calc(100vh - 48px)); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); position:relative}
dialog.lp-auth-dialog::backdrop{background:rgba(5,4,12,.6); backdrop-filter:blur(2px)}
.lp-dialog-x{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--sunk); color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; display:grid; place-items:center}
.lp-dialog-x:hover{background:var(--line)}
/* Compact sign-in/create-account card (replaces the old two-large-cards layout). */
.lp-auth{max-width:440px; width:100%}
.lp-auth [role="tabpanel"] .small.muted{margin-top:0}
.lp-roles-compact{display:flex; flex-wrap:wrap; gap:8px}
.lp-role-compact{flex:1 1 100px; text-align:center; padding:12px 10px; border-radius:12px}
.lp-role-compact b{font-size:.92rem}
/* UI correction: a real two-column hero -- left column (~55%) the message, right column (~45%) an
   original SVG career-journey graphic (path + waypoints + a gold "reached" marker), replacing both the
   previous empty right-hand gap and the interim CSS-only decorative glow. Stacks on mobile. */
.lp-hero{display:flex; flex-direction:column; gap:8px; padding:28px 4px 4px}
.lp-hero-split{display:grid; grid-template-columns:55fr 45fr; gap:clamp(20px,4vw,48px); align-items:center; padding-top:8px}
.lp-hero-text{display:flex; flex-direction:column; gap:8px; min-width:0}
.lp-hero-art{min-width:0}
.lp-hero-art svg{width:100%; height:auto; display:block}
@media (max-width:820px){.lp-hero-split{grid-template-columns:1fr} .lp-hero-art{max-width:280px; margin-inline:auto; order:-1}}
.lp-hero h1{font-size:clamp(1.6rem, 4vw, 2.4rem); line-height:1.1; margin:0}
.lp-sub-h{font-size:clamp(1.05rem, 2vw, 1.3rem); font-weight:700; color:var(--violet-text); margin:0}
/* .lp-login main is itself a flex row centering a single card (reset.html, register.html, etc.) --
   index.html now has a second block (the narrative sections) that must stack below, not become a
   second flex item beside the first. One wrapper keeps it the single flex child everywhere else
   already assumes, while its own children stack as normal block flow. */
.lp-page-stack{width:100%}
.lp-hero .lead{max-width:62ch; color:var(--muted); margin:0}

/* ===== Homepage narrative sections (brand storytelling, below the functional sign-in/sign-up block) ===== */
.lp-story{padding-block:32px}
.lp-story + .lp-story{border-top:1px solid var(--line)}
.lp-story h2{font-size:clamp(1.3rem, 3vw, 1.8rem); margin:0 0 10px}
.lp-story .lead{max-width:68ch}
/* UI correction: five plain white text boxes replaced with a connected journey -- an icon badge per
   step, a horizontal connector between steps (desktop only, where all five share one row; it would be
   misleading across a wrapped mobile grid so it's hidden there instead of faked), consistent card
   heights via the shared grid row, and purposeful violet/blue/gold accents for the icon badges. */
.lp-concepts{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; margin-top:18px; align-items:stretch}
.lp-concept{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; min-width:0; position:relative}
.lp-concept:not(:last-child)::after{content:""; position:absolute; top:33px; left:100%; width:14px; height:2px; background:var(--line)}
.lp-concept-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; margin-bottom:10px}
.lp-concept-ic.violet{background:var(--violet-soft); color:var(--violet-text)}
.lp-concept-ic.blue{background:var(--blue-soft); color:var(--blue)}
.lp-concept-ic.gold{background:var(--gold-soft); color:var(--gold)}
.lp-concept b{display:block; color:var(--ink); font-size:1.02rem; margin-bottom:6px}
.lp-concept p{margin:0; color:var(--muted); font-size:.9rem; overflow-wrap:anywhere}
@media (max-width:900px){.lp-concepts{grid-template-columns:repeat(2, minmax(0,1fr))} .lp-concept::after{display:none}}
@media (max-width:520px){.lp-concepts{grid-template-columns:1fr}}
.lp-closing{text-align:center; padding-block:40px}
.lp-closing h2{font-size:clamp(1.4rem, 3.4vw, 2rem)}
.lp-closing .lead{max-width:56ch; margin-inline:auto}
.lp-closing .lp-hero-actions{justify-content:center}
#signin-card{border-top:4px solid var(--violet)} #join-card{border-top:4px solid var(--gold, #F5A623)}
.lp-roles{display:grid; gap:10px}
.lp-role-card{display:flex; flex-direction:column; gap:4px; border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--surface); color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s}
.lp-role-card:hover, .lp-role-card:focus-visible{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); outline:none}
.lp-role-card b{font-size:1.02rem}
.lp-choose{display:grid; gap:10px}
.lp-pw{display:flex; align-items:stretch; gap:0; position:relative}
.lp-pw input{flex:1; padding-right:70px}
.lp-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:var(--violet-soft); color:var(--violet); font:inherit; font-size:.8rem; font-weight:700; border-radius:8px; padding:6px 10px; cursor:pointer}
.lp-eye:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.lp-check{display:flex; gap:10px; align-items:flex-start; font-weight:600; cursor:pointer; flex-wrap:wrap}
.lp-check input{width:20px; height:20px; margin-top:2px; accent-color:var(--violet); flex:none}
.lp-check .field-err{flex-basis:100%}
.lp-ok{color:#067647; font-weight:600}
.lp-steps{list-style:none; display:flex; gap:6px; padding:0; margin:0; flex-wrap:wrap}
.lp-steps li{display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--muted); padding:4px 10px 4px 4px; border-radius:999px; background:var(--sunk)}
.lp-steps li span{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--line); color:var(--ink); font-size:.75rem}
.lp-steps li.on{color:var(--violet)} .lp-steps li.on span{background:var(--violet); color:#fff}
.lp-steps li.done span{background:#12B76A; color:#fff}
.lp-fs{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.lp-fs legend{font-weight:800; font-size:.95rem; margin-bottom:6px; padding:0}
.lp-wide{width:100%; max-width:980px}
.lp-tabs2{display:inline-flex; gap:4px; background:var(--sunk); border-radius:12px; padding:4px; align-self:flex-start}
.lp-tabs2 button{border:0; background:transparent; font:inherit; font-weight:700; padding:8px 18px; border-radius:9px; cursor:pointer; color:var(--muted)}
.lp-tabs2 button[aria-selected="true"]{background:var(--surface); color:var(--violet); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.lp-ref{font-family:ui-monospace, monospace; font-size:1.1rem; letter-spacing:.04em; color:var(--violet)}
.foot a{margin-left:auto}
@media (max-width:820px){ .lp-public .lp-login-in{grid-template-columns:1fr} .lp-public main{padding:20px 16px} }

/* ===== FAST-04.2 Phase 1: Build my profile (5 steps) ===== */
.pf2-steps{padding:6px 0 8px; display:flex; flex-direction:column; gap:8px}
.pf2-steps ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.pf2-steps a{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background:var(--surface); border:1.5px solid var(--line); color:var(--ink); text-decoration:none; font-weight:600; font-size:.86rem; min-height:44px}
.pf2-steps a.on{border-color:var(--violet); background:var(--violet-soft); color:var(--violet)}
.pf2-n{flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--sunk); font-size:.78rem; font-weight:800}
.pf2-steps a.on .pf2-n{background:var(--violet); color:#fff} .pf2-steps a.done .pf2-n{background:#12B76A; color:#fff}
.pf2-pct{display:flex; flex-direction:column; gap:4px}
@media (max-width:720px){ .pf2-steps ol{grid-template-columns:repeat(5,minmax(44px,1fr))} .pf2-t{display:none} .pf2-steps a{justify-content:center; padding:8px 4px} .pf2-steps a.on .pf2-t{display:none} }
.pf2-fs{border:0; border-top:1px solid var(--line); padding:12px 0 0; margin:0; display:flex; flex-direction:column; gap:10px}
.pf2-fs legend{font-weight:800; padding:0 6px 0 0}
.pf2-levels{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.pf2-lv{text-align:left; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 12px; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:2px; color:var(--ink); min-height:44px}
.pf2-lv small{color:var(--muted); font-size:.76rem; line-height:1.25}
.pf2-lv[aria-checked="true"]{border-color:var(--violet); background:var(--violet-soft)} .pf2-lv[aria-checked="true"] b{color:var(--violet)}
.pf2-lv:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.pf2-actions{display:flex; flex-direction:column; gap:6px; border-top:4px solid var(--violet)}

.pf2-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.pf2-list li{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.pf2-sub{padding-top:10px}
details#aq-add > summary, details#it-add > summary{list-style:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer}
details#aq-add > summary::-webkit-details-marker, details#it-add > summary::-webkit-details-marker{display:none}
.pf2-photo{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none}
.pf2-photo-empty{display:inline-grid; place-items:center; background:var(--violet-soft); color:var(--violet); font-weight:800; font-size:1.3rem}
.pf2-confirmed{border-left:4px solid #12B76A}
.pf2-dl{margin:0; display:grid; grid-template-columns:1fr; gap:4px}
.pf2-kv{display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:10px; padding:4px 0; border-bottom:1px dashed var(--line)}
.pf2-kv dt{color:var(--muted); font-size:.85rem} .pf2-kv dd{margin:0; font-size:.9rem; overflow-wrap:anywhere}
.pf2-miss{color:#B54708; font-weight:600}
@media (max-width:560px){ .pf2-kv{grid-template-columns:1fr; gap:0} }

/* FAST-04.10 Phase 6: plan lists */
.p6 ul.stack, .p6-todaylist, .p6-cal ol.stack, .p6-res ul.stack { list-style: none; padding: 0; margin: 0; }
li.p6-act, li.p6-calw, li.p6-resource { text-align: left !important; align-items: stretch !important; }
li.p6-act .row, li.p6-calw .row, li.p6-resource .row { justify-content: flex-start !important; }
li.p6-act > .row.between, li.p6-calw > .row.between, li.p6-resource > .row.between, .p6-week > .row.between, li.p6-change { justify-content: space-between !important; }
.p6-now { border-left: 4px solid var(--violet, #6c5ce7); padding-left: 8px; }
.p6 .row, .p6-today .row, .p6-cal .row, .p6-res .row, .p6-hist .row { margin-left: 0 !important; margin-right: 0 !important; }
.p6-week > .row, li.p6-act > .row.between, li.p6-calw > .row.between, li.p6-resource > .row.between { width: 100%; }

/* FAST-04.11 Phase 7: Learning Hub, lesson player and sessions */
.p7 ul.stack, .p7 ul.grid, .p7-slist, .p7-recs, .p7-sugg ul, #p7-libl { list-style: none; padding: 0; margin: 0; }
.p7 .row, .p7-today .row, .p7-col .row { margin-left: 0 !important; margin-right: 0 !important; }
li.p7-sess, li.p7-rec, li.p7-fb, li.p7-libitem, .p7-sec, .p7-q { text-align: left !important; align-items: stretch !important; }
li.p7-sess .row, li.p7-rec .row, .p7-sec .row, .p7-q .row, .p7-sg .row { justify-content: flex-start !important; }
li.p7-sess > .row.between, li.p7-rec > .row.between, .p7-sec > .row.between, li.p7-fb > .row.between { justify-content: space-between !important; width: 100%; }
.p7-list { margin: 0; padding-left: 1.2rem; } .p7-list li { margin: 2px 0; }
.p7-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.p7-side { position: static; }
@media (max-width: 960px) { .p7-cols { grid-template-columns: 1fr; } .p7-side { position: static; } }
.p7-sec.done { border-left: 4px solid #12B76A; }
.p7-flash { outline: 3px solid var(--violet, #6c5ce7); outline-offset: 2px; transition: outline-color .4s; }
.p7-q { border-top: 1px dashed var(--line, #e4e4ec); padding-top: 10px; } .p7-q.ok .p7-fbk { color: #067647; }
.p7-opt { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } .p7-opt input { margin-top: 3px; }
.p7-chart { margin: 0; display: grid; gap: 6px; } .p7-bar { display: grid; grid-template-columns: 56px 1fr 48px; gap: 8px; align-items: center; font-size: .9rem; }
.p7-bar i { display: block; height: 14px; border-radius: 7px; background: var(--violet, #6c5ce7); min-width: 4px; } .p7-bar b { text-align: right; }
.p7-ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .p7-ladder li { border-left: 3px solid var(--line, #e4e4ec); padding-left: 8px; }
.p7-ladder li.ok { border-color: #12B76A; } .p7-ladder li.pend { border-color: #F79009; } .p7-ladder li.na { opacity: .7; }
.p7-comp #p7-q { flex: 1; min-width: 0; } .p7-cite button.link, .p7-comp button.link { padding: 0; }
.p7-meta { gap: 6px; } .p7-dbox textarea { width: 100%; }
.p7-sub a[aria-current="page"] { font-weight: 800; }
.p7c ul.stack { list-style: none; padding: 0; margin: 0; } .p7c .row { margin-left: 0 !important; margin-right: 0 !important; }
.p7c-roster td select, .p7c-roster td input { width: 100%; min-width: 110px; }
.p7c-warn { border-left: 4px solid #F79009; padding-left: 8px; }
.p7-meta > span, .p7 .p7-meta .chip, .p7-meta .pill { white-space: normal; max-width: 100%; height: auto; line-height: 1.3; text-align: left; }
/* FAST-04.12 learning by doing */
.p8-sent{font-size:1.15rem;line-height:1.45;margin:0}.p8-qt{font-size:1.05rem}.p8-pager{margin-top:.5rem}.p8-filter{align-items:end}.p8 .p8-opt{text-align:left;white-space:normal}
.p8-fb ul{margin:.25rem 0}.p8c table td .btn{margin:.1rem}
.p8-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}.p8-qq{border:0;padding:0;margin:0}

/* FAST-04.13 Phase 9: portfolio, learning resources, college outcomes, employer view (mobile-first; no horizontal scroll at 360 px) */
.p9 .p9-item, .p9 .p9-res { overflow-wrap: anywhere; }
.p9-dl { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: .25rem .75rem; margin: 0; }
.p9-dl dt { font-weight: 600; } .p9-dl dd { margin: 0; overflow-wrap: anywhere; }
.p9-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.p9-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.p9 select[multiple] { min-height: 7rem; width: 100%; }
.p9 input[type=text], .p9 input[type=url], .p9 input[type=search], .p9 textarea, .p9 select { max-width: 100%; box-sizing: border-box; }
.p9-link { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; }
.p9c-tablewrap { overflow-x: auto; max-width: 100%; } .p9c-t { border-collapse: collapse; width: 100%; font-size: .9rem; }
.p9c-t th, .p9c-t td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line, #e5e7eb); vertical-align: top; }
.p9e .card, .p9c .card { overflow-wrap: anywhere; }
.p9 :focus-visible, .p9c :focus-visible, .p9e :focus-visible { outline: 3px solid #6d28d9; outline-offset: 2px; }
.p9 ul.stack, .p9c ul.stack, .p9e ul.stack { list-style: none; padding-left: 0; margin-left: 0; }
.p9 .p9-res, .p9 .p9-item { text-align: left; }
.p9 .card, .p9c .card, .p9e .card { text-align: left; }
.p9 .card > .row.between, .p9e .card > .row.between { justify-content: space-between; }
.p9 .row.wrap button, .p9 .row button.btn { flex: 0 0 auto; }

/* FAST-04.13.1 accessibility audit: links on the page background in Phase 9 views meet 4.5:1 */
.p9 a.link, .p9e a.link, .p9c a.link { color: var(--violet-text); }