/* Model-Driven Engineering additions to the shared tutorial design. */
@import url('../../ai/assets/style.css');

.skip-link{position:fixed;top:-100px;left:1rem;z-index:2000;background:var(--white);padding:.6rem 1rem;border:2px solid var(--blue);border-radius:6px}.skip-link:focus{top:.5rem}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.module-card.planned:hover{transform:none;box-shadow:none;border-color:var(--border)}
.card-status{font-size:.78rem;color:var(--slate);margin-top:.75rem}
.mobile-toc{display:none}
.index-body{overflow-wrap:anywhere}.index-grid .module-card{min-width:0}.index-hero h1{font-size:clamp(2rem,5vw,3.5rem)}
.content{overflow-wrap:anywhere}.content table{width:100%}
.download-link{font-weight:600}

/* Runnable examples: files, a Playground button and the output captured at build time */
.example{border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin:1.75rem 0;background:var(--white)}
.example-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.5rem}
.example-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.example-title{flex:1 1 12rem;font-weight:600;color:var(--navy)}
.playground-btn{font-size:.85rem;font-weight:600;padding:.35rem .85rem;border-radius:999px;background:var(--navy);color:#fff!important;text-decoration:none;white-space:nowrap}
.playground-btn:hover{background:var(--blue)}
.example-file{font-family:var(--font-mono);font-size:.72rem;color:var(--slate);margin:.75rem 0 .25rem}
.example-files{margin:.5rem 0}.example-files summary{cursor:pointer;font-size:.88rem;color:var(--blue)}
.example-caption{font-size:.78rem;color:var(--slate);margin:.75rem 0 .5rem}
.example .output{margin-top:0}

/* Syntax highlighting from tools/highlight.mjs; the other token colours come from the shared AI stylesheet */
.hljs-name{color:#1D4ED8}
.hljs-operator,.hljs-template-tag{color:#0E7490;font-weight:600}

@media(max-width:900px){.mobile-toc{display:block;margin:1rem 0}.mobile-toc nav{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem}.mobile-toc a{font-size:.85rem}#main{width:100%}}
@media(max-width:440px){#topbar{padding:0 .75rem;gap:.45rem}.module-dropdown .dropdown-menu{min-width:260px;max-width:calc(100vw - 20px)}.lang-switch{margin-left:0}.index-grid{grid-template-columns:1fr}.example{padding:.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media print{.skip-link,.mobile-toc,.playground-btn{display:none!important}details:not([open])>.details-body{display:block!important}.quiz-expl[hidden]{display:block}}