/* Site chrome (landing, certificate screen, score page). Accessible; only bad.css is deliberately dated. */
:root { color-scheme: light; --bg:#f7f6f2; --ink:#1c2230; --muted:#505a70; --accent:#0b5c8a; --card:#fff; --line:#d8d6cf; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); }
.landing-root, .course-root.cert { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
.hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); margin:0; letter-spacing:-0.02em; }
.hero .tag { font-size:1.25rem; margin:.25rem 0; }
.hero .sub, .note { color:var(--muted); }
.cards { list-style:none; padding:0; display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card a:first-child { display:block; height:100%; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); }
.card a:first-child:hover, .card a:first-child:focus-visible { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.card strong { display:block; margin-bottom:4px; }
.card span { color:var(--muted); font-size:.9rem; }
.field-label { display:block; font-weight:600; margin: 12px 0 4px; }
input[type=text] { width:100%; padding:10px 12px; font:inherit; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); }
input[disabled] { opacity:.6; }
.site-foot { margin-top:32px; color:var(--muted); font-size:.85rem; }
.btn { display:inline-block; padding:10px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--card); color:var(--accent); font:inherit; font-weight:600; text-decoration:none; cursor:pointer; min-height:44px; }
.btn:hover { background:var(--accent); color:var(--bg); }
.btn.cta { background:var(--accent); color:var(--bg); padding:14px 20px; }
.btn:focus-visible, .linklike:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; }
.linklike { background:none; border:0; color:var(--accent); text-decoration:underline; font:inherit; cursor:pointer; padding:4px 0; }
.cert-canvas { width:100%; height:auto; border:1px solid var(--line); border-radius:6px; margin-top:16px; }
.cert-text { color:var(--muted); font-size:.9rem; }
.cert-text dt { font-weight:600; float:left; clear:left; margin-right:8px; }
.cert-text dd { margin:0 0 4px; }
.reveal { margin-top:28px; padding:16px; border:1px dashed var(--accent); border-radius:10px; }
.cert-status { min-height:1.5em; color:var(--muted); }
.share-h { margin:28px 0 4px; }
.post-box { width:100%; padding:10px 12px; font:inherit; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); resize:vertical; }
.card { display:flex; flex-direction:column; gap:6px; }
.card a:first-child { flex:1; }
.card-alt { font-size:.85rem; padding:2px 4px; }
.score-cta { margin-top:28px; padding:18px; border:2px solid var(--accent); border-radius:12px; background:var(--card); }
.score-cta h2 { margin-top:0; }
.work-panel { margin:28px 0; padding:16px 18px; border:2px solid #0b5c8a; border-radius:12px; background:#fff; color:#1c2230; }
.work-panel h2 { margin:.2em 0; font-size:1.3rem; }
.work-panel h3 { font-size:1.05rem; margin:.8em 0 .2em; }
.work-offer { background:#eef6fb; border-left:4px solid #0b5c8a; padding:6px 12px; }
.work-tools ul { margin:.2em 0; padding-left:1.2em; }
.site-foot p { margin:.2em 0; }
.fix-list { padding-left:1.3em; }
.fix-list li { margin:1em 0; }
.score-result { margin-top:24px; }
.card-alt { font-size:.85rem; color:#0b5c8a; font-weight:600; margin:0; padding:2px 4px; }
.privacy-notice { margin:0 0 24px; padding:14px 18px; border:1px solid #55607a; border-radius:8px; background:#fff; color:#1c2230; font-size:.95rem; }
.privacy-notice h2 { margin:.1em 0 .3em; font-size:1.1rem; }
.privacy-notice ul { margin:.4em 0; padding-left:1.2em; }
.privacy-notice li { margin:.25em 0; }
.privacy-status { margin:.4em 0 0; font-weight:600; }
.site-foot { margin-top:28px; color:var(--muted); font-size:.72rem; line-height:1.4; }
.site-foot p { margin:.3em 0; }
.site-foot .linklike { font-size:.72rem; min-height:0; padding:0; }
.strip { font-size:.9rem; color:var(--muted); margin:18px 0 0; }

/* Background: a faint spreadsheet full of errors (owner pick H, 2026-10-15; replaced the cubicle farm). */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Crect x='0' y='0' width='240' height='20' fill='%236f6c62' fill-opacity='0.04'/%3E%3Crect x='0' y='0' width='30' height='160' fill='%236f6c62' fill-opacity='0.04'/%3E%3Cg stroke='%236f6c62' stroke-opacity='0.17' stroke-width='1'%3E%3Cpath d='M0 20H240M0 40H240M0 60H240M0 80H240M0 100H240M0 120H240M0 140H240'/%3E%3Cpath d='M30 0V160M90 0V160M150 0V160M210 0V160'/%3E%3C/g%3E%3Crect x='150' y='80' width='60' height='20' fill='none' stroke='%236f6c62' stroke-opacity='0.35' stroke-width='1.6'/%3E%3Cg fill='%236f6c62' fill-opacity='0.26' font-family='Arial,sans-serif' font-size='11'%3E%3Ctext x='56' y='14'%3EA%3C/text%3E%3Ctext x='116' y='14'%3EB%3C/text%3E%3Ctext x='176' y='14'%3EC%3C/text%3E%3Ctext x='10' y='34'%3E1%3C/text%3E%3Ctext x='10' y='54'%3E2%3C/text%3E%3Ctext x='10' y='74'%3E3%3C/text%3E%3Ctext x='10' y='94'%3E4%3C/text%3E%3Ctext x='10' y='114'%3E5%3C/text%3E%3Ctext x='10' y='134'%3E6%3C/text%3E%3Ctext x='36' y='34'%3EQ1%3C/text%3E%3Ctext x='96' y='34'%3E12%3C/text%3E%3Ctext x='156' y='34'%3E4.2%3C/text%3E%3Ctext x='36' y='54'%3EQ2%3C/text%3E%3Ctext x='96' y='54'%3E%23REF%21%3C/text%3E%3Ctext x='156' y='54'%3E17%3C/text%3E%3Ctext x='36' y='74'%3EQ3%3C/text%3E%3Ctext x='96' y='74'%3E9%3C/text%3E%3Ctext x='156' y='74'%3E%23N/A%3C/text%3E%3Ctext x='36' y='94'%3ETotal%3C/text%3E%3Ctext x='96' y='94'%3E%3F%3F%3F%3C/text%3E%3Ctext x='156' y='94'%3E%23DIV/0%21%3C/text%3E%3Ctext x='36' y='114'%3EDave%3C/text%3E%3Ctext x='96' y='114'%3E3%3C/text%3E%3Ctext x='156' y='114'%3Ehmm%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 160px; }
.course-root { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Crect x='0' y='0' width='240' height='20' fill='%236f6c62' fill-opacity='0.07'/%3E%3Crect x='0' y='0' width='30' height='160' fill='%236f6c62' fill-opacity='0.07'/%3E%3Cg stroke='%236f6c62' stroke-opacity='0.3' stroke-width='1'%3E%3Cpath d='M0 20H240M0 40H240M0 60H240M0 80H240M0 100H240M0 120H240M0 140H240'/%3E%3Cpath d='M30 0V160M90 0V160M150 0V160M210 0V160'/%3E%3C/g%3E%3Crect x='150' y='80' width='60' height='20' fill='none' stroke='%236f6c62' stroke-opacity='0.48' stroke-width='1.6'/%3E%3Cg fill='%236f6c62' fill-opacity='0.42' font-family='Arial,sans-serif' font-size='11'%3E%3Ctext x='56' y='14'%3EA%3C/text%3E%3Ctext x='116' y='14'%3EB%3C/text%3E%3Ctext x='176' y='14'%3EC%3C/text%3E%3Ctext x='10' y='34'%3E1%3C/text%3E%3Ctext x='10' y='54'%3E2%3C/text%3E%3Ctext x='10' y='74'%3E3%3C/text%3E%3Ctext x='10' y='94'%3E4%3C/text%3E%3Ctext x='10' y='114'%3E5%3C/text%3E%3Ctext x='10' y='134'%3E6%3C/text%3E%3Ctext x='36' y='34'%3EQ1%3C/text%3E%3Ctext x='96' y='34'%3E12%3C/text%3E%3Ctext x='156' y='34'%3E4.2%3C/text%3E%3Ctext x='36' y='54'%3EQ2%3C/text%3E%3Ctext x='96' y='54'%3E%23REF%21%3C/text%3E%3Ctext x='156' y='54'%3E17%3C/text%3E%3Ctext x='36' y='74'%3EQ3%3C/text%3E%3Ctext x='96' y='74'%3E9%3C/text%3E%3Ctext x='156' y='74'%3E%23N/A%3C/text%3E%3Ctext x='36' y='94'%3ETotal%3C/text%3E%3Ctext x='96' y='94'%3E%3F%3F%3F%3C/text%3E%3Ctext x='156' y='94'%3E%23DIV/0%21%3C/text%3E%3Ctext x='36' y='114'%3EDave%3C/text%3E%3Ctext x='96' y='114'%3E3%3C/text%3E%3Ctext x='156' y='114'%3Ehmm%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 160px; }
.course-root:has(.cert-screen) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Crect x='0' y='0' width='240' height='20' fill='%236f6c62' fill-opacity='0.04'/%3E%3Crect x='0' y='0' width='30' height='160' fill='%236f6c62' fill-opacity='0.04'/%3E%3Cg stroke='%236f6c62' stroke-opacity='0.17' stroke-width='1'%3E%3Cpath d='M0 20H240M0 40H240M0 60H240M0 80H240M0 100H240M0 120H240M0 140H240'/%3E%3Cpath d='M30 0V160M90 0V160M150 0V160M210 0V160'/%3E%3C/g%3E%3Crect x='150' y='80' width='60' height='20' fill='none' stroke='%236f6c62' stroke-opacity='0.35' stroke-width='1.6'/%3E%3Cg fill='%236f6c62' fill-opacity='0.26' font-family='Arial,sans-serif' font-size='11'%3E%3Ctext x='56' y='14'%3EA%3C/text%3E%3Ctext x='116' y='14'%3EB%3C/text%3E%3Ctext x='176' y='14'%3EC%3C/text%3E%3Ctext x='10' y='34'%3E1%3C/text%3E%3Ctext x='10' y='54'%3E2%3C/text%3E%3Ctext x='10' y='74'%3E3%3C/text%3E%3Ctext x='10' y='94'%3E4%3C/text%3E%3Ctext x='10' y='114'%3E5%3C/text%3E%3Ctext x='10' y='134'%3E6%3C/text%3E%3Ctext x='36' y='34'%3EQ1%3C/text%3E%3Ctext x='96' y='34'%3E12%3C/text%3E%3Ctext x='156' y='34'%3E4.2%3C/text%3E%3Ctext x='36' y='54'%3EQ2%3C/text%3E%3Ctext x='96' y='54'%3E%23REF%21%3C/text%3E%3Ctext x='156' y='54'%3E17%3C/text%3E%3Ctext x='36' y='74'%3EQ3%3C/text%3E%3Ctext x='96' y='74'%3E9%3C/text%3E%3Ctext x='156' y='74'%3E%23N/A%3C/text%3E%3Ctext x='36' y='94'%3ETotal%3C/text%3E%3Ctext x='96' y='94'%3E%3F%3F%3F%3C/text%3E%3Ctext x='156' y='94'%3E%23DIV/0%21%3C/text%3E%3Ctext x='36' y='114'%3EDave%3C/text%3E%3Ctext x='96' y='114'%3E3%3C/text%3E%3Ctext x='156' y='114'%3Ehmm%3C/text%3E%3C/g%3E%3C/svg%3E"); }

/* Phones: contain everything so nothing forces pinch-zooming; a note recommends a computer */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, canvas, svg, video, table { max-width: 100%; }
.landing-root, .course-root, .lms, .slide { overflow-wrap: anywhere; }
.phone-note { background: #fff7d6; color: #3a2e00; border: 2px solid #b98a1d; border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.phone-note p { margin: 0 0 6px; }
.phone-note .btn { background: #fff; color: #0b4a73; border-color: #0b4a73; min-height: 44px; }

/* TNO brand */
.brandbar { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.brand-line { font: 600 .8rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lms-logo { display: inline-flex; vertical-align: middle; opacity: 1; }
.lms-logo svg { display: block; }

/* Landing and certificate pages: one opaque container holds all the text, so nothing sits on the background pattern */
.landing-root { padding-top: 20px; }
.landing-root > main { background: #ffffff; border: 1px solid #c9c6bb; border-radius: 14px; padding: 22px 26px 18px; box-shadow: 0 2px 0 rgba(0, 0, 0, .05); }
@media (max-width: 600px) { .landing-root { padding: 10px 8px 32px; } .landing-root > main { padding: 16px 14px 14px; border-radius: 10px; } }