/* orca-ext.css -- the pieces Tafra has that the design handoff does not draw.
 *
 * Hand-written on purpose: css/orca.css is GENERATED from the handoff by tools/orca-css-build.py
 * (never edit it by hand -- `--check` fails). Anything the platform needs that the design has no
 * picture for lives here, built only from the handoff's own tokens (--o-*) so it cannot drift:
 *   - alerts and the session-reason banner on the auth pages
 *   - direction-aware padding for inputs that carry an icon / eye button
 *   - the single-card auth layout (reset password)
 *   - small footer additions (instructor line, developer credit)
 * Every rule is scoped under .orca (the class on <html>) like the generated layer.
 */

/* ---- header at 1024-1099px ---------------------------------------------------- */
/* the handoff's header (capped at 1100px) only just fits its five links + actions; at exactly 1024px
   (iPad landscape, small laptops) the labels wrapped onto two lines. Labels never wrap, and the gaps
   tighten in that one band. */
.orca .nav a,
.orca .signin,
.orca .chip{white-space:nowrap}
@media (min-width:1024px) and (max-width:1099px){
  .orca .hdr{gap:10px}
  .orca .nav{gap:13px}
  .orca .hdr-act{gap:6px}
}

/* ---- theme toggle (js/orca-theme.js) ------------------------------------------------------ */
/* a square icon button next to the language chip; in the drawer a full-width row above the two buttons */
.orca .chip.tgl{width:38px;padding-inline:0;justify-content:center}
.orca .chip.tgl .th-ic{display:grid;place-items:center;line-height:0}
.orca .dr-theme{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:16px;cursor:pointer;
  font:inherit;font-weight:700;font-size:15px;color:var(--o-ink);text-align:start;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9)}
.orca .dr-theme .th-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--o-blue);
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95)}
.orca .dr-theme:hover{background:rgba(255,255,255,.8)}

/* ---- alerts ---------------------------------------------------------------- */
.orca .o-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;
  font-size:14px;font-weight:600;line-height:1.7;color:#B42318;
  background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.28)}
.orca .o-alert svg{flex:none;margin-top:3px}
.orca .o-alert span{min-width:0;overflow-wrap:anywhere}

/* ---- session-reason banner (login.html?reason=...) -------------------------- */
.orca .o-banner{display:grid;gap:8px;justify-items:center;text-align:center;padding:16px 18px;border-radius:16px;
  font-size:14px;font-weight:700;line-height:1.75;color:var(--bn-fg,var(--o-ink));
  background:var(--bn-bg,rgba(11,21,51,.04));border:1px solid var(--bn-bd,rgba(11,21,51,.12))}
.orca .o-banner i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  color:var(--bn-fg);background:var(--bn-ic,rgba(11,21,51,.06))}
.orca .o-banner small{display:block;font-size:12.5px;font-weight:500;opacity:.92}
.orca .o-banner--warn{--bn-bg:rgba(245,158,11,.1);--bn-bd:rgba(245,158,11,.38);--bn-fg:#92400E;--bn-ic:rgba(245,158,11,.18)}
.orca .o-banner--info{--bn-bg:rgba(45,70,255,.07);--bn-bd:rgba(45,70,255,.26);--bn-fg:#1F33D6;--bn-ic:rgba(45,70,255,.12)}
.orca .o-banner--bad{--bn-bg:rgba(220,38,38,.07);--bn-bd:rgba(220,38,38,.28);--bn-fg:#B42318;--bn-ic:rgba(220,38,38,.1)}

/* ---- sign-in / reset form details -------------------------------------------- */
.orca .o-stack{display:grid;gap:18px}
/* e-mail and password are typed left-to-right but should hug the start edge of the page */
.orca[dir=rtl] .field input.ltr-in{text-align:right}
.orca[dir=ltr] .field input.ltr-in{text-align:left}

/* the handoff pads every non-phone field back to 16px on the icon side, which would put the typed
   text under the icon / eye button; fields marked .has-lead keep room for it (matches the label) */
.orca[dir=rtl] .field.has-lead:not(.phone):not(.area) input{padding-right:50px;padding-left:16px}
.orca[dir=ltr] .field.has-lead:not(.phone):not(.area) input{padding-left:50px;padding-right:16px}

/* Chrome paints autofilled inputs itself and does not count them as :not(:placeholder-shown),
   so the floating label would sit on top of the saved value */
.orca .field input:-webkit-autofill,
.orca .field input:-webkit-autofill:hover,
.orca .field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 40px #fff inset!important;-webkit-text-fill-color:var(--o-ink)!important;
  transition:background-color 5000s ease-in-out 0s}
.orca .field input:-webkit-autofill + label{top:7px;font-size:12px;color:var(--o-blue)}

/* the two auth links are real page navigations, not tab panels */
.orca .seg a[aria-current="page"]{color:var(--o-ink)}
.orca .row-end{display:flex;justify-content:flex-end;margin-top:-4px}
/* the handoff styles .link on anchors; a few of ours are buttons (forgot password) */
.orca button.link{background:none;border:0;padding:4px 0;font:inherit;font-size:14.5px;font-weight:700;color:var(--o-blue);cursor:pointer}
.orca .auth-card > .o-banner,
.orca .auth-card > .o-alert{margin:0}

/* "back to ..." arrows point toward the start edge: they are drawn for RTL and mirrored for LTR */
.orca[dir=ltr] .flip-ltr{transform:scaleX(-1)}
.orca .alt .link svg,
.orca .fp-back svg{flex:none}
.orca .alt .link{display:inline-flex;align-items:center;gap:6px}
.orca .alt-home{margin-top:-4px}

/* real figures in the side panel stay hidden until the numbers arrive (no placeholder zeros) */
.orca .auth-stats.is-pending{visibility:hidden}

/* ---- forgot-password view (lives inside the auth card, replaces the old overlay) ---- */
.orca .fp-view{display:grid;gap:14px}
.orca .fp-view .done{padding-block:8px 0}
.orca .fp-view .done h1{font-size:21px}
.orca .fp-wa{justify-self:center;text-align:center;font-size:13.5px}
.orca .fp-wa a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;
  color:#166534;font-weight:700;background:rgba(34,197,94,.12)}

/* ---- single-card auth layout (reset-password) ---------------------------------- */
.orca .auth-grid.is-single{grid-template-columns:minmax(0,520px);justify-content:center}
.orca .auth-grid.is-single .auth-card{align-content:start}
.orca .rs-ic{justify-self:center}
.orca .rs-head{justify-items:center;text-align:center}
.orca .rs-actions{display:grid;gap:10px}
.orca .rs-actions .btn{width:100%}

/* ---- footer additions (kept from the platform's own footer) ------------------------- */
/* the handoff switches the three contact cards to a row at 700px, where each is ~210px wide and the
   e-mail / phone number break mid-word; keep them stacked until there is room (900px) */
@media (min-width:700px) and (max-width:899px){
  .orca .contact{grid-template-columns:1fr}
}
/* the design draws three social accounts; the platform can also have TikTok, YouTube and X */
.orca .social .tt:hover,
.orca .social .xx:hover{background:#0B1533;border-color:#0B1533}
.orca .social .yt:hover{background:#FF0000;border-color:#FF0000}
.orca .foot-by{font-size:13.5px;font-weight:700;color:var(--o-ink)}
.orca .foot-bot .dev{opacity:.75}
.orca .foot-bot .dev:hover{opacity:1}
.orca .foot-col ul li[hidden]{display:none}