/* Flutter phone-screen mocks (lesson pages with mocks only).
   The .fm-* rules are copied from the standalone course app
   academy/content/sources/ralfiz-flutter-academy.html. The frame around each phone uses the
   Academy's own tokens from academy.css (--line, --surface, --sunk, --ink, --muted, --tc,
   --mono, --r), which carry the light and dark themes; the phone itself is coloured by the
   --fm-* variables the renderer sets from each mock's seed colour. Icons need the
   Material Symbols Outlined font, which the page loads with this file. */
.fm-demo{margin:22px 0 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;max-width:980px}
.fm-demo-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.fm-demo-h>div:first-child{display:grid;gap:1px}
.fm-demo-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tc);font-weight:600}
.fm-demo-h strong{font-size:15px}
.fm-frames{display:inline-flex;gap:2px;background:var(--sunk);border-radius:8px;padding:3px;flex-wrap:wrap}
.fm-frames button{border:0;background:transparent;padding:5px 10px;border-radius:6px;font-size:13px;cursor:pointer;color:var(--muted)}
.fm-frames button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.fm-demo-b{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;align-items:stretch}
.fm-stage{padding:18px;display:flex;justify-content:center;align-items:flex-start;background:var(--sunk)}
.fm-codecol{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--line)}
.fm-code-h{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}
.fm-codecol pre.code{margin:0;border-radius:0;flex:1;max-height:560px;overflow:auto;font-size:12.5px;background:var(--surface)}
.fm-demo figcaption{padding:10px 14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media (max-width:820px){.fm-demo-b{grid-template-columns:minmax(0,1fr)}.fm-codecol{border-left:0;border-top:1px solid var(--line)}.fm-codecol pre.code{max-height:380px}}
.fm-more h3{font-size:22px;margin:30px 0 4px}
.fm-phone{width:300px;max-width:100%;height:610px;border-radius:34px;padding:9px;background:#1b1b1f;box-shadow:0 6px 20px rgba(0,0,0,.18);flex:none;font-family:Roboto,"IBM Plex Sans",system-ui,sans-serif;color:var(--fm-onSurface)}
.fm-scr{position:relative;height:100%;border-radius:26px;overflow:hidden;background:var(--fm-surface);display:flex;flex-direction:column;font-size:14px;line-height:1.4}
.fm-ic{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:"liga";flex:none;vertical-align:middle;width:1em;height:1em;overflow:hidden;text-align:center}
.fm-status{display:flex;justify-content:space-between;align-items:center;padding:8px 18px 2px;font-size:12px;font-weight:500;color:var(--fm-onSurface)}
.fm-status>span{display:flex;gap:3px;align-items:center}
.fm-ab{display:flex;align-items:center;gap:4px;min-height:56px;padding:0 4px 0 8px;background:var(--fm-surface)}
.fm-ab-t{flex:1;font-size:20px;line-height:28px;padding-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-ab.lg{flex-wrap:wrap;min-height:112px;align-content:space-between;padding-bottom:18px}
.fm-ab.lg .fm-ab-t{flex-basis:100%;order:9;font-size:28px;line-height:36px;padding-left:12px}
.fm-body{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0;position:relative}
.fm-flex{display:flex;min-width:0}
.fm-t{min-width:0;overflow-wrap:anywhere}
.fm-box{min-width:0;overflow:hidden;box-sizing:border-box}
.fm-card{border-radius:12px;background:var(--fm-surfC);box-shadow:0 1px 2px rgba(0,0,0,.12);overflow:hidden;min-width:0}
.fm-card.out{background:var(--fm-surface);border:1px solid var(--fm-outlineV);box-shadow:none}
.fm-card.fill{background:var(--fm-surfCH);box-shadow:none}
.fm-lt{display:flex;align-items:center;gap:16px;padding:8px 24px 8px 16px;min-height:56px;width:100%;box-sizing:border-box}
.fm-lt.sel{background:var(--fm-sec)}
.fm-lt-m{flex:1;display:flex;flex-direction:column;min-width:0}
.fm-list{display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;box-sizing:border-box}
.fm-grid{display:grid;width:100%;box-sizing:border-box}
.fm-div{height:1px;background:var(--fm-outlineV);width:100%;flex:none}
.fm-ib{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:none}
.fm-ib.filled{background:var(--fm-primary)}
.fm-ib.tonal{background:var(--fm-sec)}
.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border-radius:20px;font-size:14px;font-weight:500;white-space:nowrap;flex:none}
.fm-btn.exp{width:100%;box-sizing:border-box}
.fm-btn.fi{background:var(--fm-primary);color:var(--fm-onPrimary)}
.fm-btn.el{background:var(--fm-surfC);color:var(--fm-primary);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.fm-btn.to{background:var(--fm-sec);color:var(--fm-onSec)}
.fm-btn.ou{border:1px solid var(--fm-outline);color:var(--fm-primary)}
.fm-btn.tx{color:var(--fm-primary);padding:0 12px}
.fm-btn.dis{background:rgba(128,128,128,.14);color:rgba(128,128,128,.7);box-shadow:none;border-color:transparent}
.fm-fab-w{position:absolute;right:16px;bottom:16px}
.fm-fab-w.c{right:auto;left:50%;transform:translateX(-50%)}
.fm-fab-w.nav{bottom:96px}
.fm-fab{display:inline-flex;align-items:center;gap:10px;min-width:56px;height:56px;padding:0 16px;box-sizing:border-box;justify-content:center;border-radius:16px;background:var(--fm-pc);color:var(--fm-onPc);box-shadow:0 3px 6px rgba(0,0,0,.22);font-weight:500}
.fm-tf{position:relative;display:flex;flex-direction:column;width:100%;box-sizing:border-box}
.fm-tf-in{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border:1px solid var(--fm-outline);border-radius:4px;box-sizing:border-box}
.fm-tf.filled .fm-tf-in{border:0;border-bottom:1px solid var(--fm-onSurfV);border-radius:4px 4px 0 0;background:var(--fm-surfCH)}
.fm-tf.foc .fm-tf-in{border:2px solid var(--fm-primary)}
.fm-tf.err .fm-tf-in{border:2px solid var(--fm-error)}
.fm-tf-l{position:absolute;left:12px;top:17px;font-size:16px;color:var(--fm-onSurfV);background:var(--fm-surface);padding:0 4px;pointer-events:none}
.fm-tf-l.up{top:-8px;font-size:12px}
.fm-tf.foc .fm-tf-l{color:var(--fm-primary)} .fm-tf.err .fm-tf-l{color:var(--fm-error)}
.fm-tf.filled .fm-tf-l{background:transparent}.fm-tf.filled .fm-tf-l.up{top:6px}
.fm-tf-v{flex:1;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-tf-v.hint{color:var(--fm-onSurfV)}
.fm-tf-h{font-size:12px;padding:4px 16px 0;color:var(--fm-onSurfV)}.fm-tf-h.err{color:var(--fm-error)}
.fm-row{display:flex;align-items:center;gap:12px;min-height:40px}
.fm-cb{width:18px;height:18px;border:2px solid var(--fm-onSurfV);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.fm-cb.on{background:var(--fm-primary);border-color:var(--fm-primary)}
.fm-rd{width:20px;height:20px;border:2px solid var(--fm-onSurfV);border-radius:50%;box-sizing:border-box;flex:none;position:relative}
.fm-rd.on{border-color:var(--fm-primary)}.fm-rd.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--fm-primary)}
.fm-sw{width:52px;height:32px;border-radius:16px;border:2px solid var(--fm-outline);background:var(--fm-surfCH);box-sizing:border-box;position:relative;flex:none}
.fm-sw i{position:absolute;left:6px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--fm-outline)}
.fm-sw.on{background:var(--fm-primary);border-color:var(--fm-primary)}.fm-sw.on i{left:22px;top:2px;width:24px;height:24px;background:var(--fm-onPrimary)}
.fm-sl{position:relative;height:4px;border-radius:2px;background:var(--fm-sec);margin:18px 10px;width:calc(100% - 20px)}
.fm-sl i{position:absolute;left:0;top:0;height:4px;border-radius:2px;background:var(--fm-primary)}
.fm-sl b{position:absolute;top:-8px;width:4px;height:20px;border-radius:2px;background:var(--fm-primary);transform:translateX(-2px)}
.fm-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;border:1px solid var(--fm-outline);border-radius:8px;font-size:14px;font-weight:500;color:var(--fm-onSurfV);flex:none;white-space:nowrap}
.fm-chip.sel{background:var(--fm-sec);border-color:var(--fm-sec);color:var(--fm-onSec);padding-left:8px}
.fm-badge-w{position:relative;display:inline-flex}
.fm-badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:var(--fm-error);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box}
.fm-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--fm-pc);color:var(--fm-onPc);font-weight:500;flex:none}
.fm-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;box-sizing:border-box;overflow:hidden;flex:none;color:var(--fm-onPc)}
.fm-img>span{font-size:12px;font-weight:500;opacity:.85}
.fm-stack{position:relative;width:100%;flex:none}
.fm-cpi{width:36px;height:36px;border-radius:50%;border:4px solid var(--fm-sec);border-top-color:var(--fm-primary);box-sizing:border-box;display:inline-block;animation:fmspin 1s linear infinite;flex:none}
@keyframes fmspin{to{transform:rotate(360deg)}}
.fm-lpi{height:4px;border-radius:2px;background:var(--fm-sec);width:100%;overflow:hidden}.fm-lpi i{display:block;height:100%;background:var(--fm-primary)}
.fm-seg{display:flex;border:1px solid var(--fm-outline);border-radius:20px;overflow:hidden;height:40px;width:100%}
.fm-seg>span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:500}
.fm-seg>span+span{border-left:1px solid var(--fm-outline)}.fm-seg>span.on{background:var(--fm-sec);color:var(--fm-onSec)}
.fm-tabs{display:flex;border-bottom:1px solid var(--fm-outlineV);background:var(--fm-surface)}
.fm-tabs>span{flex:1;text-align:center;padding:14px 4px 12px;font-size:14px;font-weight:500;color:var(--fm-onSurfV);border-bottom:3px solid transparent}
.fm-tabs>span.on{color:var(--fm-primary);border-color:var(--fm-primary)}
.fm-nav{display:flex;height:80px;background:var(--fm-surfC);flex:none}
.fm-nav>span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--fm-onSurfV)}
.fm-nav>span>b{width:64px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:normal}
.fm-nav>span.on b{background:var(--fm-sec);color:var(--fm-onSec)}.fm-nav>span.on small{color:var(--fm-onSurface);font-weight:600}
.fm-snack{position:absolute;left:12px;right:12px;bottom:12px;background:var(--fm-inverse);color:var(--fm-onInverse);border-radius:4px;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;font-size:14px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.fm-snack.nav{bottom:92px}.fm-snack b{color:var(--fm-pc);font-weight:500}
.fm-scrim{position:absolute;inset:0;background:rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;padding:20px}
.fm-dlg{background:var(--fm-surfCH);border-radius:28px;padding:24px;width:100%;box-sizing:border-box;display:grid;gap:14px}
.fm-dlg-t{font-size:22px;line-height:28px}.fm-dlg-c{font-size:14px;color:var(--fm-onSurfV)}
.fm-dlg-a{display:flex;justify-content:flex-end;gap:8px}.fm-dlg-a>span{color:var(--fm-primary);font-weight:500;padding:10px 12px}
.fm-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--fm-surfC);border-radius:28px 28px 0 0;padding:14px 0 20px;max-height:75%;overflow:hidden}
.fm-sheet>i{display:block;width:32px;height:4px;border-radius:2px;background:var(--fm-onSurfV);margin:0 auto 12px;opacity:.4}
.fm-scrim:has(.fm-sheet),.fm-scrim:has(.fm-drawer){align-items:stretch;justify-content:flex-start;padding:0}
.fm-drawer{width:80%;height:100%;background:var(--fm-surfC);border-radius:0 16px 16px 0;padding:12px;box-sizing:border-box;overflow:hidden}
.fm-ph{width:100%;border:1px solid var(--fm-outline);background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(128,128,128,.12) 8px 9px)}
.fm-code{font-family:var(--mono);font-size:11px;background:var(--fm-surfCH);border-radius:6px;padding:8px;margin:0;white-space:pre-wrap}
.fm-unk{border:1px dashed var(--fm-error);color:var(--fm-error);font-size:11px;padding:4px}
.deep .fm-demo pre.code{margin:0}
.fm-codecol pre code{background:none;padding:0;border-radius:0;font-size:inherit}
.fm-ic{font-size:inherit}
.fm-codecol pre.code{padding:12px 14px}
.fm-fr-w{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-play{white-space:nowrap}
/* Academy: the lesson column is narrower than the course app's (the student page has two side
   rails), so stack the phone above the code by the figure's own width, not only the viewport's. */
.fm-demo{container-type:inline-size}
@container (max-width:680px){.fm-demo-b{grid-template-columns:minmax(0,1fr)}.fm-codecol{border-left:0;border-top:1px solid var(--line)}.fm-codecol pre.code{max-height:380px}}