/* ============================================================ MATTHEW HOUSE - ADD NEW PROGRAM WIZARD Verbatim port of _handoff/Program Wizards (Add New Program, wz2 variant). Every rule is scoped under :is(#pgWiz,#schWiz,#latePts) so the mock's generic class names (.field, .icf, .modal, .ui-btn ...) never leak into the app. The demo canvas cream body is intentionally dropped - the wizard is a modal here, and the app-wide standing rule is ONE cool-gray background, no cream. Only the wz2 chrome the Add New Program screen actually uses is kept. ============================================================ */ /* ============================================================================= #latePts JOINED THIS FILE'S SELECTOR GROUP ON PURPOSE (Aug 9 2026). The staff "how many points was this late visit worth" prompt had to look like the app's own wizards, not like a new dialog invented for it. Rather than copying the field kit, the buttons and the modal shell into a fourth place - which is how three of them drift apart - the overlay's id was added to EVERY selector in this file. It therefore gets the shell, .modal, .field, .icf, .ui-btn and the tokens for free, and can never drift from the wizards, because there is nothing separate to drift. Rules it does not use simply do not match. The handful of things unique to it (the child list) are at the END of this file, scoped #latePts alone. ============================================================================= */ :is(#pgWiz,#schWiz,#latePts){ --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; /* Brand accent = the LEFT-RAIL / sidebar teal (#2E4A43 -> #213A33), so EVERY accent inside the wizard - primary buttons, "Step x of 4" bar, the toggle switch, the day-of-week toggles, selected dropdown options, the review hero - is the same colour and matches the rail (was the brighter pine #3E6B57). */ --brand:#2E4A43; --brand-600:#375A50; --brand-700:#213A33; --brand-tint:rgba(46,74,67,.12); --brand-tint-2:rgba(46,74,67,.18); --brand-glow:rgba(33,58,51,.35); --ink-1:#1C2733; --ink-2:#3B474B; --ink-3:#677579; --ink-4:#9AA7B3; --danger:#C0473F; --danger-bg:#F7E3E1; --danger-ink:#8C312B; --bg-canvas:#E8EBF0; /* inset cool field tokens (tuned against the #E8EBF0 cool canvas) */ --f-rest-bg:#DFE4EA; --f-rest-bd:rgba(40,60,80,.10); --f-rest-sh:inset 0 1px 2px rgba(40,60,80,.10); --f-hover-bg:#E4E8ED; --f-focus-bg:#FFFFFF; --f-focus-bd:rgba(40,60,80,.16); --f-focus-sh:0 10px 28px rgba(40,60,80,.14); --line:rgba(40,60,80,.08); --r-sm:9px; --r-md:12px; --r-lg:16px; --r-pill:999px; --ease:cubic-bezier(.2,.7,.25,1); --t:.2s var(--ease); /* CTA accent = the LEFT-RAIL gradient colours (deep teal #2E4A43 -> #213A33), so the "Step x of 4" progress bar and the primary buttons match each other AND the sidebar (was the brighter pine --brand). ONE definition -> guaranteed identical. */ --pg-cta:linear-gradient(135deg,#2E4A43,#213A33); --pg-cta-hover:linear-gradient(135deg,#375A50,#274A40); --pg-cta-glow:rgba(33,58,51,.42); } :is(#pgWiz,#schWiz,#latePts) *{box-sizing:border-box} /* ========================================================= MODAL OVERLAY (replaces the demo canvas frame) ========================================================= */ :is(#pgWiz,#schWiz,#latePts){position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px; background:rgba(28,39,51,.5);backdrop-filter:blur(3px);overflow:auto; font-family:var(--font-sans);color:var(--ink-1);-webkit-font-smoothing:antialiased} :is(#pgWiz,#schWiz,#latePts).show{display:grid;animation:pgFade .22s var(--ease)} @keyframes pgFade{from{opacity:0}to{opacity:1}} /* ========================================================= MODAL SHELL ========================================================= */ :is(#pgWiz,#schWiz,#latePts) .modal{position:relative;display:flex;flex-direction:column;overflow:hidden;background:rgb(var(--tg-rgb,255,255,255)); border-radius:24px;border:1px solid var(--line); box-shadow:0 40px 90px -20px rgba(28,39,51,.35),0 4px 14px rgba(28,39,51,.08)} :is(#pgWiz,#schWiz,#latePts) .modal.wz2{width:min(1240px,100%);height:min(calc(92 * var(--mh-vh)),884px);animation:pgRise .42s var(--ease)} @keyframes pgRise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}} :is(#pgWiz,#schWiz,#latePts) .m-body{flex:1;min-height:0;overflow:auto;padding:8px 26px 26px} :is(#pgWiz,#schWiz,#latePts) .m-body::-webkit-scrollbar{width:10px} :is(#pgWiz,#schWiz,#latePts) .m-body::-webkit-scrollbar-thumb{background:rgba(40,60,80,.16);border-radius:99px;border:3px solid #fff} :is(#pgWiz,#schWiz,#latePts) .m-foot{flex:none;display:flex;align-items:center;gap:12px;padding:16px 22px;border-top:1px solid var(--line); background:linear-gradient(0deg,var(--tg-cream2,rgb(247,249,250)),rgb(var(--tg-rgb,255,255,255)))} :is(#pgWiz,#schWiz,#latePts) .m-foot .spacer{flex:1} :is(#pgWiz,#schWiz,#latePts) .m-foot .foot-hint{font-size:12.5px;color:var(--ink-3);font-weight:500} /* ========================================================= FIELDS ========================================================= */ :is(#pgWiz,#schWiz,#latePts) .step{display:none;animation:stepIn .32s var(--ease)} :is(#pgWiz,#schWiz,#latePts) .step.active{display:block} @keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} :is(#pgWiz,#schWiz,#latePts) .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px} :is(#pgWiz,#schWiz,#latePts) .fgrid .full{grid-column:1/-1} :is(#pgWiz,#schWiz,#latePts) .field{display:flex;flex-direction:column;gap:8px;min-width:0} :is(#pgWiz,#schWiz,#latePts) .field>label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px} :is(#pgWiz,#schWiz,#latePts) .field .req{color:var(--danger)} :is(#pgWiz,#schWiz,#latePts) .divider{height:1px;background:var(--line);margin:22px 0} /* ---- GROUP HEADER inside a step (Jul 31 2026) --------------------------------- Step 3 carries two unrelated families: what the program IS (delivery, completion) and the points economy (earn rate, gift-card rule, threshold). A labelled rule between them is what makes "these three belong together" readable at a glance, without spending a whole wizard step on three fields. Grid child, full width. */ :is(#pgWiz,#schWiz,#latePts) .grp{display:flex;align-items:center;gap:12px;margin:6px 0 -2px} :is(#pgWiz,#schWiz,#latePts) .grp-h{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap} :is(#pgWiz,#schWiz,#latePts) .grp-line{flex:1;height:1px;background:var(--line)} /* Helper text under a stepper. Sits OUTSIDE .icf so it never inherits the field fill, and is muted enough that it reads as guidance, not as a validation message (those are .msg.err and must stay the only red thing in the form). */ :is(#pgWiz,#schWiz,#latePts) .fhint{font-size:12px;font-weight:500;line-height:1.35;color:var(--ink-4);margin-top:-1px} /* Advisory warning under a stepper. Amber, NOT the red of .msg.err - this never blocks Continue, and borrowing the error red would teach staff that red is sometimes ignorable. It replaces .fhint rather than stacking, so the field never grows a third line. */ :is(#pgWiz,#schWiz,#latePts) .fwarn{display:flex;align-items:flex-start;gap:6px;font-size:12px;font-weight:600;line-height:1.35;color:#8a5a12;margin-top:-1px} :is(#pgWiz,#schWiz,#latePts) .fwarn svg{width:13px;height:13px;flex:none;margin-top:1px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round} /* Step-level notice: states a consequence of a choice made on ANOTHER step, so it must read as information rather than as a field error. Amber like .fwarn, never the validation red - nothing here blocks Continue, and the user may genuinely want a program with no schedule. */ :is(#pgWiz,#schWiz,#latePts) .step-note{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px; border-radius:var(--r-md);background:#fdf5e6;border:1px solid #e8d5ab;color:#6b4a12; font-size:13px;line-height:1.45} :is(#pgWiz,#schWiz,#latePts) .step-note b{display:block;color:#5a3d0e;margin-bottom:2px} :is(#pgWiz,#schWiz,#latePts) .step-note svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round} /* Default Points note (POINTS-MATH-05). Occupies the slot the threshold stepper vacates when rule 1 is chosen, so the step does not jump in height between the two rules. COOL, not the cream of .step-note: that amber means "careful", and choosing the app-wide default is the ordinary choice, not a risk. It is stating what the number will be, nothing more. Built on the INSET COOL FIELD tokens (--f-rest-*), not on literal colours: they are the recessed surface this note is standing in for, and they are the only pair already redefined under body.dark, so dark parity comes for free instead of needing a second rule. */ :is(#pgWiz,#schWiz,#latePts) .gc-default-note{padding:11px 13px;border-radius:var(--r-md); background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh)} :is(#pgWiz,#schWiz,#latePts) .gcd-h{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:2px} :is(#pgWiz,#schWiz,#latePts) .gcd-p{display:block;font-size:12px;font-weight:500;line-height:1.4;color:var(--ink-3)} /* ---- REQUIRED / VALIDATION - the app's default warning design ------------------ Ported verbatim from the Enroll Student wizard (#enrollWiz, enroll-wizard.css 161-170), which the CEO named as the standard: the field itself goes red (danger border + danger wash), its LABEL and asterisk go danger-ink, a red line with a warning glyph appears underneath, and the field shakes once so the eye is pulled to it. Same tokens, same sizes, same animation curve - this is one design in two places, not a lookalike. */ /* transition:none is LOAD-BEARING, not a tidy-up. :is(#pgWiz,#schWiz,#latePts) .icf transitions background and border-color; when Blazor re-renders the field with .err in the same frame, the transitioned longhands keep their OLD computed values and the red wash never lands - measured: the label and the message went red while the field stayed #DFE4EA, and even an inline !important background could not move it until the transition was removed. Same family as the flagged dark-mode transitioned-longhand issue. An error should snap into view anyway; fading one in is wrong. */ /* AN ERROR OUTRANKS HOVER AND FOCUS. It must hold its red from the moment it appears until the user actually fixes the value - pointing at it or typing in it is not a fix. Specificity is the whole story: `.field.err .icf` is (1,2,0) but `.icf:hover:not(:focus-within)` is (1,3,0) and `.icf:focus-within` is (1,2,0) declared later, so BOTH used to repaint the field back to its normal fill the moment the mouse arrived. The error selectors below carry the extra pseudo-classes so they win outright. */ :is(#pgWiz,#schWiz,#latePts) .field.err .icf, :is(#pgWiz,#schWiz,#latePts) .field.err .icf:hover, :is(#pgWiz,#schWiz,#latePts) .field.err .icf:hover:not(:focus-within), :is(#pgWiz,#schWiz,#latePts) .field.err .icf:focus-within{border-color:var(--danger);background:var(--danger-bg);transition:none} :is(#pgWiz,#schWiz,#latePts) .field.err .icf:focus-within{box-shadow:0 0 0 3px rgba(192,71,63,.24)} :is(#pgWiz,#schWiz,#latePts) .field.err>label,:is(#pgWiz,#schWiz,#latePts) .field.err>label .req{color:var(--danger-ink)} :is(#pgWiz,#schWiz,#latePts) .field.err .dp .dp-field{border-color:var(--danger) !important;background:var(--danger-bg) !important;box-shadow:none !important} /* the day picker is a button row, not an .icf - give it the same wash so "at least one day" reads as the same kind of error as an empty text box */ :is(#pgWiz,#schWiz,#latePts) .field.err .dow{border-radius:var(--r-md);outline:1px solid var(--danger);outline-offset:4px;background:var(--danger-bg)} :is(#pgWiz,#schWiz,#latePts) .msg{display:flex;align-items:center;gap:6px;margin:7px 0 0;font-size:12.5px;font-weight:650;line-height:1.35} :is(#pgWiz,#schWiz,#latePts) .msg.err{color:var(--danger-ink)} :is(#pgWiz,#schWiz,#latePts) .msg svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round} :is(#pgWiz,#schWiz,#latePts) .field:not(.err) .msg.err{display:none} /* NO `both` fill-mode. The shake starts and ends at translateX(0), so retaining its final state is visually identical - but a retained `transform` makes .field a STACKING CONTEXT for good, and the dropdown inside it (z-index:1000) then ranks only WITHIN that field. The next field's .icf, later in tree order, painted straight over the open list: measured with Delivery type open, "Cohort" and "Ongoing" were covered and unclickable. Same trap as the overflow menu vs .dv-scrim - a z-index only ever competes inside its own context. */ :is(#pgWiz,#schWiz,#latePts) .shake{animation:pgShk .34s cubic-bezier(.36,.07,.19,.97)} @keyframes pgShk{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}} :is(#pgWiz,#schWiz,#latePts) .icf{position:relative;display:flex;align-items:center;gap:11px;min-height:50px;padding:0 15px;background:var(--f-rest-bg); border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);border-radius:var(--r-md); transition:background var(--t),border-color var(--t),box-shadow var(--t)} :is(#pgWiz,#schWiz,#latePts) .icf:hover:not(:focus-within){background:var(--f-hover-bg)} :is(#pgWiz,#schWiz,#latePts) .icf:focus-within{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)} :is(#pgWiz,#schWiz,#latePts) .icf input,:is(#pgWiz,#schWiz,#latePts) .icf select,:is(#pgWiz,#schWiz,#latePts) .icf textarea{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink-1)} /* KILL the app-global .mh-app :is(input,textarea,select) look (fill + border + box-shadow + green focus ring) that otherwise renders a "field inside the field" ghost and a green outline. The visible field is the .icf shell ONLY; the raw control is fully transparent in every state. */ :is(#pgWiz,#schWiz,#latePts) .icf :is(input,select,textarea), :is(#pgWiz,#schWiz,#latePts) .icf :is(input,select,textarea):hover, :is(#pgWiz,#schWiz,#latePts) .icf :is(input,select,textarea):focus, :is(#pgWiz,#schWiz,#latePts) .icf :is(input,select,textarea):focus-visible{ background:transparent !important;border:0 !important;box-shadow:none !important; border-radius:0 !important;padding:0 !important;min-height:0 !important;height:auto !important; outline:none !important;color:var(--ink-1)} :is(#pgWiz,#schWiz,#latePts) .icf input::placeholder,:is(#pgWiz,#schWiz,#latePts) .icf textarea::placeholder{color:var(--ink-4);font-weight:400} :is(#pgWiz,#schWiz,#latePts) .icf select{appearance:none;-webkit-appearance:none;cursor:pointer} :is(#pgWiz,#schWiz,#latePts) .icf.area{align-items:stretch;padding:13px 15px;min-height:104px} :is(#pgWiz,#schWiz,#latePts) .icf.area textarea{resize:none;min-height:78px;line-height:1.55} :is(#pgWiz,#schWiz,#latePts) .ic{width:19px;height:19px;flex:none;display:grid;place-items:center;color:var(--ink-3)} :is(#pgWiz,#schWiz,#latePts) .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none} :is(#pgWiz,#schWiz,#latePts) .chev{transition:transform var(--t)} /* custom dropdown popup (native