/* Kvarn X Academy: site glue styles (served at /academy/kx-academy.css).
   Source of truth: scripts/academy/kx-academy.css. Progress marks, the
   "jatka" card, course progress segments, the click-to-load embed placeholders,
   the quiz completion card, the footer and the UX overrides from the 7.10.2026 audit.
   The consent banner styles (mirroring CookieConsentConfig.tsx) are appended by build.py. */

/* Reading progress bar (replaces the design tweaker's #tw-progress) */
#kx-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--mint,#90FFBC);z-index:200;transition:width .1s linear;box-shadow:0 0 12px rgba(144,255,188,.5);pointer-events:none}

/* ── Layout cost: inactive lessons leave the layout entirely. The export parked them at
   left:-100000px, so all 105 views were styled and laid out on every load (about 5 s of
   layout work on a phone). showRoute() resizes the charts of the view it opens. ── */
.view:not(.active){display:none}

/* ── Mega menu + search overlay: invisible also means unfocusable (they were opacity-only, so
   Tab walked through 135 hidden links). Ids beat the export's class rules for `transition`. ── */
#navMega{visibility:hidden;transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .22s,visibility 0s linear .26s}
#navMega.open{visibility:visible;transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .22s,visibility 0s}
#srchOverlay{visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
#srchOverlay.open{visibility:visible;transition:opacity .2s,visibility 0s}
.srch-item.sel{background:rgba(0,47,54,.08)}
.srch-item .si-t{min-width:0}
.srch-item .si-k{flex-shrink:0;text-align:right}
.srch-empty{line-height:1.55}

/* Focus lands on the new page's heading after a route change; a quiet ring for keyboard users. */
.view h1[tabindex="-1"]:focus,.view h2[tabindex="-1"]:focus{outline:none}
.view h1[tabindex="-1"]:focus-visible,.view h2[tabindex="-1"]:focus-visible{outline:2px solid #108570;outline-offset:6px;border-radius:4px}

/* ── Menu label: long on desktop, short on phones (the long one wrapped to two lines) ── */
.nml-short{display:none}
@media (max-width:680px){
  .nml-long{display:none}
  .nml-short{display:inline}
  /* One level open at a time: the first heading of each column toggles it. */
  #navMega .nav-mega-inner{gap:4px;padding:18px 16px 28px}
  #navMega .nav-mega-col > .kx-acc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;margin:0;padding:13px 14px;border-bottom:1px solid rgba(0,47,54,.08);border-radius:10px;font-size:12px}
  #navMega .nav-mega-col > .kx-acc-h::after{content:"";width:8px;height:8px;flex-shrink:0;margin:0 6px 3px 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
  #navMega .nav-mega-col.kx-open > .kx-acc-h{border-bottom-color:transparent}
  #navMega .nav-mega-col.kx-open > .kx-acc-h::after{transform:rotate(-135deg);margin-bottom:-3px}
  #navMega .nav-mega-col:not(.kx-open) > :not(.kx-acc-h){display:none}
}

/* ── Front page: the nav already carries the logo; a tighter hero puts "Jatka siitä mihin jäit"
   and the CTAs in the first screen. ── */
.home-index .kh-logo{display:none}
.home-index .kh-hero{padding-top:clamp(92px,10vw,124px)}
.home-index .kh-sub{margin-top:18px}
.home-index .kh-bar{margin-top:26px}
.home-index .kh-cta-l{margin-top:20px}

/* ── Simulation slider rows: the Korot and ETF courses wrap label / slider / value on phones, the
   other lessons kept a fixed 132px label + 116px value beside the slider and pushed the page
   wider than the screen (Kryptovarat 07). ── */
.ix-slider{min-width:0}
@media (max-width:560px){
  .ix-row{flex-wrap:wrap}
  .ix-row > label{flex:1 0 100%}
}

/* ── Kryptovarat 07: the five-card risk grid breaks out of the column with 100vw maths that
   assume a centred container; the lesson column sits right of centre (number gutter) and 100vw
   includes a classic scrollbar, so the page scrolled sideways on desktops. Wider gutters. ── */
@media (min-width:1101px){
  .view.crs-kr .riskgrid.wide{width:min(1360px,calc(100vw - 120px));margin-left:calc(50% - min(680px,calc(50vw - 60px)))}
}

/* ── Course hub primary button stays teal on mint (the runtime contrast fixer is patched in
   build.py; this is the belt to its braces). ── */
.view .tp-hero .hero-cta:not(.ghost){color:#002F36 !important}

/* ── Small uppercase labels: 12px minimum; a darker green where they sit on light backgrounds
   (#108570 on the stone background was 4.1:1). Dark-section variants keep their mint. ── */
.learn-k,.story-k,.goal-k,.split-head,.quiz-h,.muista-h,.tp-eyebrow,.tp-int-label,.fact-card-label,.sec-k,.dgm-k,.eyebrow,.hi-eyebrow,#mk .sec-eyebrow,.nav-mega-h,.srch-cat,.tp-foot a .dir,.hc-lessons,.dna-tag,.dna-res-eyebrow,.dna-level-k,.dna-sec-h,.sn-cat,.nu-k,.rel-h,.ix-row > label,.kh-k,.kh-eyebrow,.path-banner .pb-k{font-size:12px !important}
.tp-level{font-size:11px !important}
.learn-k,.story-k,.goal-k,.split-head,.sec-k,.dgm-k,.hi-eyebrow,.hc-lessons,.dna-tag,.dna-res-eyebrow,.path-banner .pb-k,.kh-k,.kh-eyebrow:not(.mint),.tp-foot a.tp-next .dir,
.eyebrow:not(.section-dark *),#mk .page:not(.dark) .sec-eyebrow,.fact-card-label:not(.section-dark *),.tp-interactive:not(.dark) .tp-int-label{color:#0E7461 !important}
.nav-mega-h,.srch-cat,.nav-pill .nm-n{color:var(--graphite,#4F5E60) !important}
.nav-pill.active .nm-n{color:rgba(255,255,255,.7) !important}

/* Lesson state marks on index rows, hub lesson lists and the mega menu */
.kx-mark{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-family:var(--fm);font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em;flex-shrink:0;vertical-align:middle}
[data-kx="done"] .kx-mark{background:var(--mint,#90FFBC);color:#002F36}
[data-kx="done"] .kx-mark::before{content:"";display:block;width:8px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1px) rotate(-45deg)}
[data-kx="started"] .kx-mark{border:1.5px solid currentColor;opacity:.5}
[data-kx="started"] .kx-mark::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:currentColor}
[data-kx="partial"] .kx-mark{background:rgba(144,255,188,.22);border:1px solid rgba(144,255,188,.7);color:inherit;font-variant-numeric:tabular-nums}
.nav-pill.active .kx-mark{color:#fff}
.nav-pill.active[data-kx="done"] .kx-mark{color:#002F36}
.kh-row .kx-mark{margin-left:4px}
.trow .kx-mark{margin-right:2px}

/* Course progress segments under a hub hero */
.kx-hubprog{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;font-family:var(--fm);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:inherit;opacity:.9}
.kx-hubprog[hidden]{display:none}
.kx-segs{display:flex;gap:4px}
.kx-segs i{display:block;width:18px;height:5px;border-radius:3px;background:currentColor;opacity:.22}
.kx-segs i.started{background:var(--mint,#90FFBC);opacity:.5}
.kx-segs i.done{background:var(--mint,#90FFBC);opacity:1}

/* "Jatka siitä mihin jäit" card on the Academy front page (under the lead, above the CTAs) */
.kx-resume{margin:26px auto 0;width:100%;max-width:560px;box-sizing:border-box;background:rgba(255,255,255,.84);border:1px solid rgba(0,47,54,.12);border-radius:16px;padding:16px 20px;text-align:left;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kx-resume-link{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#002F36}
.kx-resume-k{font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0E7461}
.kx-resume-t{font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.kx-resume-link:hover .kx-resume-t{color:#108570}
.kx-resume-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,47,54,.08);font-family:var(--fb);font-size:13px;color:#4F5E60}
.kx-resume-reset{background:none;border:0;padding:0;font:inherit;color:#4F5E60;text-decoration:underline;cursor:pointer}
.kx-resume-reset:hover{color:#002F36}

/* Completion card under a finished quiz (the quiz block is dark teal) */
.kx-quiz-done{margin-top:22px;padding:18px 20px;border-radius:14px;background:rgba(144,255,188,.1);border:1px solid rgba(144,255,188,.35);display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#fff;font-family:var(--fb)}
.kx-qd-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint,#90FFBC)}
.kx-qd-check{position:relative;width:18px;height:18px;border-radius:50%;background:var(--mint,#90FFBC)}
.kx-qd-check::before{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border-right:2px solid #002F36;border-bottom:2px solid #002F36;transform:rotate(45deg)}
.kx-qd-s{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.kx-qd-next{margin-top:4px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--mint,#90FFBC);color:#002F36 !important;font-family:var(--fb);font-size:15px;font-weight:700;text-decoration:none;border-bottom:0}
.kx-qd-next:hover{filter:brightness(1.05)}

/* Click-to-load embeds */
.kx-yt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,#002F36,#0A4A45);color:#fff;text-align:center}
.kx-yt-in{max-width:440px;display:flex;flex-direction:column;align-items:center;gap:10px}
.kx-yt-k,.kx-tv-k{font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint,#90FFBC)}
.kx-yt-in strong{font-family:var(--fd);font-size:clamp(17px,2.4vw,22px);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.kx-yt-in p,.kx-tv p{margin:0;font-family:var(--fb);font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.kx-yt-btn,.kx-tv-btn{margin-top:6px;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--mint,#90FFBC);color:#002F36;font-family:var(--fb);font-size:15px;font-weight:700;cursor:pointer}
.kx-yt-btn:hover,.kx-tv-btn:hover{filter:brightness(1.05)}
.kx-tv{height:100%;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;text-align:center;color:#002F36}
.kx-tv p{color:#4F5E60;max-width:460px}

/* Way back to kvarnx.com: nav link on wide screens, mega-menu pill everywhere */
.kx-site-link{opacity:.72}
.kx-site-link:hover{opacity:1}
@media (max-width:900px){.kx-site-link{display:none}}
.nav-mega-site{grid-column:1 / -1;margin-top:-6px;margin-bottom:6px;color:rgba(0,47,54,.72)}
.nav-mega-site:hover{color:#002F36}

/* ── Footer: the Academy used to end after the tools list with no way onward. ── */
.kx-foot{background:#002F36;color:rgba(255,255,255,.82);font-family:var(--fb)}
.kx-foot-in{max-width:1120px;margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:40px}
.kx-foot-brand img{display:block;height:22px;width:auto}
.kx-foot-brand p{margin:18px 0 0;font-size:14.5px;line-height:1.55;max-width:34ch;color:rgba(255,255,255,.72)}
.kx-foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kx-foot h2{margin:0 0 10px;font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint,#90FFBC)}
.kx-foot-nav a{display:block;color:rgba(255,255,255,.88);text-decoration:none;border-bottom:0;font-size:15px;line-height:1.4;padding:6px 0}
.kx-foot-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.kx-foot-legal{border-top:1px solid rgba(255,255,255,.12)}
.kx-foot-legal > div{max-width:1120px;margin:0 auto;padding:22px 24px 36px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.62)}
.kx-foot-legal p{margin:0}
.kx-foot-legal p + p{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px}
.kx-foot-legal a,.kx-foot-legal button{color:rgba(255,255,255,.78);background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kx-foot-legal a:hover,.kx-foot-legal button:hover{color:#fff}
@media (max-width:820px){.kx-foot-in{grid-template-columns:1fr;gap:30px;padding-top:44px}.kx-foot-nav{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.kx-foot-nav{grid-template-columns:1fr;gap:18px}}
@media print{.kx-foot{display:none}}

/* ── Consent banner styles: copied from src/components/ui/CookieConsentConfig.tsx by build.py ── */
:root {
          --cc-bg: #fff;
          --cc-text: #2d4156;
          --cc-btn-primary-bg: #002f36;
          --cc-btn-primary-color: #90ffbc;
          --cc-btn-primary-hover-bg: #203f43;
          --cc-btn-primary-hover-color: #90ffbc;
          --cc-btn-secondary-bg: #f3f4f6;
          --cc-btn-secondary-color: #374151;
          --cc-btn-secondary-hover-bg: #e5e7eb;
        }

        /* Bottom bar consent modal styling */
        .cm.cm--bar {
          font-family: 'TT Firs Ampersand', 'TT Firs Neue', system-ui, sans-serif !important;
          background: var(--cc-bg) !important;
          border-top: 1px solid #e5e7eb !important;
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
          padding: 20px 24px !important;
        }

        /* Content area styling for bottom bar */
        .cm--bar .cm__content {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 24px !important;
        }

        /* Text content styling */
        .cm__title {
          font-size: 16px !important;
          font-weight: 600 !important;
          margin-bottom: 4px !important;
          color: var(--cc-text) !important;
        }

        .cm__desc {
          font-size: 14px !important;
          line-height: 1.4 !important;
          color: #6b7280 !important;
          margin: 0 !important;
        }

        /* Manage preferences link styling */
        .cc-link {
          color: var(--cc-btn-primary-bg) !important;
          text-decoration: underline !important;
          background: none !important;
          border: none !important;
          padding: 0 !important;
          font: inherit !important;
          cursor: pointer !important;
        }

        .cc-link:hover {
          color: var(--cc-btn-primary-hover-bg) !important;
        }

        /* Buttons container */
        .cm--bar .cm__btns {
          display: flex !important;
          gap: 12px !important;
          flex-shrink: 0 !important;
        }

        /* Button styling */
        .cm__btn {
          padding: 10px 20px !important;
          border-radius: 8px !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.2s ease !important;
          white-space: nowrap !important;
        }

        .cm__btn[data-role="accept_all"] {
          background: var(--cc-btn-primary-bg) !important;
          color: var(--cc-btn-primary-color) !important;
        }

        .cm__btn[data-role="accept_all"]:hover {
          background: var(--cc-btn-primary-hover-bg) !important;
          color: var(--cc-btn-primary-hover-color) !important;
          transform: translateY(-1px) !important;
        }

        .cm__btn[data-role="accept_necessary"] {
          background: var(--cc-btn-secondary-bg) !important;
          color: var(--cc-btn-secondary-color) !important;
          border: 1px solid #d1d5db !important;
        }

        .cm__btn[data-role="accept_necessary"]:hover {
          background: var(--cc-btn-secondary-hover-bg) !important;
          transform: translateY(-1px) !important;
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
          .cm--bar .cm__content {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 16px !important;
          }

          .cm--bar .cm__texts {
            text-align: center !important;
          }

          .cm--bar .cm__btns {
            justify-content: center !important;
          }

          .cm__btn {
            flex: 1 !important;
            min-width: 120px !important;
          }
        }

        /* Settings modal styling */
        .pm {
          font-family: 'TT Firs Ampersand', 'TT Firs Neue', system-ui, sans-serif !important;
          border-radius: 16px !important;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
        }

        /* Toggle switches styling */
        .pm__toggle {
          accent-color: var(--cc-btn-primary-bg) !important;
        }