/* University of Kurdistan – Semiconductor Fabrication course · shared design system */
:root{
  --crimson:#d4264f; --crimson-d:#a81a3c; --blue:#2f529e; --blue-d:#1f3a78; --navy:#0e1a3a;
  --bg:#f6f4ef; --card:#ffffff; --ink:#14203f; --muted:#5c6783; --line:#dcd8cd; --soft:#eceae2;
  --accent:var(--blue); --hot:var(--crimson); --good:#1f8a5b; --warn:#c77c0a;
  --c1:#2f529e; --c2:#d4264f; --c3:#1f8a5b; --c4:#c77c0a; --c5:#7a4fb5; --c6:#0e8a99;
  --si:#8e9bb5; --ox:#6fc3e8; --poly:#c9a227; --metal:#b9bfc9; --resist:#e08a3c; --nitride:#7b6fa8; --ndop:#e87a6b; --pdop:#5aa0e8; --mask:#2a2f3a;
  --shadow:0 1px 2px rgba(14,26,58,.08),0 6px 20px rgba(14,26,58,.07);
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"Cascadia Code","JetBrains Mono",Consolas,Menlo,monospace;
  --r:12px;
}
:root[data-theme=dark]{
  --bg:#0b1430; --card:#121d42; --ink:#e9edf8; --muted:#9aa7c9; --line:#26346a; --soft:#18255a;
  --accent:#7ea2f0; --hot:#ff5d83; --good:#46c98d; --warn:#f0b04a;
  --c1:#7ea2f0; --c2:#ff5d83; --c3:#46c98d; --c4:#f0b04a; --c5:#b99af0; --c6:#4fd0df;
  --si:#6b7aa0; --mask:#0a0f1e; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.15;letter-spacing:-.01em}
code,.mono{font-family:var(--mono);font-size:.92em}
sub,sup{line-height:0}
button{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:.4em;padding:.5em .95em;border-radius:9px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:600;font-size:.9rem;transition:.15s}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.hot{background:var(--hot);border-color:var(--hot);color:#fff}
.btn.sm{padding:.3em .65em;font-size:.8rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.chip{display:inline-block;padding:.12em .6em;border-radius:99px;background:var(--soft);font-size:.78rem;font-weight:600;color:var(--muted)}
.chip.hot{background:var(--hot);color:#fff}.chip.blue{background:var(--blue);color:#fff}

/* ---------- brand bar ---------- */
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{width:44px;height:44px}
.brand b{display:block;font-size:.95rem;letter-spacing:.01em}
.brand span{display:block;font-size:.74rem;color:var(--muted)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.2rem;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar nav{display:flex;gap:.3rem;flex-wrap:wrap}
.topbar nav a{padding:.4em .8em;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.88rem}
.topbar nav a:hover,.topbar nav a.on{background:var(--soft);color:var(--accent)}

/* ---------- widget frame ---------- */
.wg{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:14px;width:100%;height:100%;min-height:0;align-items:stretch}
.wg.wide-c{grid-template-columns:minmax(250px,340px) 1fr}
.wg.stack{grid-template-columns:1fr}
.wg-ctl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.wg-view{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;position:relative}
.cvw{position:relative;flex:1 1 0;min-height:120px;min-width:0}
.cvw>canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.wg-view svg.fill{width:100%;flex:1 1 0;min-height:0;display:block}
.wg h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:2px 0 0}
.ctl{display:flex;flex-direction:column;gap:3px}
.ctl label{font-size:.82rem;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.ctl label output{font-family:var(--mono);color:var(--hot);font-weight:600}
.ctl input[type=range]{width:100%;accent-color:var(--accent)}
.ctl select,.ctl input[type=number],.ctl input[type=text]{width:100%;padding:.4em .55em;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:.88rem}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{flex:1;padding:.38em .5em;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-weight:600;font-size:.8rem;white-space:nowrap}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.readout.one{grid-template-columns:1fr}
.kv{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:5px 9px}
.kv small{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.kv b{font-family:var(--mono);font-size:1rem}
.note{font-size:.8rem;color:var(--muted);line-height:1.4}
.note b{color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.76rem;padding:0 6px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;padding:3px 8px;border-radius:6px;font-size:.75rem;white-space:nowrap;z-index:5}
.callout{border-left:4px solid var(--hot);background:var(--soft);padding:.6em .9em;border-radius:0 9px 9px 0;font-size:.9rem}
.callout.blue{border-color:var(--blue)}
.eq{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.15em}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .2em;font-size:.92em}
.fr>span:first-child{border-bottom:1.5px solid currentColor;padding:0 .25em}
.fr>span:last-child{padding:0 .25em}
@media (max-width:820px){.wg,.wg.wide-c{grid-template-columns:1fr}}

/* ---------- hub / syllabus pages ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:1.4rem 1.2rem 4rem}
.hero{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;background:linear-gradient(120deg,var(--navy),#1b2f66 60%,#2f529e);color:#fff;border-radius:18px;padding:1.8rem 2rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero img{width:130px;height:130px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.hero h1{font-size:clamp(1.5rem,3vw,2.3rem)}
.hero p{margin:.2rem 0;color:#cfd8f3}
.hero .chip{background:rgba(255,255,255,.14);color:#fff}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.card h3{font-size:1.05rem}
.card.link{text-decoration:none;color:inherit;display:block;transition:.15s}
.card.link:hover{transform:translateY(-3px);border-color:var(--accent)}
.card .ico{font-size:1.7rem}
.sec-title{font-size:1.3rem;margin:2rem 0 .8rem;display:flex;align-items:center;gap:.6rem}
.sec-title:after{content:"";flex:1;height:1px;background:var(--line)}
.wk{display:grid;grid-template-columns:70px 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:10px;box-shadow:var(--shadow)}
.wk .n{background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;line-height:1}
.wk .n small{font-size:.62rem;font-weight:600;letter-spacing:.1em;opacity:.8}
.wk.circ .n{background:var(--crimson)}
.wk .b{padding:.7rem 1rem}
.wk .b h3{font-size:1.02rem;margin:0 0 .15rem}
.wk .b p{margin:.1rem 0;font-size:.88rem;color:var(--muted)}
.wk .row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.sess{margin-top:.55rem;padding:.5rem .7rem;border-radius:9px;background:var(--soft);font-size:.86rem}
.sess b{color:var(--crimson)}
.tag{font-size:.7rem;font-weight:700;padding:.1em .55em;border-radius:6px;background:var(--soft);color:var(--blue)}
.tag.red{background:#fde3ea;color:var(--crimson-d)}
:root[data-theme=dark] .tag.red{background:#4a1a2b;color:#ff9bb3}
table.t{border-collapse:collapse;width:100%;font-size:.88rem}
table.t th,table.t td{border:1px solid var(--line);padding:.4em .6em;text-align:left}
table.t th{background:var(--soft)}
footer.site{margin-top:3rem;color:var(--muted);font-size:.8rem;text-align:center}

/* ---------- widget gallery ---------- */
.gal-filter{display:flex;gap:6px;flex-wrap:wrap;margin:.6rem 0 1rem}
.gal-card{cursor:pointer}
.gal-card h3{margin-bottom:.2rem}
.gal-card p{margin:0;color:var(--muted);font-size:.85rem}
.modal{position:fixed;inset:0;background:rgba(7,12,30,.7);z-index:50;display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
.modal .box{background:var(--bg);width:min(1300px,96vw);height:min(860px,94vh);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal .box header{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.modal .box .body{flex:1;min-height:0}