/* index.page.css — restored verbatim from v62 ground-truth stylesheet, plus any post-v62 additions */

:root {
  --green:#274640; --green-dark:#264540; --green-light:#E8F0EE;
  --gold:#C9970C; --gold-dark:#A07A08; --gold-light:#FDF6E3;
  --white:#FFFFFF; --off-white:#F8F6F1;
  --gray-light:#EDEBE6; --gray-mid:#B8B4AC; --gray-dark:#6B6660;
  --danger:#C0392B; --danger-light:#FEF0EE;
  --text:#1A2E1E; --text-muted:#6B6660;
  --radius:10px; --font:'Nunito',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font); background:var(--green-dark); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.wrap { width:100%; max-width:440px; }
.logo-wrap { text-align:center; margin-bottom:2rem; }
.logo-wrap img { display:block; }
.about-bar { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:0.75rem 1rem; margin-bottom:1.25rem; font-size:13px; color:rgba(255,255,255,0.65); line-height:1.5; text-align:center; }
.about-bar a { color:rgba(255,255,255,0.85); text-decoration:underline; }
.card { background:var(--white); border-radius:16px; padding:2.5rem; box-shadow:0 8px 40px rgba(0,0,0,0.25); }
.card h1 { font-size:22px; font-weight:600; color:var(--green); margin-bottom:0.3rem; }
.card p { font-size:14px; color:var(--text-muted); margin-bottom:2rem; }
label { display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:0.4rem; }
input { width:100%; padding:0.75rem 1rem; border:1.5px solid var(--gray-mid); border-radius:var(--radius); font-size:15px; font-family:var(--font); color:var(--text); background:var(--off-white); outline:none; margin-bottom:1.25rem; }
input:focus { border-color:var(--gold); background:var(--white); }
.btn { width:100%; padding:0.85rem; background:var(--gold); color:white; border:none; border-radius:var(--radius); font-size:15px; font-weight:600; font-family:var(--font); cursor:pointer; transition:background 0.15s; }
.btn:hover { background:var(--gold-dark); }
.btn:disabled { opacity:0.6; cursor:not-allowed; }
.btn-ghost { width:100%; padding:0.7rem; background:transparent; color:var(--green); border:1.5px solid var(--gray-mid); border-radius:var(--radius); font-size:14px; font-weight:600; font-family:var(--font); cursor:pointer; margin-top:0.75rem; }
.btn-ghost:hover { border-color:var(--green); }
.forgot-link { display:block; text-align:right; font-size:12px; color:var(--text-muted); margin-top:-0.9rem; margin-bottom:1.25rem; cursor:pointer; text-decoration:underline; }
.forgot-link:hover { color:var(--green); }
.msg { margin-top:1rem; padding:0.75rem 1rem; border-radius:8px; font-size:13px; display:none; }
.msg.error { background:var(--danger-light); color:var(--danger); border:1px solid #F5C6C2; }
.msg.info { background:#EEF4FF; color:#3B5ECC; border:1px solid #C0D0F8; }
.msg.success { background:var(--green-light); color:var(--green); border:1px solid #A8D5B8; }
.footer { text-align:center; margin-top:1.5rem; font-size:12px; color:rgba(255,255,255,0.3); }
.footer a { color:rgba(255,255,255,0.45); text-decoration:none; }
.footer a:hover { color:rgba(255,255,255,0.7); }
.divider { border:none; border-top:1px solid var(--gray-light); margin:1.25rem 0; }

/* ── Mobile optimisation ── */
@media (max-width:480px) {
  body { padding:0.75rem; }
  .card { padding:1.5rem 1.25rem; }
  .logo-wrap { margin-bottom:1.5rem !important; }
}

/* ── Global mobile touch optimisation ── */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
button, .btn-primary, .btn-secondary, .opt-btn, .tab, .btn-nav, .btn-sm {
  min-height: 44px;
  touch-action: manipulation;
}
input, select, textarea {
  font-size: 16px !important; /* Prevents iOS zoom on focus */
  touch-action: manipulation;
}

/* === Global mobile/accessibility optimisation === */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-height:100svh;overflow-x:hidden;}
img{max-width:100%;height:auto;}
button,.btn,.btn-primary,.btn-secondary,.btn-nav,.btn-sm,.tab,a[role="button"]{min-height:44px;touch-action:manipulation;}
input,select,textarea{font-size:16px!important;max-width:100%;}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:720px;}
@media (max-width:700px){
  body{font-size:16px;}
  main,.container,.wrap,.page{width:100%;max-width:100%;}
  nav{height:auto;min-height:56px;padding:0.65rem 0.85rem;gap:0.75rem;}
  .nav-brand img{height:34px!important;max-width:190px;object-fit:contain;}
  .nav-right{gap:0.5rem;}
  .nav-user{display:none!important;}
  .btn-nav{padding:0.55rem 0.75rem;font-size:13px;}
  .card,.stat-card,.module-card,.org-card,.profile-card{border-radius:14px;}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
  .tab{white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;}
  .form-row-2,.form-row-3,.form-row-4,.profile-grid,.competency-grid{grid-template-columns:1fr!important;}
  .btn-row,.action-row,.transcript-actions{flex-direction:column!important;align-items:stretch!important;}
  .btn-row button,.action-row button,.transcript-actions button{width:100%;}
  h1{line-height:1.12;}
}
@media (max-width:420px){
  .card{padding:1rem!important;}
  .logo-wrap{margin-bottom:1rem!important;}
  .steps{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0.01ms!important;}
}


.back-site-link{position:fixed;top:1rem;left:1rem;z-index:20;display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.9);text-decoration:none;border-radius:999px;padding:.55rem .9rem;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
.back-site-link:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.45)}
@media(max-width:560px){.back-site-link{position:static;margin:0 auto 1rem;justify-content:center;display:flex;width:max-content}.wrap{padding-top:.5rem}}


/* ═══════════════════════════════════════════════
   DRAGONFLY MOBILE OPTIMISATION v8 — app/platform
   Targets learner, manager, admin, builder, module and demo pages.
   ═══════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a, input, select, textarea { font-family: inherit; }
button, .btn-primary, .btn-secondary, .btn-nav, .btn-nav-ghost, .btn-sm, .tab, .lib-tab, .opt-btn, .continue-btn, .cert-btn, .btn-gold, .btn-outline { min-height: 44px; touch-action: manipulation; }
input, select, textarea { font-size: 16px !important; max-width: 100%; }
.table-scroll-wrap, .completed-table-wrap, .demo-table, .transcript-card { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll-wrap table, .completed-table-wrap table, .demo-table table, .transcript-card table, table.data-table { min-width: 680px; }

@media (max-width: 900px) {
  main, .page, .container, .builder-wrap { width: 100%; max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .dashboard-grid, .journey-grid, .profile-grid, .learning-journey-grid, .demo-grid, .drill-grid, .tower-grid, .org-summary-main, .form-row-4, .form-row-3, .form-row-2, .assign-mode { grid-template-columns: 1fr !important; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .locked-grid, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-inner, .hero > div:first-child, .panel-head, .panel-head-space, .transcript-actions, .level-card, .code-banner, .seat-status-card, .demo-module, .demo-card { flex-wrap: wrap; }
  .hero-org { width: 100%; margin-top: 1rem; }
  .library-controls, .list-toolbar, .rankings-toolbar { grid-template-columns: 1fr !important; }
  .list-toolbar .form-group, .library-search, .library-filter { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  nav { height: auto !important; min-height: 58px; padding: .65rem .85rem !important; gap: .6rem; align-items: center; }
  .nav-brand { min-width: 0; }
  .nav-brand img { max-width: 160px; height: auto !important; object-fit: contain; }
  .nav-right { margin-left: auto; gap: .45rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .nav-user { display: none !important; }
  .btn-nav, .btn-nav-ghost { white-space: nowrap; padding: .55rem .7rem; font-size: 12px; flex: 0 0 auto; }
  main, .page, .container { padding: 1rem .9rem !important; }
  .page-title { font-size: 22px; margin-bottom: 1rem; }
  .hero, .next-action-panel, .attention-panel { border-radius: 18px !important; padding: 1rem !important; margin-bottom: 1rem !important; }
  .hero-greeting, .attention-title, .next-action-panel h2, .hero h1 { font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.12; }
  .hero-sub, .attention-sub, .demo-mode-banner, .example-banner, .manager-example-banner { font-size: 14px; line-height: 1.5; }
  .tabs, .lib-tabs, .review-tabs, .stage-nav, .step-nav, .library-category-strip, .library-filters { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .35rem; padding-bottom: .15rem; scroll-snap-type: x mandatory; }
  .tab, .lib-tab, .review-tab, .stage-btn, .step, .library-pill, .filter-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: 1fr !important; gap: .85rem !important; }
  .module-card, .manager-module-card, .learning-badge-card, .profile-card, .card, .panel, .achievement-panel, .pathway-card, .stat-card, .summary-stat-card, .journey-stat-card, .competency-card, .demo-preview, .demo-mini-card, .upgrade-card { padding: 1rem !important; border-radius: 14px !important; }
  .module-card-top, .module-top, .mcc-top, .pathway-top, .demo-preview-head, .seat-status-card { flex-direction: column; align-items: flex-start !important; gap: .55rem !important; }
  .module-title, .mcc-title, .manager-module-card h3, .pathway-title { font-size: 16px !important; line-height: 1.25; }
  .module-desc, .manager-module-meta, .module-meta, .pathway-list { font-size: 13px; line-height: 1.5; }
  .module-footer, .module-actions, .manager-module-actions, .attention-actions, .result-actions, .btn-row, .editor-actions, .tower-actions, .org-actions, .demo-modal-head { display: flex; flex-direction: column !important; align-items: stretch !important; gap: .65rem !important; }
  .module-footer a, .module-footer button, .module-actions a, .module-actions button, .manager-module-actions a, .manager-module-actions button, .attention-actions button, .result-actions a, .result-actions button, .btn-row button, .btn-row a, .editor-actions button, .tower-actions button, .org-actions button { width: 100% !important; text-align: center; justify-content: center; }
  .badge, .module-badge, .demo-pill, .pathway-pill { white-space: normal; text-align: center; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-tile { min-width: 0; padding: .75rem .55rem !important; }
  .badge-title { overflow-wrap: anywhere; }
  .heatmap-wrap, .heatmap, .hm-name { min-width: 0; }
  .hm-name { font-size: 12px; }
  .progress-mini, .progress-wrap, .hero-progress { width: 100%; }
  .demo-modal-backdrop { padding: 4rem .75rem .75rem !important; }
  .demo-modal { width: min(100%, 96vw); max-height: 88svh; overflow: auto; }
}

@media (max-width: 420px) {
  main, .page, .container { padding-left: .75rem !important; padding-right: .75rem !important; }
  .nav-brand img { max-width: 135px; }
  .btn-nav, .btn-nav-ghost { padding: .5rem .6rem; font-size: 11px; }
  .stat-num, .summary-stat-value, .journey-stat-value, .competency-score, .impact-score .num { font-size: 28px !important; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-icon { font-size: 19px !important; }
  .badge-title { font-size: 10px !important; }
  .module-meta, .module-footer { flex-direction: column; gap: .35rem; align-items: flex-start; }
  .cpd-ring { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Login/mobile tidy v10 */
@media (min-width: 561px){
  .back-site-link{top:1.25rem;left:1.25rem;}
}
@media (max-width:560px){
  body{align-items:flex-start;justify-content:flex-start;padding:calc(env(safe-area-inset-top,0px) + .75rem) .75rem .9rem;}
  .wrap{max-width:420px;margin:0 auto;width:100%;padding-top:0!important;}
  .back-site-link{position:relative!important;top:auto!important;left:auto!important;margin:0 auto .75rem!important;width:fit-content;max-width:100%;padding:.42rem .72rem;font-size:12px;box-shadow:none;background:rgba(255,255,255,.08);}
  .logo-wrap{margin-bottom:.8rem!important;}
  .logo-wrap img{max-height:86px!important;width:auto!important;margin:0 auto;}
  .about-bar{font-size:12px;line-height:1.4;padding:.65rem .75rem;margin-bottom:.85rem;}
  .card{padding:1.15rem!important;border-radius:14px;}
  .card h1{font-size:20px;}
  .card p{margin-bottom:1.1rem;}
  input{margin-bottom:.9rem;}
  .forgot-link{margin-top:-.55rem;margin-bottom:.9rem;}
  .footer{margin-top:1rem;}
}
@media (max-width:380px){
  .about-bar{display:none;}
  .logo-wrap img{max-height:76px!important;}
  .card{padding:1rem!important;}
}



/* Dragonfly mobile login optimisation v22 */
@media (max-width: 640px) {
  html, body {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
  }
  body {
    display: block !important;
    padding: max(10px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    background: var(--green-dark);
  }
  .back-site-link {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: 12px !important;
    right: auto !important;
    z-index: 50 !important;
    width: auto !important;
    max-width: 132px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: .42rem .66rem !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
  }
  .wrap {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding-top: 56px !important;
  }
  .logo-wrap {
    margin: 0 auto 1rem !important;
    text-align: center !important;
  }
  .logo-wrap img {
    width: 150px !important;
    max-width: 46vw !important;
    max-height: 92px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .about-bar {
    display: none !important;
  }
  .card {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 1.45rem 1.25rem !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
  }
  .card h1 {
    font-size: clamp(1.55rem, 7.5vw, 2rem) !important;
    line-height: 1.12 !important;
    margin-bottom: .35rem !important;
  }
  .card p {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    margin-bottom: 1.25rem !important;
  }
  label {
    font-size: .95rem !important;
    margin-bottom: .35rem !important;
  }
  input {
    min-height: 54px !important;
    padding: .72rem .9rem !important;
    border-radius: 14px !important;
    margin-bottom: 1rem !important;
  }
  .forgot-link {
    font-size: .92rem !important;
    margin-top: -.45rem !important;
    margin-bottom: 1rem !important;
  }
  .btn, .btn-ghost {
    min-height: 54px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }
  .msg {
    font-size: .95rem !important;
    line-height: 1.35 !important;
    padding: .8rem .9rem !important;
  }
  .signup-line, .wrap > div[style*="New to Dragonfly"] {
    font-size: .95rem !important;
    line-height: 1.45 !important;
    margin-top: 1rem !important;
    padding: 0 .25rem !important;
  }
  .footer {
    margin-top: 1.1rem !important;
    font-size: .86rem !important;
    line-height: 1.45 !important;
    padding: 0 .5rem !important;
  }
}

@media (max-width: 380px), (max-height: 720px) {
  body { padding-left: 10px !important; padding-right: 10px !important; }
  .wrap { padding-top: 48px !important; }
  .back-site-link { max-width: 118px !important; font-size: 11.5px !important; padding: .36rem .58rem !important; min-height: 36px !important; }
  .logo-wrap { margin-bottom: .75rem !important; }
  .logo-wrap img { width: 126px !important; max-height: 74px !important; }
  .card { padding: 1.05rem .95rem !important; border-radius: 18px !important; }
  .card h1 { font-size: 1.45rem !important; }
  .card p { margin-bottom: .9rem !important; }
  input { min-height: 48px !important; margin-bottom: .75rem !important; }
  .btn, .btn-ghost { min-height: 48px !important; }
  .footer { font-size: .8rem !important; }
}


/* Dragonfly mobile logo aspect fix v23 */
.logo-wrap img{
  height:auto!important;
  width:auto!important;
  max-width:min(240px,58vw)!important;
  max-height:none!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
}
@media(max-width:640px){
  .logo-wrap img{max-width:min(210px,54vw)!important;height:auto!important;width:auto!important;max-height:none!important;}
}
@media(max-width:380px), (max-height:720px){
  .logo-wrap img{max-width:min(176px,50vw)!important;height:auto!important;width:auto!important;max-height:none!important;}
}



.demo-app-footer{margin:2rem auto 0;padding:1rem 1.25rem;border-top:1px solid rgba(39,70,64,.14);display:flex;flex-wrap:wrap;gap:.85rem 1.25rem;justify-content:center;align-items:center;font-size:.82rem;color:#6b6258;background:#f7f5ef}.demo-app-footer a{color:#274640;text-decoration:none;font-weight:700}.demo-app-footer a:hover{text-decoration:underline}@media(max-width:640px){.demo-app-footer{flex-direction:column;gap:.6rem;padding:1.25rem}}