/*
 * Components compartits de les sessions.
 *
 * Regles que eren idèntiques a diverses sessions (abans repetides al <style>
 * inline de cadascuna). S'han extret tal qual, sense canviar-ne l'aspecte.
 * Es carrega ABANS del <style> de cada sessió i de lesson-ui.css, de manera
 * que l'ordre de la cascada és el mateix que abans.
 */

:root{--bg:#f3f5f8;--paper:#ffffff;--card:#f3f5f8;--ink:#15161a;--soft:#59616f;--terra:#1a5fd2;--deep:#1758c8;--line:#dfe4ec;--gold:#b56b14;--moss:#147049;--shadow:0 26px 60px -42px rgba(70,45,20,.55)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding:46px 22px 90px}
.eyebrow{font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:12.5px;color:var(--deep);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--terra)}
h1 em{color:var(--terra);font-style:normal}
.goldbar{display:flex;gap:12px;align-items:flex-start;background:#fff6e6;border:1.5px solid var(--gold);border-radius:8px;padding:15px 18px;margin:30px 0 8px;font-size:16px}
.goldbar b{color:var(--deep)}
.goldbar .k{font-size:22px;line-height:1}
.sectit::after{content:"";flex:1;height:1px;background:var(--line)}
.muted{color:var(--soft);font-size:16px}
.real{background:#f3f1e4;border-left:3px solid var(--moss);border-radius:0 10px 10px 0;padding:10px 14px;font-size:16px}
.netbadge{display:inline-flex;align-items:center;gap:8px;background:#eef4ec;border:1px solid #cfdcc8;color:var(--moss);border-radius:6px;padding:6px 14px;font-size:14px;font-weight:600;margin:4px 0}
h5{font-family:"IBM Plex Serif";font-weight:600;font-size:16px;margin:22px 0 8px;color:var(--deep)}
kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-family:"IBM Plex Serif";font-size:13.5px;font-weight:600;white-space:nowrap}
ol.steplist{margin:10px 0;padding-left:0;counter-reset:s;list-style:none}
ol.steplist li{position:relative;padding:7px 0 7px 40px;border-bottom:1px dashed var(--line);font-size:16px}
ol.steplist li:last-child{border-bottom:none}
ol.steplist li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:7px;width:26px;height:26px;background:#f1e6d4;color:var(--deep);border-radius:50%;display:grid;place-items:center;font-family:"IBM Plex Serif";font-weight:600;font-size:13px}
.next,.done-btn{margin-top:18px;border:none;cursor:pointer;border-radius:6px;font-weight:600;font-size:16px;padding:11px 22px}
.next{background:#f1e6d4;color:var(--deep)}
.next:hover{background:#e8d8bf}
.done-btn{background:var(--moss);color:#fff;font-size:17px;padding:13px 26px}
.done-btn:hover{filter:brightness(1.06)}
.outro h2{font-weight:600;font-size:30px;letter-spacing:-.01em;margin:0 0 6px}
.check{list-style:none;padding:0;margin:14px 0}
.check li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:16.5px;cursor:pointer}
.check li:last-child{border-bottom:none}
.check .box{flex:none;width:24px;height:24px;border:2px solid var(--terra);border-radius:7px;display:grid;place-items:center;color:#fff;font-size:14px;transition:.15s}
.check li.on .box{background:var(--terra)}
.check li.on{color:var(--soft);text-decoration:line-through}
.takeaway{margin-top:18px;background:#2c2521;color:#f4ead8;border-radius:8px;padding:18px 22px;font-size:17px;font-style:italic}
.takeaway b{color:#e9a06e;font-style:normal}
footer{margin-top:40px;text-align:center;color:var(--soft);font-size:13.5px;letter-spacing:.04em}
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:8px;font-family:"IBM Plex Serif";font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:.3s;z-index:50;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* A mòbil, les rutes de menú dins <kbd> poden trencar línia (si no, surten de la pantalla). */
@media (max-width: 640px) {
  kbd { white-space: normal; }
}