/* NCP shell. Single-column layout: teaching content and editors always use the full content width. */
:root{
  --bg:#f5f6f8;--surface:#ffffff;--surface-2:#f0f2f6;--ink:#1d2433;--muted:#5b6475;--line:#d9dee7;
  --accent:#2f6fd6;--accent-ink:#1b4ea3;--accent-soft:#e8f0fd;--ok:#1f8a4c;--warn:#b7791f;--err:#c0392b;
  --code-bg:#f6f7fa;--mono:ui-monospace,"Cascadia Code","Consolas","SFMono-Regular",monospace;
  --radius:14px;--content:1080px;--shadow:0 1px 2px rgba(20,30,50,.06),0 4px 16px rgba(20,30,50,.05);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#12151b;--surface:#1a1f28;--surface-2:#222835;--ink:#e7eaf0;--muted:#a3abbb;--line:#323a4a;
  --accent:#6b9cf0;--accent-ink:#a9c6ff;--accent-soft:#1d2c46;--code-bg:#161a22;--shadow:none;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent-ink)}
h1,h2,h3{line-height:1.25}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.eyebrow{margin:0 0 .3rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
[hidden]{display:none!important}

/* controls */
button,.btn{font:inherit;font-weight:600;border-radius:10px;padding:.5rem .95rem;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;line-height:1.3}
button:disabled{opacity:.55;cursor:not-allowed}
.primary{background:var(--accent);color:#fff}
.primary:hover:not(:disabled){filter:brightness(1.07)}
.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.secondary:hover:not(:disabled){border-color:var(--accent)}
.danger{background:var(--surface);color:var(--err);border-color:#e3b1aa}
.danger:hover:not(:disabled){background:#fff1ef}
.text-btn{background:none;border:0;color:var(--accent-ink);padding:.3rem .4rem}
.small{padding:.3rem .65rem;font-size:.88rem;border-radius:8px}
.icon-btn{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.2rem .5rem;min-width:2rem;justify-content:center;color:var(--ink)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem;max-width:100%}
textarea{width:100%;resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:1.05rem;height:1.05rem}
.field{display:grid;gap:.3rem;margin:0}
.field>span{font-weight:600;font-size:.92rem}
.field small{color:var(--muted)}
.field input:not([type=checkbox]),.field select{width:100%}
.check{display:flex;gap:.5rem;align-items:center}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem .9rem;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0}
.form-error{color:var(--err);min-height:1.2em;margin:0}
.mono{font-family:var(--mono)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:1rem}
.login-card{width:min(420px,100%);display:grid;gap:.9rem;background:var(--surface);padding:1.6rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.login-card h1{margin:0}
.demo summary{cursor:pointer;color:var(--muted)}
.demo-buttons{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}

/* shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.6rem 1rem;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:.6rem;color:var(--ink);text-decoration:none;min-width:0}
.brand strong{font-size:1.15rem;color:var(--accent)}
.brand span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.nav{display:flex;gap:.2rem;flex-wrap:wrap;flex:1}
.nav a{padding:.4rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent-ink)}
.nav a:hover{background:var(--surface-2)}
.session{display:flex;gap:.6rem;align-items:center;color:var(--muted);font-size:.9rem}
main{max-width:var(--content);margin:0 auto;padding:1.4rem 1rem 3rem;outline:none}
.footer{text-align:center;color:var(--muted);font-size:.8rem;padding:1rem}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.page-head h1{margin:0}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.stack{display:grid;gap:1rem}
.stack>*,.stack-sm>*,.card{min-width:0}
.block-card-head select{max-width:100%;min-width:0}
.stack-sm{display:grid;gap:.5rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;letter-spacing:.03em;padding:.15rem .5rem;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.badge-ok{background:#e7f6ed;color:#17663a;border-color:#9fd6b4}
.badge-warn{background:#fff6e0;color:#8a5a00;border-color:#ecd08c}
.badge-accent{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.badge-err{background:#fdecea;color:#9b2c21;border-color:#efb4ab}
@media (prefers-color-scheme:dark){.badge-ok{background:#15301f;color:#8fe0ae}.badge-warn{background:#322a14;color:#f1cf7a}.badge-err{background:#3a1f1b;color:#ffb2a6}}
.notice{padding:.75rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.notice ul{margin:.3rem 0 0;padding-left:1.2rem}
.notice-error{border-color:#efb4ab;background:#fdf1ef}.notice-warn{border-color:#ecd08c;background:#fffaeb}.notice-ok{border-color:#9fd6b4;background:#eefaf2}
@media (prefers-color-scheme:dark){.notice-error{background:#3a1f1b}.notice-warn{background:#322a14}.notice-ok{background:#15301f}}
.empty{padding:2rem 1rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}
.table-wrap{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;font-size:.93rem}
table.data th,table.data td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.data th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:1rem}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:.55rem .85rem;color:var(--muted)}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--accent);border-radius:999px}

/* toasts & dialogs */
#toasts{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.5rem;z-index:1000;max-width:min(440px,calc(100vw - 2rem))}
.toast{padding:.7rem 1rem;border-radius:12px;background:var(--ink);color:var(--bg);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.toast-error{background:#9b2c21;color:#fff}.toast-ok{background:#17663a;color:#fff}
.ncp-dialog{border:0;border-radius:var(--radius);padding:0;width:min(560px,calc(100vw - 2rem));background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ncp-dialog.wide{width:min(1000px,calc(100vw - 2rem))}
.ncp-dialog::backdrop{background:rgba(15,20,30,.45)}
.ncp-dialog form>header,.ncp-dialog>div>header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.ncp-dialog h2{margin:0;font-size:1.2rem}
.dialog-body{padding:1rem 1.2rem;display:grid;gap:.8rem;max-height:70vh;overflow:auto}
.ncp-dialog footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.9rem 1.2rem;border-top:1px solid var(--line)}

/* unit runtime (shared by student view and previews) */
.ncp-unit{display:grid;gap:1.4rem}
.unit-header{display:grid;gap:.5rem}
.unit-header h1{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);overflow-wrap:anywhere}
.unit-header .lead{margin:0;color:var(--muted);font-size:1.05rem}
.outcomes summary{cursor:pointer;font-weight:600}
.section-nav{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.section-nav a{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:var(--surface);font-weight:600;font-size:.9rem}
.section-nav a span{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:.78rem}
.unit-section{scroll-margin-top:5rem;display:grid;gap:.9rem}
.unit-section-head{display:flex;align-items:center;gap:.7rem;padding-bottom:.4rem;border-bottom:2px solid var(--line)}
.unit-section-head h2{margin:0;font-size:1.45rem}
.section-index{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:700}
.unit-section-blocks{display:grid;gap:.9rem}
.ncp-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;min-width:0;position:relative}
.ncp-block.is-complete{border-left:4px solid var(--ok)}
.ncp-block.is-complete::after{content:"✓ opravljeno";position:absolute;top:.55rem;right:.8rem;font-size:.72rem;font-weight:700;color:var(--ok)}
.ncp-block-title{margin:0 0 .6rem;font-size:1.08rem}
.ncp-block-body{min-width:0}
.ncp-block[data-block-type="content.markdown"]{background:transparent;border-color:transparent;padding:.2rem .1rem}
.ncp-block-error{display:grid;gap:.2rem;padding:.7rem .9rem;border:1px solid #efb4ab;border-radius:10px;background:#fdf1ef;color:#7a271a}
.ncp-evidence-trace{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.7rem;padding-top:.5rem;border-top:1px dashed var(--line);font-size:.8rem;color:var(--muted)}
.ncp-evidence-trace b{color:var(--accent-ink);font-size:.72rem;letter-spacing:.05em}
.ncp-sandbox-frame{width:100%;min-height:240px;border:0;display:block;background:transparent}
.ncp-sandbox-loading{padding:1.5rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px}

/* course home */
.unit-list{display:grid;gap:.8rem}
.unit-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center}
.unit-num{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:1.1rem}
.unit-row h2{margin:0;font-size:1.15rem;overflow-wrap:anywhere}
.unit-row p{margin:.2rem 0 0}
@media (max-width:640px){.unit-row{grid-template-columns:auto minmax(0,1fr)}.unit-row .toolbar{grid-column:1/-1}}

/* library cards: dedicated single-column card layout (no drag-handle grid) */
.lib-card{display:grid;gap:.8rem}
.lib-head{display:flex;gap:.8rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.lib-title{min-width:0;flex:1 1 320px}
.lib-title h2{margin:0;font-size:1.2rem;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.lib-title .mono{color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
.lib-badges{display:flex;gap:.35rem;flex-wrap:wrap}
.lib-stats{display:flex;gap:1.2rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.lib-stats b{color:var(--ink)}
.versions{display:grid;gap:.45rem}
.version-row{display:flex;gap:.6rem 1rem;align-items:center;flex-wrap:wrap;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.version-row .v{font-family:var(--mono);font-weight:700;min-width:5.5rem}
.version-row .meta{color:var(--muted);font-size:.85rem;flex:1 1 220px}
.version-row .toolbar{justify-content:flex-end}
.draft-row{border-style:dashed;background:var(--surface)}

/* course builder */
.cb-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:.8rem;align-items:start}
.cb-row.dragging{opacity:.5}.cb-row.drop-target{outline:2px dashed var(--accent)}
.cb-handle{cursor:grab;color:var(--muted);padding:.4rem .2rem;user-select:none}
.cb-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin-top:.6rem}

/* portfolio */
.pf-grid{display:grid;gap:1rem}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:.3rem}
.check-list li{display:flex;gap:.5rem}
.st-pass::before{content:"✓";color:var(--ok);font-weight:700}.st-fail::before{content:"✕";color:var(--err);font-weight:700}.st-warn::before{content:"!";color:var(--warn);font-weight:700}
.method-checks{display:flex;gap:.4rem .9rem;flex-wrap:wrap}
.score-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.35rem 0;border-bottom:1px solid var(--line)}
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.segmented label{padding:.3rem .7rem;cursor:pointer;border-left:1px solid var(--line)}
.segmented label:first-child{border-left:0}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label:has(input:checked){background:var(--accent);color:#fff}

/* studio */
.studio-head{display:grid;gap:.4rem}
.studio-head h1{margin:0;font-size:1.5rem;overflow-wrap:anywhere}
.mode-switch{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mode-switch button{border-radius:0;background:var(--surface);color:var(--ink);border:0;border-left:1px solid var(--line)}
.mode-switch button:first-child{border-left:0}
.mode-switch button[aria-pressed=true]{background:var(--accent);color:#fff}
.dirty-flag{color:var(--warn);font-weight:700;font-size:.9rem}
.block-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0}
.block-card.dragging{opacity:.45}
.block-card.drop-before{box-shadow:0 -3px 0 var(--accent)}
.block-card.drop-after{box-shadow:0 3px 0 var(--accent)}
.block-card-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.5rem .7rem;border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0}
.block-card-head .drag{cursor:grab;color:var(--muted);user-select:none;padding:0 .2rem}
.block-card-head .type{font-family:var(--mono);font-size:.82rem;color:var(--accent-ink)}
.block-card-head .bid{font-family:var(--mono);font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.block-card-head .btitle{font-weight:600;min-width:0;overflow-wrap:anywhere}
.block-card-preview{padding:.8rem 1rem}
.block-card-preview .ncp-block{border:0;padding:0;background:none}
.object-list{display:grid;gap:.6rem}
.object-item{border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;display:grid;gap:.5rem;background:var(--surface-2)}
.palette{display:grid;gap:.8rem}
.palette h3{margin:.2rem 0;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.palette-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.palette-items button{display:grid;justify-items:start;gap:.15rem;text-align:left;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:600}
.palette-items button small{font-weight:400;color:var(--muted)}
.palette-items button:hover{border-color:var(--accent)}
.insert-bar{display:flex;justify-content:center}
.insert-bar button{opacity:.65}
.insert-bar button:hover{opacity:1}
.source-editor{font-family:var(--mono);font-size:.9rem;line-height:1.45;min-height:420px;tab-size:2;white-space:pre}
.html-toolbar{display:flex;gap:.3rem;flex-wrap:wrap}
.html-preview{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;background:var(--surface)}
.error-list{margin:0;padding-left:1.2rem}
.error-list li{margin:.2rem 0}
.file-grid{display:grid;gap:.4rem}
.file-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.45rem .6rem;border:1px solid var(--line);border-radius:10px}
.file-row .mono{flex:1 1 240px;overflow-wrap:anywhere}
@media (max-width:640px){.mode-switch button{padding:.45rem .6rem;font-size:.88rem}main{padding:1rem .75rem 3rem}.card{padding:.9rem}.ncp-block{padding:.85rem}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* unit player (student delivery): outline sidebar + one section at a time, like Open edX */
main.wide{max-width:1360px}
.player{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:start}
.player.outline-open{grid-template-columns:290px minmax(0,1fr)}
.player-main{display:grid;gap:1.1rem;min-width:0}
.player-outline{display:none;position:sticky;top:4.6rem;max-height:calc(100vh - 5.6rem);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem}
.player-outline.is-open{display:block}
.outline-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:0 .3rem}
.outline-head .icon-btn{display:none}
.outline-units,.outline-sections{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.outline-link{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem}
a.outline-link:hover{background:var(--surface-2)}
.outline-unit.is-current>.outline-link{background:var(--accent-soft);color:var(--accent-ink)}
.outline-title{flex:1;min-width:0;overflow-wrap:anywhere}
.outline-pct{font-size:.75rem;color:var(--muted);font-weight:700}
.outline-pct.is-done{color:var(--ok)}
.unit-num.small{width:1.8rem;height:1.8rem;border-radius:8px;font-size:.85rem;flex:none}
.outline-sections{margin:.3rem 0 .4rem 1rem;padding-left:.7rem;border-left:2px solid var(--line)}
.outline-section{width:100%;display:flex;align-items:center;gap:.55rem;text-align:left;justify-content:flex-start;background:none;border:0;border-radius:8px;padding:.4rem .5rem;color:var(--ink);font-weight:500;font-size:.92rem}
.outline-section:hover:not(:disabled){background:var(--surface-2)}
.outline-section.is-current{background:var(--surface-2);font-weight:700}
.outline-section:disabled{color:var(--muted);opacity:1;cursor:not-allowed}
.state-dot,.seq-dot{display:inline-grid;place-items:center;flex:none;width:1.35rem;height:1.35rem;border-radius:50%;border:2px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:700;background:var(--surface)}
.state-dot svg,.seq-dot svg{width:12px;height:12px}
[data-state=done]>.state-dot,[data-state=done]>.seq-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.is-current>.state-dot,.is-current>.seq-dot{border-color:var(--accent);color:var(--accent-ink)}
.is-current[data-state=done]>.state-dot,.is-current[data-state=done]>.seq-dot{background:var(--ok);border-color:var(--accent);color:#fff}
.seq-nav{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:sticky;top:3.6rem;z-index:10;box-shadow:var(--shadow)}
.seq-arrow{border-radius:0;background:none;border:0;color:var(--ink);padding:0 .9rem;justify-content:center}
.seq-arrow:first-child{border-right:1px solid var(--line)}.seq-arrow:last-child{border-left:1px solid var(--line)}
.seq-arrow:hover:not(:disabled){background:var(--surface-2)}
.seq-tabs{list-style:none;margin:0;padding:0;display:flex;flex:1;min-width:0}
.seq-tabs li{flex:1 1 0;min-width:0}
.seq-tab{width:100%;height:100%;border-radius:0;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:.65rem .4rem;justify-content:center;gap:.5rem;min-width:0}
.seq-tab:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.seq-tab.is-current{border-bottom-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.seq-tab:disabled{opacity:.6}
.seq-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seq-panels{outline:none;min-width:0}
.seq-panels h2:focus{outline:none}
.seq-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--line)}
.seq-foot .toolbar{margin-left:auto}
.unit-section{animation:sec-in .18s ease-out}
@keyframes sec-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1100px){.seq-label{display:none}.seq-tab.is-current .seq-label{display:inline;max-width:9ch}}
@media (max-width:900px){
  .player.outline-open{grid-template-columns:minmax(0,1fr)}
  .player-outline.is-open{position:fixed;inset:0 auto 0 0;z-index:60;width:min(320px,88vw);max-height:none;border-radius:0 var(--radius) var(--radius) 0;box-shadow:0 0 0 100vmax rgba(15,20,30,.45)}
  .outline-head .icon-btn{display:inline-flex}
  .seq-nav{top:3.2rem}
}
@media (max-width:640px){.seq-foot .toolbar{width:100%}.seq-foot .toolbar>*{flex:1 1 100%;justify-content:center}.seq-tab{padding:.6rem .1rem}}

/* administration */
.session a{color:inherit;text-decoration:none;font-weight:600}
.session a:hover{text-decoration:underline}
.bulk-bar{padding:.5rem .7rem;border:1px solid var(--accent);background:var(--accent-soft);border-radius:10px}
.row-off td{opacity:.6}
.unit-picks{display:grid;gap:.4rem;margin:.3rem 0 0 1.6rem;max-height:260px;overflow:auto}
fieldset.card{border:1px solid var(--line)}
fieldset legend{padding:0 .4rem}
table.data input[type=search],.card input[type=search]{min-width:0}

/* discussion board */
.nav-badge{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;background:var(--err);color:#fff;font-size:.72rem;font-weight:700;vertical-align:middle}
.disc-list{display:grid;gap:.5rem}
.disc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.75rem .9rem;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--surface)}
.disc-row:hover{border-color:var(--accent)}
.disc-row.is-unread{border-left:4px solid var(--accent);background:var(--accent-soft)}
.disc-row.is-unread .disc-title{font-weight:800}
.disc-row.is-deleted{opacity:.6}
.disc-title{overflow-wrap:anywhere}
.disc-snippet{margin:.15rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.disc-meta{display:grid;justify-items:end;gap:.2rem;white-space:nowrap}
.disc-post.is-answer{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.disc-post.is-deleted{opacity:.6;border-style:dashed}
.disc-post-head .avatar{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:.8rem;font-weight:800}
.disc-body{margin:.6rem 0;overflow-wrap:anywhere}
.disc-code{margin:.5rem 0;padding:.7rem .9rem;background:var(--code-bg);border:1px solid var(--line);border-radius:10px;overflow:auto;font-family:var(--mono);font-size:.88rem;line-height:1.45}
.disc-body code,.disc-preview code{font-family:var(--mono);background:var(--code-bg);padding:.05rem .3rem;border-radius:5px;font-size:.9em}
.disc-body pre code,.disc-preview pre code{background:none;padding:0}
.disc-preview{min-height:8rem;padding:.7rem .9rem;border:1px dashed var(--line);border-radius:10px;overflow-wrap:anywhere}
.disc-composer .tabs{border-bottom:0}
@media (max-width:640px){.disc-row{grid-template-columns:minmax(0,1fr)}.disc-meta{display:flex;justify-items:start;gap:.8rem}.disc-snippet{white-space:normal}}

/* pedagogical frame */
.view-tabs{margin:0}
.track-optional{background:#e8f4ff;color:#14507f;border-color:#a9d1f2}
.track-advanced{background:#f3e8ff;color:#5b2a8a;border-color:#d3b6ef}
.track-core{background:#e7f6ed;color:#17663a;border-color:#9fd6b4}
@media (prefers-color-scheme:dark){.track-optional{background:#14283a;color:#9fd0f7;border-color:#2b4c68}.track-advanced{background:#2a1c3a;color:#d9b8f5;border-color:#4b3468}.track-core{background:#15301f;color:#8fe0ae;border-color:#285a3b}}
.phase-before{background:#fff6e0;color:#8a5a00;border-color:#ecd08c}
.phase-during{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.phase-after{background:#efeafd;color:#4a3a8f;border-color:#cfc5f2}
@media (prefers-color-scheme:dark){.phase-before{background:#322a14;color:#f1cf7a;border-color:#5a4a20}.phase-after{background:#231f3a;color:#c9bff5;border-color:#3e3768}}
.ncp-block[data-track=optional]{border-left:4px solid #6db3e8}
.ncp-block[data-track=advanced]{border-left:4px solid #a56fd6}
.track-line{gap:.4rem;margin-bottom:.5rem;align-items:center}
.frame-bar{display:flex;border-radius:10px;overflow:hidden;font-size:.8rem;font-weight:700}
.frame-seg{padding:.45rem .6rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.seg-before{background:#fff6e0;color:#8a5a00}.seg-during{background:var(--accent-soft);color:var(--accent-ink)}.seg-after{background:#efeafd;color:#4a3a8f}
@media (prefers-color-scheme:dark){.seg-before{background:#322a14;color:#f1cf7a}.seg-after{background:#231f3a;color:#c9bff5}}
.frame-legend{gap:.5rem .8rem}
.frame-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1rem;align-items:start}
.frame-col{display:grid;gap:.8rem;min-width:0}
.frame-col-head h3{margin:0}.frame-col-head p{margin:.2rem 0 0;font-size:.9rem}
.frame-card{display:grid;gap:.5rem;padding:.9rem 1rem}
.frame-chips{gap:.3rem;margin-top:.3rem}
.frame-purpose{margin:0;font-size:.93rem}
.frame-ai{margin:0;font-size:.85rem;color:var(--muted)}
.frame-list{margin:0;padding-left:1.1rem;display:grid;gap:.15rem;font-size:.92rem}
.frame-counts{gap:.3rem}
.frame-details summary{cursor:pointer;font-weight:600;font-size:.9rem}
.frame-blocks{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem}
.frame-block{display:flex;gap:.5rem;align-items:flex-start;padding:.35rem .5rem;border-radius:8px;background:var(--surface-2)}
.frame-block-main{flex:1;min-width:0;display:grid}
.frame-tick{width:1rem;color:var(--ok);font-weight:800}
.frame-open{text-align:left;justify-content:flex-start;padding:0;font-weight:600;overflow-wrap:anywhere}
.frame-teacher{border-style:dashed}
/* Studio 2.0: three-column authoring layout (outline · canvas · inspector). Authoring only. */
main.studio-wide{max-width:1640px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fine{font-size:.82rem}
.segmented button{border:0;border-left:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--ink);padding:.3rem .65rem;font-size:.85rem}
.segmented button:first-child{border-left:0}
.segmented button[aria-pressed=true]{background:var(--accent);color:#fff}
.chip-row{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.2rem .7rem;font-size:.82rem;font-weight:600}
.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.panel-title{margin:0;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.studio-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 360px;gap:1rem;align-items:start}
.studio-outline,.studio-inspector{position:sticky;top:4.6rem;max-height:calc(100vh - 5.6rem);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;min-width:0}
.studio-canvas{display:grid;gap:.8rem;min-width:0}
.canvas-head{display:grid;gap:.6rem;position:sticky;top:3.9rem;z-index:5;background:var(--bg);padding:.4rem 0 .6rem;border-bottom:1px solid var(--line)}
.canvas-title{margin:0;font-size:1.25rem;overflow-wrap:anywhere}
.canvas-body{display:grid;gap:.6rem;min-width:0}
.block-list{display:grid;gap:.1rem}
.block-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0;outline:none}
.block-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.block-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.block-card[aria-current=true] .block-card-head{background:var(--accent-soft)}
.block-card-preview[hidden]{display:none}
.block-card-head .drag{cursor:grab;font-size:1.1rem;line-height:1}
.kbd-help{font-size:.8rem;margin:.4rem 0 0}
.insert-bar.end{margin-top:.5rem}
.st-outline summary{list-style:none;cursor:pointer}
.st-outline summary::-webkit-details-marker{display:none}
.st-tools{margin:.5rem 0}
.st-sections{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem}
.st-section{border:1px solid transparent;border-radius:10px;min-width:0}
.st-section.is-open{border-color:var(--line);background:var(--surface-2)}
.st-section-row{display:flex;align-items:center;gap:.2rem;border-radius:10px}
.st-section-row.drop-target{outline:2px dashed var(--accent);background:var(--accent-soft)}
.st-name{flex:1;min-width:0;display:flex;gap:.45rem;align-items:center;justify-content:flex-start;background:none;border:0;color:var(--ink);padding:.4rem .45rem;text-align:left;font-weight:600}
.st-name .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-name .num{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:.75rem}
.st-name small{color:var(--muted);font-weight:500}
.st-name[aria-current=true] .num{background:var(--accent);color:#fff}
.st-menu{position:relative}
.st-menu summary{list-style:none;cursor:pointer;padding:.2rem .5rem;border-radius:8px;color:var(--muted);font-weight:800}
.st-menu summary::-webkit-details-marker{display:none}
.st-menu[open] summary{background:var(--surface)}
.st-menu-items{position:absolute;right:0;top:100%;z-index:10;display:grid;min-width:12rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:.25rem}
.st-menu-items button{justify-content:flex-start;background:none;border:0;color:var(--ink);padding:.4rem .6rem;border-radius:6px;font-weight:500}
.st-menu-items button:hover:not(:disabled){background:var(--surface-2)}
.danger-text{color:var(--err)!important}
.st-blocks{list-style:none;margin:0;padding:.1rem .3rem .4rem 2.1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem}
.st-blocks button{width:100%;display:grid;justify-items:start;gap:0;background:none;border:0;border-radius:8px;color:var(--ink);padding:.25rem .45rem;text-align:left;font-weight:500;font-size:.88rem}
.st-blocks button .t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-blocks button small{color:var(--muted);font-size:.72rem}
.st-blocks button[aria-current=true]{background:var(--accent-soft);color:var(--accent-ink)}
.inspector-panel{display:grid;gap:.8rem;min-width:0}
.inspector-head h3{margin:0;font-size:1.05rem;overflow-wrap:anywhere}
.inspector-head p{margin:.15rem 0 0;overflow-wrap:anywhere}
.inspector-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.inspector-actions select{flex:1 1 10rem;min-width:0;font-size:.85rem;padding:.3rem .5rem}
.block-form{display:grid;gap:.7rem;min-width:0}
.inspector-preview{display:grid;gap:.5rem;border-top:1px solid var(--line);padding-top:.7rem}
.inspector-preview h4{margin:0;font-size:.9rem}
.palette-panel{display:grid;gap:.6rem}
.palette h4{margin:.3rem 0;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.studio-inspector .palette-items{grid-template-columns:1fr}
.preview-stage{background:var(--surface-2);border:1px dashed var(--line);border-radius:12px;padding:.6rem;overflow:auto}
.preview-frame{margin:0 auto;background:var(--bg);border-radius:10px;padding:.6rem;display:grid;gap:.8rem;min-width:0;transition:max-width .2s ease}
.size-note{font-size:.78rem;margin:0}
.preview-toolbar{margin-bottom:.4rem}
.ncp-dialog.wide.preview-dialog{width:min(1200px,calc(100vw - 2rem))}
@media (max-width:1180px){.studio-layout{grid-template-columns:240px minmax(0,1fr)}.studio-inspector{grid-column:1/-1;position:static;max-height:none}}
@media (max-width:760px){.studio-layout{grid-template-columns:minmax(0,1fr)}.studio-outline{position:static;max-height:none}.canvas-head{position:static}.st-outline summary .panel-title::after{content:" ▾"}}
/* Studio: save status, conflicts, revisions (Phase 3) */
.save-status{font-size:.82rem;color:var(--muted)}
.save-status[data-state=saving]{color:var(--accent-ink)}
.save-status[data-state=error],.save-status[data-state=conflict]{color:var(--err);font-weight:600}
.conflict-banner{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.conflict-banner[hidden]{display:none}
table.revisions tr.is-head td{background:var(--accent-soft)}
table.revisions td:last-child{white-space:nowrap}
/* UI language selector */
.lang-select select{padding:.25rem .45rem;font-size:.85rem;border-radius:8px}
.login-lang{display:flex;justify-content:flex-end;margin-bottom:-.4rem}
.offering-select select{max-width:34ch;padding:.25rem .5rem;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}

/* Evidence (Phase 6c): recorded data as a key/value list */
.evidence-payload { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: .25rem .8rem; margin: 0; }
.evidence-payload dt { color: var(--muted); }
.evidence-payload dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.evidence-payload pre { margin: 0; max-height: 16rem; overflow: auto; white-space: pre-wrap; }

/* Pedagogical design view (Phase 8): timeline cards, aggregate bars, learning-type colours */
.design-aggregates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;align-items:start}
.design-bars{display:grid;gap:.35rem}
.design-bar-row{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;align-items:center;font-size:.9rem}
.design-bar-row .design-bar{grid-column:1/-1}
.design-bar-label{overflow-wrap:anywhere}
.design-bar{height:.8rem;border-radius:999px;background:var(--surface-2);overflow:hidden}
.design-bar-fill{display:block;height:100%;background:var(--accent)}
.design-bar-value{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem}
.design-block{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;padding:.3rem .5rem;border-radius:8px;background:var(--surface-2);font-size:.9rem}
.design-table td,.design-table th{padding:.25rem .5rem}
.design-highlight{outline:3px solid var(--accent);outline-offset:2px}
.design-lt-pridobivanje-znanja{background:#e3f0ff;color:#1d4f91}.design-lt-raziskovanje{background:#e6f7ec;color:#1e6b3a}
.design-lt-razprava{background:#fff3dc;color:#7a5200}.design-lt-vaja{background:#f1e8ff;color:#5b3a99}
.design-lt-sodelovanje{background:#ffe8ec;color:#8f2340}.design-lt-ustvarjanje{background:#e0f6f6;color:#1d6666}
@media (prefers-color-scheme:dark){.design-lt-pridobivanje-znanja{background:#18304f;color:#a9cdfb}.design-lt-raziskovanje{background:#15331f;color:#9fe0b4}
.design-lt-razprava{background:#3a2c10;color:#f1cf7a}.design-lt-vaja{background:#2a1f45;color:#cfb8f7}
.design-lt-sodelovanje{background:#3d1a24;color:#f5a9bb}.design-lt-ustvarjanje{background:#123535;color:#99e0e0}}