/* ==================================================================== WellProd(TM) — shared TOPIC page stylesheet (topic-template.css) -------------------------------------------------------------------- Use in every topic file: <- ONLY per-file colour change - To recolour a course everywhere: edit its html[data-course="NN"] line. - To fix or add a component: edit it here once; every topic updates. - Self-contained (no external fonts); serif falls back to Georgia. ==================================================================== */ :root{ --navy:#04182f;--navy-2:#062746;--blue:#2f6fe0;--blue-light:#6aa6ff; --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --sans:'Helvetica Neue',Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,Menlo,Monaco,"DejaVu Sans Mono","Liberation Mono",monospace; /* default course — used only if has no data-course attribute */ --c-dark:#13496b; --c-mid:#1d6fa5; --pri-700:var(--c-dark);--pri-600:var(--c-mid); --pri-500:color-mix(in srgb,var(--c-mid) 80%,#fff); --pri-400:color-mix(in srgb,var(--c-mid) 55%,#fff); --pri-bg:color-mix(in srgb,var(--c-mid) 8%,#fff); --pri-mid:color-mix(in srgb,var(--c-mid) 26%,#fff); --bg:#fff;--bg2:#f5f8fc; --bg3:color-mix(in srgb,var(--c-mid) 10%,#fff); --bg4:color-mix(in srgb,var(--c-mid) 20%,#fff); --bdr:#dde5ee;--bdr2:color-mix(in srgb,var(--c-mid) 32%,#fff); --text:#0a1c30;--text2:#33414f;--text3:#5d6e80; --green-600:#1f8f5f;--green-500:#28a06c;--green-700:#176f4a;--green-bg:#e7f4ee; --amber-600:#9a5b00;--amber-500:#b9760f;--amber-bg:#fff4e5; --red-500:#c2410c;--red-bg:#fdecea;--teal-500:#0e7490;--teal-bg:#e0f2fe; --grad:linear-gradient(135deg,var(--c-dark),var(--c-mid)); } /* ===== per-course palette (dashboard crest colours) — edit a line here to retheme that course everywhere ===== */ html[data-course="01"]{--c-dark:#13496b;--c-mid:#1d6fa5} html[data-course="02"]{--c-dark:#243a73;--c-mid:#3a55a8} html[data-course="03"]{--c-dark:#274060;--c-mid:#3a6088} html[data-course="04"]{--c-dark:#0f5b57;--c-mid:#188f84} html[data-course="05"]{--c-dark:#1f5e3a;--c-mid:#2f8f57} html[data-course="06"]{--c-dark:#34516a;--c-mid:#4f7a99} html[data-course="07"]{--c-dark:#8a5a12;--c-mid:#c08a2e} html[data-course="08"]{--c-dark:#a8590f;--c-mid:#e0892f} html[data-course="09"]{--c-dark:#5a2746;--c-mid:#8a3f6b} html[data-course="10"]{--c-dark:#2f3a45;--c-mid:#4a5b6b} html[data-course="11"]{--c-dark:#0d5b4e;--c-mid:#178f73} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:15px} body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.sh-t,.tn-title,.ic-tl,.cd h4,.acc-t,.sim-t,.qt{font-family:var(--serif)} /* TOP BAR — platform shell */ .topbar{height:54px;background:var(--navy);display:flex;align-items:center;gap:22px;padding:0 26px;position:sticky;top:0;z-index:100} .word{color:#fff;font-weight:800;letter-spacing:3px;font-size:15px;font-family:var(--sans)} .word sup{font-size:9px;font-weight:600;position:relative;top:-.7em} .tnav{display:flex;gap:3px} .tnav a{color:rgba(255,255,255,.78);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:7px 12px;border-radius:4px;text-decoration:none} .tnav a:hover{color:#fff} .tnav a.active{background:rgba(255,255,255,.12);color:#fff} .tuser{margin-left:auto;color:rgba(255,255,255,.82);font-size:13px;font-weight:600} .progress-top{height:3px;background:var(--bdr);position:sticky;top:54px;z-index:99} .progress-top .tn-pfill{height:100%} /* LAYOUT */ .layout{display:grid;grid-template-columns:256px 1fr;min-height:calc(100vh - 57px)} .topic-nav{background:var(--bg2);border-right:1px solid var(--bdr);display:flex;flex-direction:column;position:sticky;top:57px;height:calc(100vh - 57px);overflow-y:auto;padding:6px} .tn-header{padding:16px 12px 12px} .tn-bc{font-size:9px;color:var(--text3);letter-spacing:.12em;font-weight:800;text-transform:uppercase;margin-bottom:8px} .tn-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.3} .tn-sub{font-size:11.5px;color:var(--text3);margin-top:4px;line-height:1.4} .tn-sections{flex:1;padding:6px 0} .tn-heading{font-size:9px;font-weight:800;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px 6px} .tn-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;border-radius:8px;cursor:pointer;background:transparent;color:var(--text2);font-weight:600;font-size:12.5px;font-family:var(--sans);text-align:left;transition:background .15s;margin-bottom:1px;line-height:1.3} .tn-item:hover{background:#fff} .tn-item.active{background:var(--bg3);color:var(--pri-700);font-weight:700} .tn-num{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--bdr2);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--pri-700);background:#fff} .tn-item.active .tn-num{background:var(--pri-600);border-color:var(--pri-600);color:#fff} .tn-item.done .tn-num{background:var(--green-600);border-color:var(--green-600);color:#fff} .tn-icon{flex-shrink:0;width:18px;text-align:center;font-size:11px} .tn-progress{padding:14px 12px;border-top:1px solid var(--bdr);margin-top:4px} .tn-plabel{font-size:10px;color:var(--text3);margin-bottom:6px;font-weight:800;letter-spacing:.05em;text-transform:uppercase} .tn-pbar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden} .tn-pfill{height:100%;border-radius:3px;background:var(--grad);transition:width .4s} .tn-ptext{font-size:10.5px;color:var(--text3);margin-top:5px} /* ARTICLE */ .article{padding:30px 40px;max-width:840px;width:100%} .footer{width:100%;border-top:1px solid var(--bdr);background:var(--navy);padding:18px 28px;font-size:11px;color:rgba(255,255,255,.55)} .footer-inner{max-width:920px;margin:0 auto;text-align:center} .footer p{margin:3px 0} .a-bc{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:11.5px;color:var(--text3);flex-wrap:wrap} .a-bc a{color:var(--pri-600);text-decoration:none;font-weight:600} .a-bc a:hover{text-decoration:underline} .a-bc .sep{color:var(--bdr2)} /* HERO */ .sh{background:var(--grad);border-radius:14px;padding:28px 32px;margin-bottom:22px;position:relative;overflow:hidden;color:#fff} .sh::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.6),rgba(255,255,255,.3))} .sh::after{content:'';position:absolute;right:-40px;bottom:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);pointer-events:none} .sh-ey{font-size:9.5px;letter-spacing:.16em;font-weight:800;color:rgba(255,255,255,.78);margin-bottom:9px;text-transform:uppercase;position:relative} .sh-t{font-size:24px;font-weight:600;line-height:1.25;margin-bottom:8px;color:#fff;position:relative} .sh-l{font-size:14px;color:rgba(255,255,255,.88);line-height:1.7;position:relative;max-width:90ch} /* OBJECTIVE / TIME BAR */ .objbar{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--text3);margin:0 0 18px;padding:10px 0;border-bottom:1px solid var(--bdr)} .objbar b{color:var(--pri-700)} /* PROSE */ .prose{font-size:14.5px;line-height:1.8;color:var(--text);margin-bottom:20px} .prose p{margin-bottom:13px} .prose h3{font-size:18px;font-weight:600;color:var(--pri-700);margin:24px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--bdr)} /* INFO CARDS */ .ic{border:1px solid var(--bdr);border-radius:10px;padding:18px 22px;margin-bottom:16px;position:relative;border-top:3px solid var(--pri-600)} .ic.key{border-top-color:var(--pri-600)} .ic.warn{border-top-color:var(--amber-500)} .ic.ok{border-top-color:var(--green-600)} .ic.ex{border-top-color:var(--teal-500)} .ic.found{border-top-color:var(--pri-700);background:var(--pri-bg)} .ic.take{border-top-color:var(--green-600);background:var(--green-bg)} .ic-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap} .ic-tag{font-size:9px;padding:3px 9px;border-radius:5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .ic-tag.key{background:var(--bg3);color:var(--pri-700)} .ic-tag.warn{background:var(--amber-bg);color:var(--amber-600)} .ic-tag.ok{background:var(--green-bg);color:var(--green-600)} .ic-tag.ex{background:var(--teal-bg);color:var(--teal-500)} .ic-tag.found{background:#fff;color:var(--pri-700)} .ic-tag.take{background:#fff;color:var(--green-600)} .ic-tl{font-size:14px;font-weight:600;color:var(--text)} .ic-bd{font-size:13px;line-height:1.65;color:var(--text2)} .ic-bd strong{color:var(--text)} /* FORMULA / WORKED */ .fm{font-family:var(--mono);background:var(--bg3);border:1px solid var(--bdr2);padding:8px 14px;border-radius:6px;margin:8px 0;font-size:12.5px;display:inline-block;color:var(--pri-700)} .wk{font-family:var(--mono);font-size:11.5px;background:var(--bg2);border:1px solid var(--bdr);border-left:3px solid var(--pri-600);padding:14px 18px;border-radius:8px;margin:10px 0;line-height:1.85;white-space:pre-wrap;color:var(--text)} /* VIDEO */ .vc{background:var(--grad);border-radius:10px;padding:22px 26px;margin-bottom:16px;color:#fff;position:relative;overflow:hidden} .vc::after{content:'';position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%)} .vc-r{display:flex;align-items:center;gap:12px;margin-bottom:8px;position:relative} .vc-p{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;cursor:pointer} .vc-t{font-weight:700;font-size:13.5px;font-family:var(--sans)} .vc-d{font-size:10px;opacity:.7;font-family:var(--mono);margin-top:2px} .vc-desc{font-size:12px;line-height:1.55;opacity:.85;position:relative} .vc video{border-radius:8px;max-width:100%} /* ACCORDION */ .acc{border:1px solid var(--bdr);border-radius:10px;margin-bottom:10px;overflow:hidden} .acc-t{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;border:none;cursor:pointer;background:var(--bg);font-family:var(--serif);font-size:14px;font-weight:600;color:var(--text);text-align:left;transition:background .15s} .acc-t:hover{background:var(--bg2)} .acc-t.open{background:var(--bg3)} .acc-t .ch{font-size:11px;color:var(--pri-600);transition:transform .2s;font-family:var(--sans)} .acc-t.open .ch{transform:rotate(90deg)} .acc-b{padding:14px 18px;font-size:13px;line-height:1.7;color:var(--text2);border-top:1px solid var(--bdr);display:none} .acc-b.show{display:block} .acc-b p{margin-bottom:10px} .acc-b strong{color:var(--text)} /* CARD GRIDS */ .cg{display:grid;gap:14px;margin-bottom:20px} .cg.c2{grid-template-columns:1fr 1fr} .cg.c3{grid-template-columns:1fr 1fr 1fr} .cd{background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:18px 20px;position:relative;transition:all .15s} .cd:hover{border-color:var(--bdr2);box-shadow:0 6px 18px rgba(4,24,47,.08)} .cd h4{font-size:14px;font-weight:600;margin-bottom:8px;line-height:1.3;color:var(--text)} .cd p{font-size:12px;line-height:1.55;color:var(--text3);margin:0} /* DATA TABLE */ .dtable{width:100%;border-collapse:collapse;margin:12px 0 16px;font-size:12px} .dtable th{background:var(--bg3);color:var(--pri-700);font-weight:700;padding:8px 12px;text-align:left;border:1px solid var(--bdr);font-size:11px;letter-spacing:.03em} .dtable td{padding:8px 12px;border:1px solid var(--bdr);color:var(--text2)} .dtable tr:hover td{background:var(--bg2)} .dtable .hl{color:var(--pri-600);font-weight:700} .dtable .gn{color:var(--green-600);font-weight:700} /* SIMULATION */ .sim{background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;padding:20px 24px;margin-bottom:20px} .sim-t{font-size:14px;font-weight:600;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px} .sim-tag{font-size:9px;padding:3px 9px;border-radius:5px;background:var(--bg3);color:var(--pri-700);font-weight:800;font-family:var(--sans);text-transform:uppercase} .sim-bd{display:flex;gap:20px;flex-wrap:wrap} .sim-bd canvas{background:var(--bg);border-radius:8px;border:1px solid var(--bdr)} .sim-c{flex:1;min-width:220px} .sim-c label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px} .sim-c label span{color:var(--pri-600);font-weight:700} .sim-c input[type=range]{width:100%;margin-bottom:14px;accent-color:var(--pri-600)} .sim-n{font-size:11.5px;color:var(--text3);line-height:1.6} .sim-result{margin-top:12px;padding:14px 18px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;font-family:var(--mono);font-size:13px;color:var(--text);line-height:1.7} .sim-result .big{font-size:24px;font-weight:800;color:var(--pri-600)} /* QUIZ */ .qq{margin-bottom:22px} .qq .qt{font-weight:600;font-size:15px;color:var(--text);margin-bottom:10px;line-height:1.45} .qo{display:block;width:100%;text-align:left;padding:10px 14px;margin-bottom:5px;border-radius:7px;border:1px solid var(--bdr);background:var(--bg);cursor:pointer;font-size:12.5px;font-family:var(--sans);color:var(--text);transition:all .15s} .qo:hover:not(.ans){border-color:var(--pri-500);background:var(--pri-bg)} .qo.ok{background:var(--green-bg);border-color:var(--green-600);color:var(--green-600)} .qo.no{background:var(--red-bg);border-color:var(--red-500);color:var(--red-500)} .qo.ans{cursor:default} .qo .ol{font-weight:700;margin-right:6px} .qx{margin-top:8px;padding:10px 14px;background:var(--bg2);border:1px solid var(--bdr);border-radius:7px;font-size:12px;line-height:1.6;color:var(--text2);display:none} .qx.show{display:block} /* NAV BUTTONS */ .af{display:flex;align-items:center;justify-content:space-between;margin-top:28px;padding-top:18px;border-top:1px solid var(--bdr)} .btn{padding:10px 20px;border-radius:7px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;border:1px solid;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px} .btn-o{background:var(--bg);color:var(--text2);border-color:var(--bdr)} .btn-o:hover{border-color:var(--bdr2);background:var(--bg2)} .btn-o:disabled{opacity:.35;cursor:default} .btn-g{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 3px 12px color-mix(in srgb,var(--c-mid) 40%,transparent)} .btn-g:hover{filter:brightness(1.06)} .btn-g:disabled{opacity:.4;cursor:default;box-shadow:none} .btn-g a,.btn-o a{color:inherit} /* COURSE BADGE */ .course-badge{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--bdr);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--text3);font-weight:600;margin-bottom:16px} .cb-num{background:var(--pri-600);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:800} /* SVG */ .svg-wrap{background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:16px;margin:14px 0;overflow:hidden} .svg-wrap svg{max-width:100%;display:block;margin:0 auto} .svg-cap{font-size:11px;color:var(--text3);text-align:center;margin-top:8px;font-style:italic} /* SECTION PAGE */ .pg{display:none} .pg:first-of-type,.pg.show{display:block} @media(max-width:880px){ .layout{grid-template-columns:1fr} .topic-nav{position:static;height:auto;border-right:none;border-bottom:1px solid var(--bdr)} .tnav{display:none} .article{padding:24px 20px} .cg.c2,.cg.c3{grid-template-columns:1fr} } /* ---- extra components used by this file (re-themed to course tokens) ---- */ .fm-block{font-family:var(--mono);background:var(--bg2);border:1px solid var(--bdr);border-left:3px solid var(--pri-600);padding:14px 18px;border-radius:8px;margin:10px 0;font-size:12px;line-height:1.85;white-space:pre-wrap;color:var(--text)} .svg-wrap{text-align:center} .svg-caption{font-size:11px;color:var(--text3);text-align:center;margin-top:6px;font-style:italic} .acc-b .fm{font-size:11.5px} .step-row{display:flex;align-items:flex-start;margin-bottom:10px;font-size:13px;line-height:1.6;color:var(--text2)} .step-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;font-size:11px;font-weight:800;margin-right:10px;flex-shrink:0} .gr-badge{display:inline-block;background:linear-gradient(135deg,#b8860b,#daa520);color:#fff;font-size:9px;font-weight:800;padding:2px 8px;border-radius:10px;margin-right:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em} .dtable .am{color:var(--amber-600);font-weight:700} .dtable .rd{color:var(--red-500);font-weight:700} .hl{color:var(--pri-600);font-weight:700} .gn{color:var(--green-600);font-weight:700} .am{color:var(--amber-600);font-weight:700} .rd{color:var(--red-500);font-weight:700} .ol{font-weight:700;margin-right:6px} /* ==================================================================== COMPONENT LIBRARY — union of components used across topic files. Copied from the source files (already token-based) so they retheme per course automatically. Add new components here once. ==================================================================== */ /* step lists (several naming conventions across courses) */ .steplist{counter-reset:step;margin-bottom:20px} .steps{margin-bottom:16px} .step{display:flex;gap:14px;margin-bottom:14px;align-items:flex-start} .step-item{display:flex;gap:14px;margin-bottom:12px} .step-list{counter-reset:step;margin:12px 0 16px} .step-num{counter-increment:step;content:counter(step);min-width:28px;height:28px;border-radius:50%;background:var(--pri-600);color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .step-num.green{background:var(--green-600)} .step-bd{font-size:12.5px;line-height:1.65;color:var(--text2);padding-top:3px} .step-bd strong{color:var(--text)} .step-body{font-size:12.5px;line-height:1.65;color:var(--text2);padding-top:4px} .step-body strong{color:var(--text)} .step-seq{counter-reset:step;list-style:none;padding:0;margin:14px 0 20px} .step-seq li{counter-increment:step;display:flex;gap:14px;margin-bottom:14px;align-items:flex-start} .step-seq li::before{content:counter(step);flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--pri-600),var(--pri-700));color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px} .step-seq li strong{color:var(--text);display:block;margin-bottom:3px;font-size:13px} .step-seq li p{font-size:12.5px;color:var(--text2);line-height:1.55;margin:0} /* callouts / highlight boxes */ .callout{border-left:4px solid var(--pri-600);background:var(--pri-bg);padding:14px 18px;border-radius:0 8px 8px 0;margin-bottom:16px;font-size:12.5px;line-height:1.65;color:var(--text2)} .callout.amber{border-left-color:var(--amber-500);background:var(--amber-bg)} .callout.green{border-left-color:var(--green-500);background:var(--green-bg)} .callout strong{color:var(--text)} .hbox{background:var(--bg3);border-left:4px solid var(--pri-600);padding:14px 18px;border-radius:0 8px 8px 0;margin-bottom:16px;font-size:12.5px;line-height:1.65;color:var(--text2)} .hbox strong{color:var(--pri-700)} .dbox{border:1px solid var(--bdr);border-radius:10px;overflow:hidden;margin-bottom:16px} .dbox-hd{background:var(--bg3);padding:8px 14px;font-size:11px;font-weight:700;color:var(--green-700);letter-spacing:.04em;border-bottom:1px solid var(--bdr)} .dbox-bd{padding:12px 14px;background:var(--bg)} /* figure / diagram wrappers + captions */ .diagram-wrap{background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;padding:16px;margin-bottom:16px;text-align:center} .diagram-caption{font-size:11px;color:var(--text3);margin-top:10px;font-style:italic} .diag{background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;padding:20px;margin-bottom:20px;text-align:center} .diag svg{max-width:100%} .diag-t{font-size:12px;font-weight:700;color:var(--text3);margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em} .diag-cap{font-size:11px;color:var(--text3);font-style:italic;margin-top:8px} .diag-wrap{background:var(--bg2);border:1px solid var(--bdr);border-radius:10px;padding:16px;margin-bottom:16px;text-align:center} .diag-wrap figcaption{font-size:11px;color:var(--text3);margin-top:10px;font-style:italic} .illus{background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;padding:18px;margin-bottom:16px} .illus-cap{font-size:11px;color:var(--text3);text-align:center;margin-top:10px;font-style:italic} .svg-fig{background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;padding:18px;margin:14px 0;overflow-x:auto;text-align:center} .svg-fig svg{max-width:100%;height:auto} .svg-fig figcaption{font-size:11px;color:var(--text3);margin-top:8px;font-style:italic} /* pills */ .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .pill{padding:5px 13px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid var(--bdr2)} .pill.g{background:var(--green-bg);color:var(--green-600);border-color:var(--bdr2)} .pill.a{background:var(--amber-bg);color:var(--amber-600);border-color:#e6c97a} .pill.t{background:var(--teal-bg);color:var(--teal-500);border-color:#93d9e8} /* timeline */ .timeline{position:relative;padding-left:24px;margin:16px 0 20px} .timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--teal-500),var(--green-500));border-radius:1px} .tl-item{position:relative;margin-bottom:18px} .tl-dot{position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg)} .tl-dot.teal{background:var(--teal-500)} .tl-dot.green{background:var(--green-500)} .tl-dot.amber{background:var(--amber-500)} .tl-dot.deep{background:var(--green-700)} .tl-label{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px} .tl-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px} .tl-desc{font-size:12px;color:var(--text2);line-height:1.55} /* gauges */ .gauge-row{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0} .gauge{flex:1;min-width:140px;background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;text-align:center} .gauge-lbl{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px} .gauge-val{font-size:26px;font-weight:800;color:var(--pri-600);font-family:var(--mono);line-height:1} .gauge-unit{font-size:11px;color:var(--text3);margin-top:4px} .gauge-bar{height:6px;border-radius:3px;background:var(--bg3);margin-top:8px;overflow:hidden} .gauge-fill{height:100%;border-radius:3px;transition:width .4s} /* phase cards */ .phase-card{border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;margin-bottom:10px} .phase-head{display:flex;align-items:center;gap:10px;margin-bottom:8px} .phase-body{font-size:12px;color:var(--text2);line-height:1.6} .phase-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0} .phase-title{font-size:13px;font-weight:700;color:var(--text)} .score-box{border-radius:10px;padding:14px 20px;text-align:center;font-weight:700;font-size:14px;margin-top:16px;display:none} /* misc */ .page-shell{flex:1;display:flex;flex-direction:column;min-width:0} .sim-btn{margin-top:10px;padding:8px 20px;border-radius:7px;border:none;background:var(--teal-500);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:background .15s;display:block} .sim-btn:hover{background:var(--green-500)} .dtable .highlight{color:var(--pri-600);font-weight:700} .highlight{color:var(--pri-600);font-weight:700} .green{color:var(--green-600)} .amber{color:var(--amber-600)} .teal{color:var(--teal-500)} .deep{color:var(--green-700)} .dmg-layer{display:flex;align-items:stretch;gap:0;margin:16px 0;border-radius:10px;overflow:hidden;border:1px solid var(--bdr);} .dmg-zone{flex:1;padding:14px 12px;text-align:center;font-size:11px;line-height:1.5;} .dmg-zone strong{display:block;font-size:12px;margin-bottom:4px;} .eq-box{background:var(--bg);border:2px solid var(--pri-600);border-radius:12px;padding:20px 24px;margin-bottom:16px;} .eq-main{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--pri-700);text-align:center;padding:10px 0;} .eq-row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;} .eq-term{flex:1;min-width:155px;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;padding:12px 14px;} .eq-term-name{font-size:10px;font-weight:800;color:var(--pri-600);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;} .eq-term-val{font-family:var(--mono);font-size:13px;color:var(--text);margin-bottom:6px;} .eq-term-desc{font-size:11px;color:var(--text3);line-height:1.5;} .step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px;} .step-card{background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:16px;position:relative;padding-left:52px;} .step-num{position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--pri-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;} .step-card h4{font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--text);} .step-card p{font-size:11.5px;color:var(--text3);line-height:1.5;margin:0;} .data-ref{background:var(--bg3);border:1px solid var(--bdr2);border-radius:8px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--text2);line-height:1.7;} .data-ref strong{color:var(--pri-700);} .skin-audit{background:var(--bg);border:2px solid var(--pri-600);border-radius:12px;overflow:hidden;margin-bottom:18px;} .sa-header{background:var(--pri-700);padding:12px 18px;color:#fff;font-weight:700;font-size:13px;display:flex;justify-content:space-between;} .sa-row{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid var(--bdr);font-size:12.5px;} .sa-row:last-child{border-bottom:none;} .sa-row.total{background:var(--bg3);font-weight:700;} .sa-label{color:var(--text2);} .sa-val{font-family:var(--mono);font-weight:700;} .sa-val.red{color:var(--red-500);} .sa-val.grn{color:var(--green-600);} .sa-val.amb{color:var(--amber-600);} .sa-val.pri{color:var(--pri-600);} .fe-band{display:flex;height:36px;border-radius:8px;overflow:hidden;margin:12px 0;border:1px solid var(--bdr);} .fe-seg{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;transition:flex 0.3s;} /* FE spectrum bar */ .fe-bar{display:flex;border-radius:8px;overflow:hidden;height:28px;margin:12px 0;} .fe-seg{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;} /* Timeline bar */ .timeline:has(.tl-seg){display:flex;align-items:stretch;gap:0;margin:16px 0 20px;overflow-x:auto;} .tl-seg{flex:1;min-width:120px;padding:14px 12px;border:1px solid var(--bdr);position:relative;font-size:11px;} .tl-seg:not(:last-child){border-right:none;} .tl-seg:first-child{border-radius:10px 0 0 10px;} .tl-seg:last-child{border-radius:0 10px 10px 0;} .tl-label{font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;} .tl-val{font-size:18px;font-weight:800;margin-bottom:4px;} .tl-note{font-size:10px;color:var(--text3);line-height:1.4;} /* Callout highlight strip */ .strip { border-left: 4px solid var(--pri-600); padding: 10px 16px; background: var(--pri-bg); border-radius: 0 8px 8px 0; margin: 12px 0; font-size: 12.5px; color: var(--text2); line-height: 1.65; } .strip.amber { border-color: var(--amber-500); background: var(--amber-bg); } .strip.green { border-color: var(--green-500); background: var(--green-bg); } .strip.teal { border-color: var(--teal-500); background: var(--teal-bg); } .cg{display:grid;gap:14px;margin-bottom:20px;} .cg.c2{grid-template-columns:1fr 1fr;} .cg.c3{grid-template-columns:1fr 1fr 1fr;} .cg.c4{grid-template-columns:1fr 1fr 1fr 1fr;} .cd{background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:18px 20px;position:relative;transition:all 0.15s;} .cd:hover{border-color:var(--bdr2);box-shadow:0 3px 12px rgba(0,0,0,0.06);} .cd h4{font-size:13px;font-weight:700;margin-bottom:8px;line-height:1.3;} .cd p{font-size:12px;line-height:1.55;color:var(--text3);margin:0;} /* Corr card with coloured left border */ .corr-card{border:1px solid var(--bdr);border-radius:10px;padding:18px 22px;margin-bottom:16px;position:relative;border-left:5px solid var(--pri-600);} .corr-card.hb{border-left-color:#1D5BA0;} .corr-card.dr{border-left-color:#0891B2;} .corr-card.bb{border-left-color:#D99214;} .corr-card.an{border-left-color:#0E8A64;} .corr-card.gr{border-left-color:#D64545;} .corr-card.pe{border-left-color:#7C3AED;} .corr-card.fb{border-left-color:#7A8599;} .corr-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;} .corr-name{font-size:15px;font-weight:800;color:var(--text);} .corr-year{font-size:10px;color:var(--text3);font-family:var(--mono);} .corr-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;} .badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;} .badge-g{background:var(--green-bg);color:var(--green-600);} .badge-a{background:var(--amber-bg);color:var(--amber-600);} .badge-r{background:var(--red-bg);color:var(--red-500);} .badge-b{background:var(--pri-bg);color:var(--pri-600);} .badge-t{background:var(--teal-bg);color:var(--teal-500);} .corr-body{font-size:12.5px;line-height:1.65;color:var(--text2);} .corr-body strong{color:var(--text);} .design-step{background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;padding:14px 18px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px} .ds-num{min-width:28px;height:28px;border-radius:50%;background:var(--pri-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:1px} .ds-body{flex:1} .ds-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px} .ds-desc{font-size:12px;color:var(--text2);line-height:1.6} .dcard{display:flex;align-items:flex-start;gap:12px;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;padding:14px 18px;margin-bottom:8px} .dcard-num{min-width:28px;height:28px;border-radius:50%;background:var(--pri-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:1px} .dcard-body .dt{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px} .dcard-body .dd{font-size:12px;color:var(--text2);line-height:1.6} /* ─── PCP-specific: Elastomer comparison strips ─── */ .elas-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--bdr); } .elas-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; } .elas-name { font-size: 12px; font-weight: 700; color: var(--text); min-width: 80px; } .elas-props { font-size: 12px; color: var(--text2); flex: 1; } .elas-limits { font-size: 11px; color: var(--text3); min-width: 130px; text-align: right; } /* ─── NODE POINT LABELS ─── */ .node-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 20px; } .node-card { border: 1px solid var(--bdr); border-radius: 8px; padding: 13px 16px; } .node-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 5px; } .node-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .node-desc { font-size: 11.5px; color: var(--text2); line-height: 1.5; } /* ─── STEP LIST ─── */ .steps { counter-reset: step; list-style: none; margin: 0 0 16px; } .steps li { counter-increment: step; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--bg3); font-size: 13px; line-height: 1.6; color: var(--text2); } .steps li::before { content: counter(step); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--pri-bg); color: var(--pri-600); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .steps li strong { color: var(--text); } .steps li:last-child { border-bottom: none; } /* Life-cycle timeline */ .timeline { position: relative; padding-left: 28px; margin: 16px 0 20px; } .timeline::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--pri-400), var(--teal-500)); } .tl-item { position: relative; margin-bottom: 20px; } .tl-item::before { content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--pri-500); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--pri-500); } .tl-title { font-size: 13px; font-weight: 700; color: var(--pri-700); margin-bottom: 5px; } .tl-desc { font-size: 12px; color: var(--text2); line-height: 1.6; } /* Production forecast timeline */ .forecast-timeline{position:relative;margin:16px 0 24px;} .ft-track{height:8px;background:linear-gradient(to right,var(--green-500),var(--amber-500),var(--red-500));border-radius:4px;margin-bottom:12px;} .ft-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .ft-phase{padding:12px 14px;border-radius:8px;border:1px solid var(--bdr);} .ft-phase-label{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:5px;} .ft-phase-title{font-size:12px;font-weight:700;margin-bottom:4px;} .ft-phase-desc{font-size:11px;color:var(--text3);line-height:1.5;} .ft-phase.build{border-color:rgba(14,138,100,0.3);background:var(--green-bg);} .ft-phase.plateau{border-color:rgba(29,91,160,0.2);background:var(--pri-bg);} .ft-phase.decline{border-color:rgba(217,146,20,0.3);background:var(--amber-bg);} .ft-phase.late{border-color:rgba(214,69,69,0.2);background:var(--red-bg);} /* Decision matrix */ .dm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 14px 0 20px; } .dm-hdr { background: var(--pri-700); color: #fff; padding: 8px 10px; font-size: 11px; font-weight: 700; text-align: center; } .dm-row-hdr { background: var(--bg3); padding: 8px 10px; font-size: 11px; font-weight: 700; color: var(--pri-700); display: flex; align-items: center; } .dm-cell { padding: 8px 10px; font-size: 11px; text-align: center; border: 1px solid var(--bdr); } .dm-g { background: var(--green-bg); color: var(--green-600); font-weight: 700; } .dm-a { background: var(--amber-bg); color: var(--amber-600); font-weight: 700; } .dm-r { background: var(--red-bg); color: var(--red-500); font-weight: 700; } /* SENSITIVITY TORNADO */ .tornado-bar-wrap{margin:6px 0;} .tornado-label{font-size:11px;font-weight:600;color:var(--text2);margin-bottom:3px;} .tornado-track{height:22px;background:var(--bg3);border-radius:4px;position:relative;overflow:hidden;} .tornado-pos{position:absolute;top:0;height:100%;background:var(--green-500);border-radius:0 4px 4px 0;display:flex;align-items:center;padding-left:6px;} .tornado-neg{position:absolute;top:0;height:100%;background:var(--red-500);border-radius:4px 0 0 4px;right:50%;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;} .tornado-val{font-size:9px;font-weight:700;color:#fff;} .tornado-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--bdr2);} /* AL METHOD CARDS */ .al-card{border:1px solid var(--bdr);border-radius:12px;padding:0;overflow:hidden;margin-bottom:16px;} .al-card-hdr{padding:16px 20px;display:flex;align-items:center;gap:14px;} .al-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;} .al-card-title{font-size:14px;font-weight:700;} .al-card-sub{font-size:11px;color:var(--text3);margin-top:2px;} .al-card-body{padding:16px 20px;border-top:1px solid var(--bdr);display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--bg2);} .al-card-body.full{grid-template-columns:1fr;} .al-stat{font-size:11.5px;color:var(--text2);line-height:1.55;} .al-stat strong{color:var(--text);display:block;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:2px;} .al-stat-desc{font-size:11px;color:var(--text3);line-height:1.55;} /* SELECTION MATRIX */ .sel-grid{display:grid;gap:3px;margin:14px 0 20px;overflow-x:auto;} .sel-hdr{background:var(--pri-700);color:#fff;padding:9px 12px;font-size:11px;font-weight:700;text-align:center;} .sel-row-hdr{background:var(--bg3);padding:9px 12px;font-size:11.5px;font-weight:700;color:var(--pri-700);} .sel-cell{padding:9px 12px;font-size:11.5px;border:1px solid var(--bdr);text-align:center;} .sg{background:#E8F5EF;color:var(--green-600);font-weight:700;} .sa{background:var(--amber-bg);color:var(--amber-600);font-weight:700;} .sr{background:var(--red-bg);color:var(--red-500);font-weight:700;} .sn{background:var(--bg3);color:var(--text3);font-weight:600;}