/* Engine 3.3 — core corrections that must apply whichever theme is installed.
 *
 * Everything visual belongs in the active theme's theme.css. Nothing here is a
 * style choice: each rule fixes a fault in the frozen site.css, or supplies a
 * class the engine's own markup uses and site.css never defined. A theme cannot
 * be expected to carry either, and a broken or half-installed theme must not be
 * able to take the site down with it.
 */

/* ---- hidden means hidden ----
   Several overlays — .qs (quick search), .dpdlg (the join information dialog),
   .jn-ov (the legal document overlay), .crop (the photo cropper), .wipe (profile
   delete confirmation) — set a display
   value in a class rule. An author class rule beats the browser's own
   [hidden]{display:none}, so every one of those overlays stayed in the layout
   after the markup and the scripts believed it closed: an invisible full-viewport
   sheet swallowing every click, or, in the dialog's case, a modal sitting open on
   top of every page with a close button that did nothing.

   Rather than chase each class, hidden is made to mean hidden. Nothing in the
   engine ever styles a [hidden] element back into view. */
[hidden]{display:none!important}

/* ---- .btn.pri and .btn.out ----
   site.css names its variants .btn-primary and .btn-secondary. The engine's own
   forms — the join flow above all — were written against the admin naming, .pri
   and .out, because they used to render inside the signed-in shell. The join
   flow renders inside the theme from 3.1 onward, so those two names have to mean
   something on the front end. They are aliases, taking the theme's accent through
   the same variables site.css uses, so a recoloured theme recolours them too. */
.btn.pri{background:var(--g600);color:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(18,63,32,.2)}
.btn.pri:hover{background:var(--g700);color:#fff}
.btn.pri:active{background:var(--g800)}
.btn.out{background:#fff;border-color:var(--n400);color:var(--text)}
.btn.out:hover{background:var(--g100);border-color:var(--g300)}
.btn.out:active{background:var(--g200)}
.btn.sm{padding:8px 15px;font-size:13.5px}
.btn[disabled],.btn:disabled{opacity:.45;pointer-events:none}

/* ---- .msg ----
   The engine reports success and failure with .msg plus ok / bad / err / warn.
   site.css never had the class, so on a themed page every one of those notices
   rendered as unstyled body text — an error indistinguishable from a paragraph. */
.msg{border-radius:12px;padding:13px 17px;margin:0 0 18px;font-size:14.5px;line-height:1.55}
.msg strong{font-weight:700}
.msg.ok{background:var(--g100);border:1px solid var(--g300);color:var(--g900)}
.msg.bad,.msg.err{background:#fdecea;border:1px solid #f2b8b1;color:#8c2b21}
.msg.warn{background:#fdf0d5;border:1px solid #f0d9a4;color:#7a4f00}
.msg.inf{background:#eef2f3;border:1px solid #b0c1c5;color:#0e212a}
.msg code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:13px}
.msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---- 90% header mega-panels (Programs and other grouped items) ---- */
header.bar{position:relative;z-index:80}
.mega-layer{position:absolute;left:0;right:0;top:100%;display:flex;justify-content:center;padding:0 clamp(12px,5vw,40px);pointer-events:none;z-index:70}
.mega{width:100%;max-width:1336px;pointer-events:auto}
.mega-inner{width:90%;max-width:1336px;margin:0 auto;background:#fff;border:1px solid var(--div,#e2e8e4);border-top:0;border-radius:0 0 22px 22px;box-shadow:0 28px 64px rgba(14,33,42,.18);padding:22px 24px 26px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr minmax(240px,1fr);gap:18px 22px;align-items:start}
.mega-head{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g700,#0a616a);padding:0 8px 10px}
.mega-item{display:block;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--text);transition:background .14s}
.mega-item:hover,.mega-item:focus-visible{background:var(--g100,#e6f6f7)}
.mega-item b{display:block;font-family:var(--fh);font-weight:400;font-size:15px;line-height:1.25;color:var(--g900,#06343a)}
.mega-item em{display:block;font-style:normal;font-size:12px;color:var(--n600);margin-top:2px;line-height:1.4}
.mega-item.fav b::after{content:" ★";font-size:11px;color:var(--g600)}
.mega-widget{border-left:1px solid var(--div,#e2e8e4);padding-left:18px}
.mega-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--g300,#8fd6dc);border-radius:16px;padding:18px 16px;background:linear-gradient(180deg,var(--g100,#e6f6f7),#fff)}
.mega-card-k{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g700);margin-bottom:8px}
.mega-card strong{display:block;font-family:var(--fh);font-weight:400;font-size:22px;line-height:1.15;margin-bottom:8px}
.mega-card p{margin:0 0 12px;font-size:13px;color:var(--n700);line-height:1.45}
.mega-card-cta{font-weight:700;font-size:13px;color:var(--g700)}
.mega-card-sub{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--g700)}
@media (max-width:980px){
  .mega-inner{width:100%}
  .mega-grid{grid-template-columns:1fr 1fr}
  .mega-widget{border-left:0;padding-left:0;grid-column:1 / -1}
}
@media (max-width:700px){
  .mega-layer{position:static;padding:0}
  .mega-inner{width:100%;border-radius:0;box-shadow:none;border:0;padding:8px 4px 16px}
  .mega-grid{grid-template-columns:1fr}
  header.bar nav.main.open .mega{display:block}
}