/* ========================================================================
   GagaMuller Learning — 06-blocks.css
   The eleven learning-object block types, the modal and the toast.

   Loaded by index.html as sheet 6 of 7. The order is the cascade: a
   later sheet may override an earlier one, so it must not be changed.
   ======================================================================== */
  /* ---------- learning objects ---------- */
  .lo-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); margin:20px 0;}
  /* A flip card's faces are absolutely positioned, so the card needs a height -
     but 158px cut off the longer explanations. Taller, and each face scrolls if
     the text still runs past it. */
  .flip{height:196px; perspective:900px; cursor:pointer;}
  .flip-in{position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;}
  .flip.on .flip-in{transform:rotateY(180deg);}
  .flip-f,.flip-b{position:absolute; inset:0; overflow:auto; backface-visibility:hidden; border-radius:var(--radius);
    padding:17px; display:flex; flex-direction:column; justify-content:center; gap:9px; border:1px solid var(--line);}
  .flip-f{background:var(--surface);}
  .flip-b{background:var(--raised); transform:rotateY(180deg); border-color:var(--brand-solid);}
  .flip-f .fi{width:26px; height:26px; color:var(--brand); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
  .flip-f .hint{font:500 11px var(--mono); color:var(--muted); margin-top:auto; display:inline-flex; align-items:center; gap:5px;}
  .flip-b p{font-size:13px; color:var(--muted); margin:0; line-height:1.55;}

  .callout{display:flex; gap:13px; padding:15px 17px; border-radius:var(--radius);
    border:1px solid var(--line); background:var(--surface); margin:18px 0;}
  .callout svg{width:19px; height:19px; flex:none; margin-top:2px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .callout p{font-size:13.5px; color:var(--muted); margin:0;}
  .callout h4{margin-bottom:4px;}
  .callout.warn{background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 32%, transparent);} .callout.warn svg{color:var(--warn);}
  .callout.bad{background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 32%, transparent);} .callout.bad svg{color:var(--bad);}
  .callout.ok{background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 28%, transparent);} .callout.ok svg{color:var(--ok);}
  .callout.info{background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 35%, transparent);} .callout.info svg{color:var(--brand);}

  .dolist{display:grid; gap:12px; grid-template-columns:1fr 1fr; margin:18px 0;}
  .dolist > div{padding:15px; border-radius:var(--radius); border:1px solid var(--line);}
  .dolist .do{background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 24%, transparent);}
  /* Numbered steps, with sub-steps indented under their parent. */
  .stepset{display:flex; flex-direction:column; gap:8px; margin:20px 0;}
  .stp{display:flex; gap:13px; padding:14px 16px; border:1px solid var(--line);
    border-radius:var(--radius-s); background:var(--raised);}
  .stp-n{min-width:25px; height:25px; padding:0 5px; border-radius:8px; background:var(--brand-soft);
    color:var(--brand); display:grid; place-items:center; font:800 11px var(--mono); flex:none;}
  .stp-b{min-width:0;}
  .slide .stp-b h4{font:700 14.5px var(--display); margin:0 0 3px;}
  .slide .stp-x, .stp-x{font-size:13.5px; line-height:1.5; color:var(--muted);}
  /* A sub-step is indented, and quieter: the parent is the instruction, the
     sub-steps are how it is carried out. */
  /* A sub-step belongs to the step above it, so it sits closer to it than to
     the next top-level one - the list gap is 8px and this pulls it in to 4.
     Two subs in a row stay tight to each other for the same reason. */
  /* Named substep, not sub: ".slide .sub" is a slide subtitle and carries
     24px of margin-bottom, which every sub-step was silently inheriting - so
     3.1 and 3.2 sat further apart from each other than from anything else. */
  .stp.substep{background:transparent; border-style:dashed; margin-bottom:0;}
  /* The list gap is 8px. A sub-step closes to 3px of its parent and of the
     next sub, and the step that returns to the top level opens back out to
     14px - so a group reads as a group without a box drawn round it. */
  .stp + .stp.substep{margin-top:-5px;}
  .stp.substep + .stp:not(.substep){margin-top:6px;}
  /* Same purple as a top-level step, a shade deeper. Grey read as "disabled"
     next to the parent's brand badge, when the only difference meant is one of
     rank. The mix darkens whatever --brand-soft is in the current theme, so
     light and dark both keep the relationship rather than a fixed colour. */
  .stp.substep .stp-n{background:color-mix(in srgb, var(--brand-soft) 84%, #000 16%);
    color:var(--brand); height:22px; min-width:22px;
    font-size:10px;}
  .slide .stp.substep .stp-b h4{font-size:13.5px;}
  .stp.d1{margin-left:30px;} .stp.d2{margin-left:60px;} .stp.d3{margin-left:90px;}
  @media (max-width:640px){ .stp.d1{margin-left:14px;} .stp.d2{margin-left:28px;} .stp.d3{margin-left:42px;} }
  .stp-num{font-size:12px;}

  /* A linked document. Deliberately a card rather than an inline link: on a
     slide read at arm's length a blue word in a paragraph is easy to miss, and
     the thing being offered is an object - it has a name, a type and a reason
     for being there. */
  .fileblk{display:flex; align-items:center; gap:13px; margin:16px 0; padding:14px 16px;
    border:1px solid var(--line); border-radius:14px; background:var(--raised);
    color:var(--ink); text-decoration:none;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;}
  a.fileblk:hover{border-color:color-mix(in srgb, var(--brand) 45%, var(--line));
    background:var(--brand-soft); transform:translateY(-1px);}
  .fileblk > svg{width:22px; height:22px; flex:none; color:var(--brand);}
  /* Specific enough to beat .slide.sl-short p, which scales body copy up to
     26px on a sparse slide and was setting the note under the link larger than
     the link itself. */
  .slide .fileblk > div > h4, .fileblk > div > h4{
    font:700 15px var(--display); margin:0; line-height:1.35;}
  .slide .fileblk > div > p, .fileblk > div > p{
    font-size:13px; line-height:1.5; color:var(--muted); margin:3px 0 0;}
  .fileblk > div{flex:1; min-width:0;}
  .fileblk .fk{font:700 10px var(--mono); letter-spacing:.5px; padding:3px 7px; border-radius:6px;
    background:var(--fill); color:var(--muted); flex:none;}
  .fileblk .fgo{width:16px; height:16px; flex:none; color:var(--muted);}
  a.fileblk:hover .fgo{color:var(--brand);}
  .fileblk.missing{border-style:dashed; background:transparent;}
  .fileblk.missing > svg{color:var(--muted);}
  .dolist .dont{background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 26%, transparent);}
  .dolist h4{font:700 11px var(--mono); letter-spacing:0.50px; margin-bottom:10px;}
  .dolist .do h4{color:var(--ok);} .dolist .dont h4{color:var(--bad);}
  .dolist ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--muted); line-height:1.65;}

  /* video block */
  .vid{margin:20px 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#000;}
  .vid .vf{position:relative; width:100%; aspect-ratio:16/9; background:var(--raised);}
  .vid iframe, .vid video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
  .vid .vcap{padding:11px 15px; background:var(--surface); font-size:12.5px; color:var(--muted);
    display:flex; align-items:center; gap:9px;}
  .vid .vcap svg{width:14px; height:14px; flex:none; color:var(--brand); fill:none; stroke:currentColor; stroke-width:2;}
  .vid-missing{display:grid; place-items:center; gap:8px; position:absolute; inset:0; color:var(--muted);
    font-size:13px; text-align:center; padding:20px;}

  /* phishing hotspot exercise */
  .mail{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); margin:20px 0;}
  .mail-h{padding:13px 15px; border-bottom:1px solid var(--hair); background:var(--raised); font-size:13px; display:grid; gap:5px;}
  .mail-h .row{display:flex; gap:9px;}
  .mail-h .row b{color:var(--muted); font:600 11.5px var(--mono); min-width:56px; letter-spacing:0.30px;}
  .mail-b{padding:17px; font-size:13.8px; line-height:1.75; color:var(--muted);}
  /* Passage mode. The same exercise without the mail-client framing, for a
     tell that is not in an email - a bank-change letter, a paragraph of a
     method statement, a supplier's quotation. A brand rule down the left says
     "read this closely" where the From line used to. */
  .mail.passage{border-left:3px solid var(--brand-solid);}
  .mail.passage .mail-t{padding:14px 17px 0; font:700 15px var(--display); color:var(--ink);}
  .mail.passage .mail-b{font-size:14.6px; line-height:1.8; max-width:74ch;}
  .hot{border-bottom:2px dashed var(--muted); cursor:pointer; padding:1px 3px; border-radius:4px;
    transition:.16s; color:var(--ink);}
  .hot:hover{background:var(--brand-soft);}
  .hot.got{background:var(--bad-soft); border-bottom-color:var(--bad); color:var(--bad); font-weight:700;}
  .hot-note{font-size:12.8px; color:var(--bad); display:block; padding-left:11px; border-left:2px solid var(--bad);}
  .hot-score{display:flex; align-items:center; gap:10px; padding:11px 15px; border-top:1px solid var(--hair);
    background:var(--raised); font:600 13px var(--display);}

  /* scenario */
  .scen{margin:18px 0; display:grid; gap:10px;}
  .scen-o{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius);
    border:1px solid var(--line); background:var(--surface); text-align:left; transition:.15s; width:100%;}
  .scen-o:hover{border-color:color-mix(in srgb, var(--brand) 50%, var(--line)); background:var(--fill);}
  .scen-o .ltr{width:23px; height:23px; border-radius:8px; background:var(--fill-2); display:grid; place-items:center;
    font:800 11px var(--mono); color:var(--muted); flex:none;}
  .scen-o.right{border-color:var(--live); background:var(--ok-soft);} .scen-o.right .ltr{background:var(--live); color:var(--ink-on-strong);}
  .scen-o.wrong{border-color:var(--bad); background:var(--bad-soft);} .scen-o.wrong .ltr{background:var(--bad); color:var(--ink-on-strong);}
  .scen-o .txt{font-size:13.8px;}
  .scen-o .fb{font-size:12.8px; color:var(--muted); margin-top:6px; display:none;}
  .scen-o.right .fb, .scen-o.wrong .fb{display:block;}

  /* quiz */
  .q-t{font:700 15.5px var(--display); margin-bottom:15px; line-height:1.45;}
  .q-opts{display:grid; gap:9px;}
  .q-o{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:var(--radius-s);
    border:1px solid var(--line); background:var(--raised); transition:.14s; text-align:left; width:100%; font-size:13.8px;}
  .q-o:hover{border-color:color-mix(in srgb, var(--brand) 45%, var(--line));}
  .q-o.sel{border-color:var(--brand-solid); background:var(--brand-soft);}
  .q-o .rd{width:17px; height:17px; border-radius:50%; border:2px solid var(--muted); flex:none; position:relative; transition:.14s;}
  .q-o.sel .rd{border-color:var(--brand-solid); background:var(--brand-solid);}
  .q-o.sel .rd::after{content:""; position:absolute; inset:3px; border-radius:50%; background:#fff;}
  .q-o.corr{border-color:var(--live); background:var(--ok-soft);}
  .q-o.incorr{border-color:var(--bad); background:var(--bad-soft);}
  .q-exp{margin-top:12px; padding:11px 13px; border-radius:var(--radius-s); background:var(--raised);
    font-size:13px; color:var(--muted); border-left:3px solid var(--brand-solid);}

  /* result / certificate */
  .result{max-width:640px; text-align:center; padding:36px 26px; margin:0 auto 20px;}
  .result .big{font:800 56px var(--display); letter-spacing:-2px; line-height:1; font-variant-numeric:tabular-nums;}
  .cert{border-radius:var(--radius); padding:32px; border:1px solid var(--line); text-align:center;
    background:radial-gradient(600px 220px at 50% -20%, var(--brand-soft), transparent 70%), var(--surface);
    position:relative; overflow:hidden;}
  .cert::before,.cert::after{content:""; position:absolute; width:118px; height:118px; border:2px solid var(--brand-solid); opacity:.2;}
  .cert::before{top:13px; left:13px; border-right:0; border-bottom:0; border-radius:12px 0 0 0;}
  .cert::after{bottom:13px; right:13px; border-left:0; border-top:0; border-radius:0 0 12px 0;}
  .cert .seal{width:58px; height:58px; margin:0 auto 15px; border-radius:50%; background:var(--brand-grad);
    display:grid; place-items:center; box-shadow:0 6px 22px var(--brand-glow);}
  .cert .seal svg{width:27px; height:27px; color:#fff; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
  .cert .ct{font:800 10.5px var(--mono); letter-spacing:1.00px; color:var(--muted);}
  .cert .cn{font:800 24px var(--display); letter-spacing:-.6px; margin:9px 0;}
  .cert .cc2{font-size:14.5px; color:var(--muted);}
  .cert-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:15px; margin-top:26px;
    padding-top:21px; border-top:1px solid var(--line); text-align:left;}
  .cert-meta div span{display:block; font:700 9.5px var(--mono); letter-spacing:0.50px; color:var(--muted);}
  .cert-meta div b{font-size:13px; font-weight:700;}

  /* ---------- modal ---------- */
  .ov{position:fixed; inset:0; z-index:300; background:var(--scrim); backdrop-filter:blur(6px);
    display:grid; place-items:center; padding:26px; animation:pageIn .16s ease both;}
  /* position:relative so the editor's leave prompt can cover it - see .ed-leave */
  .mdl{position:relative; width:100%; max-width:680px; max-height:88vh; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column;
    animation:rise .24s cubic-bezier(.22,1,.36,1) both;}
  .mdl.wide{max-width:960px;} .mdl.xl{max-width:1140px;}
  .mdl-h{padding:17px 21px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:13px;}
  .mdl-h .sh{font:500 12px var(--mono); color:var(--muted); margin-top:3px;}
  /* Every modal body scrolls. The place-people list is one row per employee, so
     on a real feed it ran off the bottom of the screen with the save button
     below the fold. Capping here covers every dialog rather than each list. */
  .mdl-b{padding:21px; overflow-y:auto; flex:1; max-height:min(70vh, 620px); overscroll-behavior:contain;}
  .mdl-f{padding:15px 21px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end;
    background:var(--raised); border-radius:0 0 var(--radius) var(--radius); flex-wrap:wrap;}

  /* A full-screen dialog. Fixed rather than sized, so it escapes the overlay's
     own padding without the overlay needing to know which size it is holding -
     every other dialog keeps the centred, padded treatment untouched.

     Placed after the rules it overrides, which is where an override belongs:
     the body cap above is the general guarantee that a long dialog list cannot
     push the buttons off screen, and this is the one case that reaches it a
     different way. Here the dialog is exactly the height of the viewport, so
     flex:1 and overflow-y:auto do the same job without a pixel cap - the body
     still scrolls and the footer is still on screen. */
  .mdl.full{position:fixed; inset:0; width:auto; max-width:none; max-height:none;
    border:0; border-radius:0; animation:mdlFull .22s cubic-bezier(.22,1,.36,1) both;}
  .mdl.full .mdl-b{max-height:none;}
  /* One scrollbar, the dialog's. Same treatment the player gets. */
  body.modal-full{overflow:hidden;}
  .mdl.full .mdl-f{border-radius:0;}
  @keyframes mdlFull{from{opacity:0; transform:scale(.995);} to{opacity:1; transform:none;}}

  /* ---------- the full-screen course editor (slide deck tab) ----------
     On the deck tab the editor drives the course from its OWN top and bottom
     bars, built inside the pane to look exactly like the learner's player. The
     dialog's own header and footer would be a second, competing set of chrome,
     so dk-fulledit hides them and lets the pane fill the whole dialog edge to
     edge. They are hidden, not removed, so every handler wired to the footer
     buttons still resolves - the deck's own bars drive them by proxy. Settings
     keeps the ordinary dialog chrome; only the deck goes full-bleed. */
  .mdl.full.dk-fulledit > .mdl-h, .mdl.full.dk-fulledit > .mdl-f{display:none;}
  .mdl.full.dk-fulledit > .mdl-b{padding:0; overflow:hidden; display:flex;}
  .mdl.full.dk-fulledit #edPane{flex:1; min-height:0; display:flex;}

  /* ---------- toast ---------- */
  #toasts{position:fixed; bottom:22px; right:22px; z-index:400; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
  .toast{display:flex; gap:11px; align-items:flex-start; padding:13px 16px; border-radius:14px;
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
    max-width:380px; animation:slideIn .28s cubic-bezier(.22,1,.36,1) both; font-size:13.5px;}
  .toast svg{width:17px; height:17px; flex:none; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
  .toast.ok svg{color:var(--ok);} .toast.bad svg{color:var(--bad);} .toast.info svg{color:var(--brand);}
  .toast b{display:block; margin-bottom:2px;}
  .toast span{color:var(--muted); font-size:12.8px;}
  .toast-t{flex:1; min-width:0;}
  /* The dismiss control. A toast sits over Continue and over a dialog's
     buttons, so there has to be a way to clear it rather than wait for it. */
  .toast-x{flex:none; width:24px; height:24px; margin:-2px -6px 0 2px; padding:0; border:0;
    border-radius:8px; background:transparent; color:var(--muted); cursor:pointer;
    display:grid; place-items:center; transition:background .16s ease, color .16s ease;}
  .toast-x:hover{background:var(--raised); color:var(--txt);}
  .toast-x:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
  /* After the tone rules above, so the cross is never tinted green or red. */
  .toast .toast-x svg{width:14px; height:14px; margin-top:0; color:inherit; stroke-width:2.4;}
  .toast.toast-out{animation:none; opacity:0; transform:translateX(20px);
    transition:opacity .24s ease, transform .24s cubic-bezier(.4,0,1,1);}