/* FastSkill platform additions — layered on top of the original style.css.
   Everything here is new UI the static build never had: enrolment-status
   badges, the admin console, and the student area. */

/* ---------- enrolment status: the one thing every surface must agree on ---- */
.st { display:inline-flex; align-items:center; gap:6px; border-radius:999px;
      padding:5px 12px; font-size:13px; font-weight:700; line-height:1.2;
      border:1.5px solid transparent; white-space:nowrap; }
.st-ok   { background:#e7f7ed; color:#0d7a3d; border-color:#9fdcb8; }
.st-soon { background:#e8f1fe; color:#1257c4; border-color:#a9c8f7; }
.st-full { background:#fff2e2; color:#9a5507; border-color:#f6ce9b; }
.st-shut { background:#f1f2f4; color:#5c6470; border-color:#d8dce2; }
.st-done { background:#f1f2f4; color:#8b939e; border-color:#e2e5ea; }
.st-lg { font-size:15px; padding:8px 16px; }

.intake-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px;
      padding:14px 0; border-bottom:1px solid #ecedf0; }
.intake-row:last-child { border-bottom:0; }
.intake-date { font-weight:800; font-size:15px; min-width:118px; }
.intake-meta { color:#5c6470; font-size:13.5px; flex:1 1 200px; }
.seats { font-size:12.5px; color:#8b939e; }

.fav { background:none; border:1.5px solid #d8dce2; border-radius:999px; cursor:pointer;
      padding:7px 14px; font-size:14px; font-weight:600; color:#5c6470; }
.fav[aria-pressed="true"] { border-color:#e11d48; color:#e11d48; background:#fff1f4; }

.notice-warn { background:#fff8e6; border:1px solid #f3d99b; color:#7a5807;
      padding:12px 16px; border-radius:10px; font-size:14px; margin:14px 0; }
.notice-err  { background:#fdecec; border:1px solid #f5b5b5; color:#a02020;
      padding:12px 16px; border-radius:10px; font-size:14px; margin:14px 0; }
.notice-ok   { background:#e9f8ef; border:1px solid #a8ddbf; color:#0d6b38;
      padding:12px 16px; border-radius:10px; font-size:14px; margin:14px 0; }

/* ---------------------------------------------------------------- admin ---- */
.adm { --line:#e3e6ea; --ink:#111827; --mute:#6b7280; --brand:#1257c4;
       background:#f6f7f9; min-height:100vh; }
.adm * { box-sizing:border-box; }
.adm-bar { background:#0f172a; color:#fff; padding:0 20px; display:flex;
       align-items:center; gap:6px; flex-wrap:wrap; position:sticky; top:0; z-index:50; }
.adm-bar a { color:#cbd5e1; text-decoration:none; padding:15px 13px; font-size:14px;
       font-weight:600; border-bottom:3px solid transparent; white-space:nowrap; }
.adm-bar a:hover { color:#fff; }
.adm-bar a.on { color:#fff; border-bottom-color:#3b82f6; }
.adm-bar .brand { font-weight:800; color:#fff; font-size:16px; padding-right:14px; }
.adm-bar .spacer { flex:1; }
.adm-bar .pill { background:#1e293b; border-radius:999px; padding:4px 11px; font-size:12px;
       color:#94a3b8; }
.adm-wrap { max-width:1180px; margin:0 auto; padding:24px 20px 70px; }
.adm h1 { font-size:23px; margin:0 0 4px; color:var(--ink); }
.adm h2 { font-size:17px; margin:26px 0 12px; color:var(--ink); }
.adm .sub { color:var(--mute); font-size:14px; margin:0 0 20px; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.tile b { display:block; font-size:27px; font-weight:800; color:var(--ink); line-height:1.15; }
.tile span { color:var(--mute); font-size:13px; }
.tile.hot b { color:#c2410c; }
.tile a { text-decoration:none; }

.panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px;
       margin-bottom:18px; }
.panel > h2:first-child { margin-top:0; }

table.t { width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
table.t th { text-align:left; padding:11px 10px; border-bottom:2px solid var(--line);
       color:var(--mute); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;
       white-space:nowrap; }
table.t td { padding:11px 10px; border-bottom:1px solid #f0f2f5; vertical-align:top; }
table.t tr:hover td { background:#fafbfc; }
table.t a { color:var(--brand); text-decoration:none; font-weight:600; }
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.badge { display:inline-block; border-radius:6px; padding:2px 8px; font-size:12px;
       font-weight:700; }
.b-draft { background:#f1f2f4; color:#5c6470; }
.b-published { background:#e7f7ed; color:#0d7a3d; }
.b-paused { background:#fff2e2; color:#9a5507; }
.b-review { background:#fff8e6; color:#8a6100; border:1px solid #f0d79a; }
.b-new { background:#e8f1fe; color:#1257c4; }

.f-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.adm label { display:block; font-size:12.5px; font-weight:700; color:var(--mute);
       margin:0 0 5px; text-transform:uppercase; letter-spacing:.02em; }
.adm input[type=text], .adm input[type=email], .adm input[type=password],
.adm input[type=date], .adm input[type=number], .adm select, .adm textarea {
       width:100%; padding:9px 11px; border:1px solid #cfd4da; border-radius:8px;
       font:inherit; font-size:14px; background:#fff; color:var(--ink); }
.adm textarea { min-height:96px; resize:vertical; line-height:1.55; }
.adm .field { margin-bottom:15px; }
.adm .hint { font-size:12.5px; color:var(--mute); margin-top:4px; }

.btn-a { display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:8px;
       padding:10px 17px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; }
.btn-a:hover { background:#0e47a1; }
.btn-a.ghost { background:#fff; color:var(--ink); border:1px solid #cfd4da; }
.btn-a.ghost:hover { background:#f6f7f9; }
.btn-a.danger { background:#dc2626; }
.btn-a.danger:hover { background:#b91c1c; }
.btn-a.sm { padding:6px 12px; font-size:13px; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.gal { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; }
.gal figure { margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden;
       background:#fff; }
.gal img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#eef0f3; }
.gal figcaption { padding:9px; display:flex; gap:7px; justify-content:space-between;
       align-items:center; font-size:12px; color:var(--mute); }
.gal .primary { color:#0d7a3d; font-weight:800; }

.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center;
       background:#0f172a; padding:24px; }
.login-card { background:#fff; border-radius:16px; padding:34px; width:100%; max-width:410px;
       box-shadow:0 18px 44px rgba(0,0,0,.3); }
.login-card h1 { font-size:21px; margin:0 0 5px; }
.login-card .sub { color:#6b7280; font-size:13.5px; margin-bottom:22px; }

.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.chips a { text-decoration:none; border:1px solid #cfd4da; background:#fff; border-radius:999px;
       padding:6px 14px; font-size:13px; color:#374151; font-weight:600; }
.chips a.on { background:var(--brand); border-color:var(--brand); color:#fff; }

.thread { border-left:3px solid #e3e6ea; padding-left:16px; margin:16px 0; }
.thread .msg { margin-bottom:16px; }
.thread .who { font-size:12.5px; color:var(--mute); margin-bottom:5px; }
.thread .body { background:#f6f7f9; border-radius:10px; padding:12px 14px; font-size:14px;
       line-height:1.6; white-space:pre-wrap; }
.thread .failed .body { background:#fdecec; }

.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; }
.kv dt { color:var(--mute); font-weight:600; }
.kv dd { margin:0; color:var(--ink); word-break:break-word; }

.review-note { background:#fff8e6; border-left:3px solid #f0c14b; padding:10px 13px;
       font-size:13px; color:#6b5215; white-space:pre-wrap; border-radius:0 8px 8px 0;
       margin:10px 0; line-height:1.55; }

@media (max-width:760px) {
  .adm-bar { padding:0 12px; }
  .adm-bar a { padding:12px 9px; font-size:13px; }
  .adm-wrap { padding:16px 12px 60px; }
  .panel { padding:15px; }
}

/* ============================================================
   MOBILE CONVERSION BAR
   On a phone the enquiry sidebar reflows to the bottom of a long
   page, so the price and the call to action disappear for the whole
   scroll. This keeps both in reach without covering the bottom nav.
   ============================================================ */
.mbar { display:none; }
@media (max-width:920px) {
  .mbar {
    display:flex; align-items:center; gap:12px;
    position:fixed; left:0; right:0; z-index:59;
    bottom:calc(58px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid var(--line, #e3e6ea);
    padding:10px 14px; box-shadow:0 -6px 22px rgba(16,24,40,.10);
    transform:translateY(120%); transition:transform .28s cubic-bezier(.22,.9,.3,1);
  }
  .mbar.show { transform:translateY(0); }
  .mbar .mb-price { flex:1; min-width:0; line-height:1.25; }
  .mbar .mb-price b { display:block; font-size:15px; font-weight:800;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mbar .mb-price small { font-size:11.5px; color:#6b7280; }
  .mbar .btn { flex:0 0 auto; padding:12px 20px; font-size:14.5px; min-height:46px; }
  body.has-mbar { padding-bottom:126px; }
}

/* ---- touch targets: 44px is the minimum a thumb hits reliably ---- */
@media (max-width:820px) {
  .chip { padding:11px 17px; font-size:14px; min-height:44px; display:inline-flex; align-items:center; }
  .btn { min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
  .form input, .form select, .form textarea { padding:13px 14px; font-size:16px; }
  /* 16px prevents iOS Safari zooming the whole page on focus */
  .q-opt { min-height:52px; font-size:15px; }
  .mnav a { padding:8px 2px; min-height:46px; display:flex; flex-direction:column;
            align-items:center; justify-content:center; gap:2px; }
  .fav { min-height:46px; padding:10px 18px; }
  .intake-row { gap:9px; }
  .intake-row .btn { width:100%; }
  .intake-date { min-width:0; flex:1 1 100%; }
}
@media (max-width:480px) {
  .card-cta { display:grid; grid-template-columns:1fr; gap:8px; }
  .card-cta .btn { width:100%; }
  .factgrid { gap:9px; }
  .ecard { padding:18px 16px; }
  .d-sec h2 { font-size:19px; }
}

/* ============================================================
   MOTION — restrained, and only where it aids comprehension:
   content arriving as you reach it, and state changes you caused.
   Anything decorative is skipped for reduced-motion users.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform:translateY(14px);
            transition:opacity .5s ease, transform .5s cubic-bezier(.22,.9,.3,1); }
  .reveal.in { opacity:1; transform:none; }
  .card { transition:transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease; }
  .card:hover { transform:translateY(-3px); }
  .btn { transition:transform .14s ease, background .18s ease, box-shadow .18s ease; }
  .btn:active { transform:scale(.97); }
  .st { transition:background .2s ease, border-color .2s ease; }
  .q-step { animation:qIn .32s cubic-bezier(.22,.9,.3,1); }
  @keyframes qIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
  .q-result.on { animation:qPop .38s cubic-bezier(.22,1.2,.36,1); }
  @keyframes qPop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
  .q-progress i { transition:width .4s cubic-bezier(.22,.9,.3,1); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; }
  .mbar { transition:none; }
}

/* A live intake deserves to be noticed; it is the only thing on the page
   that can expire. One slow pulse, and never for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .st-ok.st-lg { animation:okPulse 2.6s ease-in-out infinite; }
  @keyframes okPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(13,122,61,.22); }
    50%     { box-shadow:0 0 0 7px rgba(13,122,61,0); }
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.skip { position:absolute; left:-9999px; top:0; z-index:200;
        background:#0f172a; color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
        font-weight:700; font-size:14px; text-decoration:none; }
.skip:focus { left:0; }
#main:focus { outline:none; }

/* A visible focus ring on everything reachable by keyboard. The stylesheet
   only styled three of these, which leaves a keyboard user guessing where
   they are on a page that is mostly links and form fields. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .chip:focus-visible,
.q-opt:focus-visible, .fav:focus-visible, .btn:focus-visible {
  outline:3px solid #1257c4; outline-offset:2px; border-radius:6px;
}
.btn-brand:focus-visible { outline-color:#0f172a; }

/* Announce-only text for context a sighted user gets from layout. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
           overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-contrast: more) {
  .st, .tag, .chip { border-width:2px; }
  .fact b, .p-sub, .smallprint { color:#333; }
}