/* ---------- Excel Lab (excel.html) and the mini spreadsheet (js/xl.js) ---------- */
:root {
  --xl-grid: #d4d0c6; --xl-head: #ebe8e0; --xl-head-hl: #d9e8df; --xl-cell: #ffffff; --xl-ink: #1c1b19;
  --xl-sel: rgba(47, 122, 99, 0.12); --xl-act: #2f7a63; --xl-good: #1f9d6b; --xl-good-bg: #e3f4ea; --xl-bad: #c2412d; --xl-bad-bg: #fbe5e0;
  --xl-panel: #ffffff; --xl-line: #e2ded4;
  --xl-bd: #000000; --xl-green: #217346; --xl-rib: #f3f3f3;
}
/* Dark mode: chosen with the toggle in the top bar (js/theme.js); light is the default. */
:root[data-theme="dark"] {
    --xl-grid: #34332f; --xl-head: #23221f; --xl-head-hl: #1f3a30; --xl-cell: #1b1b19; --xl-ink: #efede8;
    --xl-sel: rgba(92, 195, 163, 0.14); --xl-act: #5cc3a3; --xl-good: #3fcf8e; --xl-good-bg: #173426; --xl-bad: #ff7b66; --xl-bad-bg: #3a1e19;
    --xl-panel: #1d1d1b; --xl-line: #2e2d2a;
    --xl-bd: #e8e6e1; --xl-green: #3fa36b; --xl-rib: #262624;
  }

/* the spreadsheet */
.xl { font-size: 0.9rem; color: var(--xl-ink); }
.xl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; background: var(--xl-head); border: 1px solid var(--xl-grid); border-bottom: 0; border-radius: 8px 8px 0 0; }
.xl-tools button { min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: 600 0.85rem system-ui, sans-serif; cursor: pointer; }
.xl-tools button:hover { background: var(--xl-cell); border-color: var(--xl-grid); }
.xl-tools button:active { transform: translateY(1px); }
.xl-sep { width: 1px; height: 20px; background: var(--xl-grid); margin: 0 4px; }
.xl-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--xl-cell); border: 1px solid var(--xl-grid); border-bottom: 0; }
.xl-name { min-width: 62px; padding: 3px 6px; border: 1px solid var(--xl-grid); border-radius: 4px; font: 600 0.8rem var(--mono); text-align: center; white-space: nowrap; }
.xl-fx { font: italic 600 0.85rem Georgia, serif; color: var(--muted); padding: 0 4px; }
.xl-fbar { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; font: 0.9rem var(--mono); }
.xl-fbar:focus { outline: none; border-color: var(--xl-act); background: var(--xl-cell); }
.xl-ok, .xl-x { width: 30px; height: 28px; border: 1px solid var(--xl-grid); border-radius: 4px; background: var(--xl-cell); color: inherit; cursor: pointer; font-weight: 700; }
.xl-ok { color: var(--xl-good); } .xl-x { color: var(--xl-bad); }
.xl-sink { position: absolute; z-index: 0; width: 2px; height: 2px; padding: 0; border: 0; opacity: 0; resize: none; overflow: hidden; pointer-events: none; caret-color: transparent; }
.xl-scroll { color-scheme: light dark; position: relative; overflow: auto; max-height: min(70vh, 760px); border: 1px solid var(--xl-grid); background: var(--xl-cell); outline: none; -webkit-overflow-scrolling: touch; }
.xl-scroll:focus-visible { box-shadow: 0 0 0 2px var(--xl-act); }
.xl-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; }
.xl-grid col.xl-rh { width: 38px; }
.xl-grid th { position: sticky; z-index: 2; background: var(--xl-head); color: var(--muted); font: 600 0.72rem system-ui, sans-serif; border-right: 1px solid var(--xl-grid); border-bottom: 1px solid var(--xl-grid); text-align: center; cursor: pointer; }
.xl-grid thead th { top: 0; height: 24px; }
.xl-grid tbody th { left: 0; }
.xl-grid th.xl-corner { left: 0; z-index: 3; }
.xl-grid th.hl { background: var(--xl-head-hl); color: var(--xl-act); }
.xl-grid td { height: 26px; padding: 0 6px; border-right: 1px solid var(--xl-grid); border-bottom: 1px solid var(--xl-grid); white-space: nowrap; overflow: hidden; text-overflow: clip; cursor: cell; background: var(--xl-cell); }
.xl-grid td.n { text-align: right; font-family: var(--mono); font-size: 0.86rem; }
.xl-grid td.b { font-weight: 700; }
.xl-grid td.err { color: var(--xl-bad); font: 600 0.8rem var(--mono); text-align: center; }
.xl-grid td.sel { background: var(--xl-sel); }
.xl-grid td.act { box-shadow: inset 0 0 0 2px var(--xl-act); background: var(--xl-cell); }
.xl-grid td.clip { outline: 2px dashed var(--xl-act); outline-offset: -3px; }
.xl-grid td.mk-good { background: var(--xl-good-bg); }
.xl-grid td.mk-bad { background: var(--xl-bad-bg); box-shadow: inset 0 0 0 2px var(--xl-bad); }
.xl-grid td.act.mk-bad { box-shadow: inset 0 0 0 2px var(--xl-act); }
.xl-grid td.gd { outline: 2px dashed #d39a2c; outline-offset: -3px; background: color-mix(in srgb, #d39a2c 10%, var(--xl-cell)); }
.xl-edit { position: absolute; z-index: 4; padding: 0 5px; border: 2px solid var(--xl-act); background: var(--xl-cell); color: var(--xl-ink); font: 0.9rem var(--mono); outline: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.xl-status { min-height: 1.6em; padding: 4px 8px; border: 1px solid var(--xl-grid); border-top: 0; border-radius: 0 0 8px 8px; background: var(--xl-head); font: 0.75rem var(--mono); color: var(--muted); }
.xl-status b { color: var(--xl-bad); }

/* the Lab page */
.lab-page { padding-bottom: 40px; }
.lab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lab-card-link { display: flex; gap: 14px; padding: 16px; border: 1.5px solid var(--xl-line); border-radius: 10px; background: var(--xl-panel); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.lab-card-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.lab-card-link .lc-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--accent); color: var(--accent); font: 700 0.9rem var(--mono); }
.lab-card-link.done .lc-num { background: var(--accent); color: var(--bg); }
.lab-card-link .lc-body { display: grid; gap: 2px; }
.lab-card-link .lc-level { font: 600 0.7rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lab-card-link .lc-blurb { font-size: 0.88rem; color: var(--muted); }
.lab-more { margin-top: 24px; color: var(--muted); font-size: 0.9rem; }

.lab-head { margin: 8px 0 16px; }
.lab-kicker { font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.lab-head h2 { margin: 4px 0 0; font-size: 1.6rem; }
.lab-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.lab-side { display: grid; gap: 12px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.lab-panel { padding: 14px 16px; border: 1px solid var(--xl-line); border-radius: 10px; background: var(--xl-panel); }
.lab-panel h3 { margin: 0 0 8px; font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.lab-panel p { margin: 0 0 8px; font-size: 0.92rem; }
.lab-open { color: var(--muted); }
.lab-note { margin: 8px 0 0 !important; font-size: 0.82rem !important; color: var(--muted); }
.lab-tx { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.lab-tx td { padding: 5px 4px; border-bottom: 1px solid var(--xl-line); vertical-align: top; }
.lab-tx td.d { white-space: nowrap; font: 0.78rem var(--mono); color: var(--muted); padding-top: 7px; }
.lab-tx td.n { text-align: right; white-space: nowrap; font-family: var(--mono); }
.lab-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 6px; }
.lab-steps li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; padding: 4px 6px; border-radius: 6px; }
.lab-steps .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--xl-grid); display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; }
.lab-steps li.ok { color: var(--muted); }
.lab-steps li.ok .tick { background: var(--xl-good); border-color: var(--xl-good); color: #fff; }
.lab-steps li.ok .tick::after { content: "✓"; }
.lab-steps li.now { background: var(--tint); font-weight: 600; }
.lab-steps li.now .tick { border-color: var(--accent); }
.lab-help ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.86rem; display: grid; gap: 4px; }
.lab-help summary { cursor: pointer; font: 600 0.78rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

.lab-work { min-width: 0; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.btn.ghost { border-color: var(--xl-line); color: var(--muted); }
.lab-feedback:empty { display: none; }
.lab-feedback { margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--xl-line); background: var(--xl-panel); font-size: 0.92rem; }
.lab-feedback strong { display: block; margin-bottom: 4px; }
.lab-feedback ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.lab-feedback p { margin: 6px 0 0; }
.lab-feedback .more, .lab-feedback .ok-note { color: var(--muted); font-size: 0.85rem; }
.lab-feedback.bad { border-color: var(--xl-bad); background: var(--xl-bad-bg); }
.lab-feedback.hint { border-color: #c98a2b; background: color-mix(in srgb, #c98a2b 12%, var(--xl-panel)); }
.lab-feedback.win { border-color: var(--xl-good); background: var(--xl-good-bg); }
.lab-feedback.win .btn { margin-top: 10px; }

@media (max-width: 1000px) {
  .lab-grid { grid-template-columns: 1fr; }
  .lab-side { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .lab-head h2 { font-size: 1.3rem; }
  .xl-tools button { min-width: 32px; padding: 0 7px; }
  .xl-scroll { max-height: 62vh; }
  .xl-fbar, .xl-edit { font-size: 16px; } /* stops phones zooming in when you type */
}

/* the step-by-step guide (first exercises) */
.lab-guide { margin-bottom: 12px; padding: 14px 16px; border: 2px solid #d39a2c; border-radius: 10px; background: color-mix(in srgb, #d39a2c 9%, var(--xl-panel)); font-size: 0.93rem; }
.lab-guide.advance { animation: lg-in 0.5s ease; }
@keyframes lg-in { from { transform: translateY(-4px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xl-good) 40%, transparent); } to { transform: none; box-shadow: none; } }
.lab-guide.off { padding: 8px 12px; border-style: dashed; background: transparent; }
.lg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 0.85rem; color: var(--muted); }
.lg-head b { color: var(--text); font-size: 1rem; }
.lg-toggle { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 0.82rem; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.lg-body p { margin: 6px 0; }
.lg-body ol, .lg-body ul { margin: 6px 0; padding-left: 20px; display: grid; gap: 4px; }
.lg-body .tip { color: var(--muted); font-size: 0.86rem; }
.lg-body code { font: 600 0.86rem var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--xl-cell); border: 1px solid var(--xl-grid); white-space: nowrap; }
.lg-body kbd { font: 600 0.75rem system-ui, sans-serif; padding: 1px 6px; border: 1px solid var(--xl-grid); border-bottom-width: 2px; border-radius: 4px; background: var(--xl-cell); white-space: nowrap; }
.lab-todo { list-style: none; padding-left: 0 !important; font-size: 0.88rem; }
.lab-todo li.ok { color: var(--xl-good); }
.lab-layout { border-collapse: collapse; margin: 8px 0; font-size: 0.8rem; max-width: 100%; }
.lab-layout th { font: 600 0.68rem var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 2px 4px; text-align: center; }
.lab-layout td { border: 1px solid var(--xl-grid); background: var(--xl-cell); padding: 4px 6px; text-align: center; font-weight: 600; min-width: 44px; }
.lab-layout td span { display: block; font: 600 0.65rem var(--mono); color: var(--muted); }
.lab-layout td.gap { background: transparent; color: var(--muted); font-weight: 400; min-width: 24px; }
@media (max-width: 600px) { .lab-layout td { min-width: 0; padding: 3px; font-size: 0.7rem; } }
.back.lab-alt { margin-left: 14px; color: var(--muted); }

/* Long formulas in the notes wrap on narrow phones */
.lab-panel code, .lab-guide code { white-space: normal; overflow-wrap: anywhere; }
.lab-guide .lab-layout { display: block; max-width: 100%; overflow-x: auto; }

/* ---------- Excel look (ribbon, Home tab, grid) ---------- */
.xl { font-family: Calibri, Carlito, "Segoe UI", system-ui, sans-serif; }
.xl-ribbon { position: relative; border: 1px solid var(--xl-grid); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--xl-rib); }
.xl-tabs { display: flex; gap: 2px; padding: 0 6px; background: var(--xl-green); border-radius: 7px 7px 0 0; overflow: hidden; }
.xl-tabs span { padding: 5px 12px 4px; color: #fff; font-size: .8rem; opacity: .85; }
.xl-tabs span.on { background: var(--xl-rib); color: var(--xl-green); opacity: 1; font-weight: 600; border-radius: 5px 5px 0 0; margin-top: 3px; }
.xl-ribbon .xl-tools { border: 0; border-radius: 0; background: transparent; padding: 4px 4px 0; gap: 0; align-items: stretch; }
.xl-grp { display: flex; flex-direction: column; align-items: center; padding: 2px 6px 0; border-right: 1px solid var(--xl-grid); }
.xl-grp:last-child { border-right: 0; }
.xl-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.xl-glabel { font-size: .66rem; color: var(--muted); padding: 2px 0 3px; }
.xl-ribbon .xl-tools button { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 3px; font-family: inherit; }
.xl-ribbon .xl-tools button:hover { background: color-mix(in srgb, var(--xl-green) 12%, var(--xl-cell)); border-color: color-mix(in srgb, var(--xl-green) 40%, transparent); }
.xl-split { display: inline-flex; }
.xl-split > button:first-child { padding-right: 3px !important; }
.xl-ribbon .xl-tools .xl-arrow { min-width: 16px; padding: 0 2px; font-size: .7rem; }
.xl-bi { width: 16px; height: 16px; vertical-align: middle; }
.xl-fillmain, .xl-fcmain { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.xl-ico { font-size: .82rem; line-height: 1; }
.xl-A { font-weight: 700; font-size: .95rem; }
.xl-swbar { display: block; width: 16px; height: 4px; border: 1px solid rgba(0,0,0,.2); }
.xl-menu { position: absolute; z-index: 30; min-width: 230px; padding: 4px; background: var(--xl-cell); border: 1px solid var(--xl-grid); border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.xl-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; background: transparent; color: inherit; font: .86rem Calibri, Carlito, "Segoe UI", system-ui, sans-serif; text-align: left; cursor: pointer; border-radius: 3px; }
.xl-menu > button:hover { background: color-mix(in srgb, var(--xl-green) 14%, var(--xl-cell)); }
.xl-menu hr { border: 0; border-top: 1px solid var(--xl-grid); margin: 3px 0; }
.xl-pal { min-width: 0; width: 196px; }
.xl-sws { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 6px; }
.xl-sw { width: 18px; height: 18px; padding: 0; border: 1px solid rgba(0,0,0,.25); border-radius: 2px; cursor: pointer; }
.xl-sw:hover { outline: 2px solid var(--xl-green); outline-offset: 1px; }
.xl-bar { border-radius: 0; }
.xl-grid th { background: #f3f3f3; color: #444; font-family: inherit; font-weight: 400; font-size: .78rem; border-color: #d4d4d4; }
:root[data-theme="dark"] .xl-grid th { background: #2a2a28; color: #bbb; border-color: var(--xl-grid); }
.xl-grid th.hl { background: #d2d2d2; color: var(--xl-green); font-weight: 600; box-shadow: inset 0 -2px 0 var(--xl-green); }
.xl-grid tbody th.hl { box-shadow: inset -2px 0 0 var(--xl-green); }
:root[data-theme="dark"] .xl-grid th.hl { background: #33403a; }
.xl-grid td { position: relative; border-color: #e1e1e1; font-family: inherit; background: var(--fill, var(--xl-cell)); }
:root[data-theme="dark"] .xl-grid td { border-color: var(--xl-grid); }
.xl-grid td.n { font-family: inherit; font-size: .9rem; }
.xl-grid td.sel { background: color-mix(in srgb, var(--xl-green) 14%, var(--fill, var(--xl-cell))); }
.xl-grid td.act { box-shadow: inset 0 0 0 2px var(--xl-green); background: var(--fill, var(--xl-cell)); }
.xl-grid td.it { font-style: italic; } .xl-grid td.un { text-decoration: underline; }
.xl-grid td.al-l { text-align: left; } .xl-grid td.al-c { text-align: center; } .xl-grid td.al-r { text-align: right; }
.xl-grid td.bd::after { content: ""; position: absolute; inset: -1px 0 0 -1px; pointer-events: none; box-shadow: var(--bds); }
.xl-edit { border-color: var(--xl-green); font-family: inherit; }
.xl-status { border-radius: 0 0 8px 8px; background: var(--xl-green); color: #fff; font-family: inherit; }
.xl-status b { color: #fff; text-decoration: underline; }
@media (max-width: 600px) { .xl-glabel { display: none; } .xl-grp { padding: 2px 3px 4px; } .xl-tabs span:not(.on) { display: none; } }

/* ---------- workbook: ribbon tabs, sheet tabs, pop-ups, charts ---------- */
.xl-tabs button { padding: 5px 12px 4px; border: 0; background: transparent; color: #fff; font: inherit; font-size: .8rem; opacity: .85; cursor: pointer; }
.xl-tabs button.on { background: var(--xl-rib); color: var(--xl-green); opacity: 1; font-weight: 600; border-radius: 5px 5px 0 0; margin-top: 3px; }
.xl-tabs .xl-file { padding: 5px 12px 4px; color: #fff; font-size: .8rem; opacity: .85; }
.xl-ribbon .xl-tools .xl-wide { min-width: 0; padding: 0 8px; white-space: nowrap; }
.xl-ribbon .xl-tools button.on { background: color-mix(in srgb, var(--xl-green) 18%, var(--xl-cell)); border-color: var(--xl-green); }
.xl-pop { position: absolute; z-index: 40; right: 8px; top: 64px; width: min(320px, calc(100% - 16px)); padding: 12px; background: var(--xl-cell); border: 1px solid var(--xl-grid); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.xl-pop form { display: grid; gap: 8px; }
.xl-pop label { display: grid; gap: 3px; font-size: .82rem; }
.xl-pop input { height: 30px; padding: 0 8px; border: 1px solid var(--xl-grid); border-radius: 4px; background: var(--xl-cell); color: inherit; font: inherit; }
.xl-pop-btns { display: flex; gap: 6px; justify-content: flex-end; }
.xl-pop button { height: 30px; padding: 0 12px; border: 1px solid var(--xl-grid); border-radius: 4px; background: var(--xl-rib); color: inherit; font: inherit; cursor: pointer; }
.xl-pop button[type="submit"] { background: var(--xl-green); border-color: var(--xl-green); color: #fff; }
.xl-pop .xl-date { justify-self: start; font-size: .78rem; height: 26px; }
.xl-sheets { display: flex; align-items: flex-end; gap: 2px; padding: 0 6px; background: var(--xl-rib); border: 1px solid var(--xl-grid); border-top: 0; overflow-x: auto; }
.xl-tab { padding: 5px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: inherit; font: .82rem Calibri, Carlito, "Segoe UI", system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.xl-tab.on { background: var(--xl-cell); color: var(--xl-green); font-weight: 600; border-bottom-color: var(--xl-green); }
.xl-addsheet { width: 26px; height: 26px; margin: 2px 4px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.xl-addsheet:hover { background: var(--xl-cell); }
.xl-footer { padding: 4px 10px; border: 1px solid var(--xl-grid); border-top: 1px dashed var(--xl-grid); background: var(--xl-cell); font-size: .78rem; color: var(--muted); }
.xl-charts:empty { display: none; }
.xl-charts { padding: 8px; border: 1px solid var(--xl-grid); border-top: 0; background: var(--xl-cell); }
.xl-chart { margin: 0; max-width: 600px; border: 1px solid var(--xl-grid); border-radius: 4px; background: #fff; color: #222; }
.xl-chart svg { display: block; width: 100%; height: auto; }
.xl-chart figcaption { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; border-top: 1px solid #e5e5e5; font-size: .8rem; }
.xl-chart figcaption button { height: 26px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px; background: #f6f6f6; cursor: pointer; font: inherit; }
.xl.chart-sheet .xl-scroll, .xl.chart-sheet .xl-bar { display: none; }
.xl.chart-sheet .xl-charts { border-top: 1px solid var(--xl-grid); }
.xl-grid td.cf { background: #ffc7ce; color: #9c0006; }
.xl-grid td.sf { font-family: var(--mono); font-size: .76rem; text-align: left; color: var(--xl-ink); }
.xl.showf .xl-grid td { overflow: hidden; }

/* ---------- more Excel: fonts, merge, wrap, freeze, fill handle, find, print preview (9 Oct) ---------- */
.xl-ribbon select { height: 26px; border: 1px solid var(--xl-grid); border-radius: 3px; background: var(--xl-cell); color: inherit; font: .8rem Calibri, Carlito, "Segoe UI", sans-serif; }
.xl-ribbon .xl-ff { width: 128px; } .xl-ribbon .xl-fs { width: 52px; }
.xl-chk { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; padding: 0 6px; white-space: nowrap; }
.xl-tabs .xl-file { border: 0; background: transparent; cursor: pointer; font: inherit; }
.xl-menu .xl-note { display: block; padding: 6px 10px; font-size: .78rem; color: var(--muted); }
.xl-header { padding: 4px 10px; border: 1px solid var(--xl-grid); border-bottom: 1px dashed var(--xl-grid); border-top: 0; background: var(--xl-cell); font-size: .78rem; color: var(--muted); }
.xl-grid td.wr { white-space: normal; overflow-wrap: anywhere; vertical-align: top; height: auto; }
.xl-grid td.mhid { display: none; }
.xl-grid td.merged { text-align: center; }
.xl-grid td.cf { background: var(--cfbg, #ffc7ce); color: var(--cfc, #9c0006); }
.xl-grid td.cfs { background: var(--cfbg); color: #1c1b19; }
.xl-grid td[data-icon]::before { content: "●"; margin-right: 6px; font-size: .9em; float: left; }
.xl-grid td[data-icon="g"]::before { color: #00b050; } .xl-grid td[data-icon="y"]::before { color: #ffc000; } .xl-grid td[data-icon="r"]::before { color: #e00000; }
.xl-grid td.fz-r { position: sticky; top: 24px; z-index: 1; box-shadow: inset 0 -2px 0 #9a9a9a; }
.xl-grid td.fz-c { position: sticky; left: 38px; z-index: 1; box-shadow: inset -2px 0 0 #9a9a9a; }
.xl-grid td.fz-r.fz-c { z-index: 2; }
.xl-grid td.fillprev { outline: 1.5px dashed var(--xl-green); outline-offset: -2px; }
.xl-fillh { position: absolute; z-index: 5; width: 8px; height: 8px; background: var(--xl-green); border: 1.5px solid #fff; cursor: crosshair; touch-action: none; }
.xl.editing .xl-fillh { display: none; }
.xl-find .xl-found { font-size: .8rem; color: var(--muted); }
.xl-chart figcaption select { height: 26px; border: 1px solid #ccc; border-radius: 4px; background: #f6f6f6; font: inherit; }
.xl-preview { position: fixed; inset: 0; z-index: 200; background: rgba(40, 40, 40, .72); overflow: auto; padding: 16px; }
.pv-wrap { max-width: 980px; margin: 0 auto; }
.pv-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: #fff; margin-bottom: 12px; font-size: .9rem; }
.pv-bar .pv-close { margin-left: auto; height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: #fff; color: #222; font-weight: 600; cursor: pointer; }
.pv-page { margin: 0 auto; width: min(100%, 640px); aspect-ratio: 210 / 297; background: #fff; color: #111; box-shadow: 0 10px 40px rgba(0,0,0,.4); padding: 28px 32px; display: flex; flex-direction: column; font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 10.5px; overflow: hidden; }
.pv-page.land { width: min(100%, 900px); aspect-ratio: 297 / 210; }
.pv-head, .pv-foot { text-align: center; color: #444; min-height: 1.4em; }
.pv-head { margin-bottom: 14px; } .pv-foot { margin-top: auto; padding-top: 10px; }
.pv-body { overflow: hidden; }
.pv-grid { border-collapse: collapse; }
.pv-grid td, .pv-grid th { padding: 2px 6px; white-space: nowrap; }
.pv-grid.grid td { outline: 1px solid #c8c8c8; outline-offset: -0.5px; }
.pv-grid th { background: #efefef; color: #555; font-weight: 400; border: 1px solid #c8c8c8; text-align: center; }
.pv-empty { color: #777; }

/* ---------- Learn Excel page (learn-excel.html) ---------- */
.learn-page { padding-bottom: 48px; }
.learn-hero .btn { margin-top: 12px; }
.learn-progress { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: .9rem; color: var(--muted); }
.lp-bar { flex: 0 1 260px; height: 8px; border-radius: 99px; background: var(--xl-line); overflow: hidden; }
.lp-bar span { display: block; height: 100%; background: var(--xl-green); border-radius: inherit; }
.learn-sec { margin: 26px 0; padding: 18px 20px; border: 1px solid var(--xl-line); border-radius: 12px; background: var(--xl-panel); }
.ls-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ls-week { font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--xl-green); }
.ls-head h3 { margin: 0; font-size: 1.2rem; }
.ls-skills { display: grid; gap: 10px; margin: 0 0 14px; }
.ls-skills div { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--xl-line); }
.ls-skills div:last-child { border-bottom: 0; }
.ls-skills dt { font-weight: 600; }
.ls-skills dd { margin: 0; font-size: .93rem; line-height: 1.5; }
.ls-skills code, .learn-table kbd, .ls-skills kbd { font-family: var(--mono); font-size: .84em; background: var(--xl-head); padding: 1px 5px; border-radius: 4px; }
.ls-lessons { display: grid; gap: 8px; }
.ls-label { font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.learn-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--xl-line); border-radius: 10px; text-decoration: none; color: inherit; background: var(--xl-cell); transition: border-color .15s, transform .15s; }
.learn-card:hover { border-color: var(--xl-green); transform: translateY(-1px); }
.learn-card .lc-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--xl-green); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; }
.learn-card.done .lc-tick { background: var(--xl-green); }
.learn-card .lc-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.learn-card .lc-text span { font-size: .86rem; color: var(--muted); }
.learn-card .lc-go { flex: none; font-size: .85rem; color: var(--xl-green); font-weight: 600; }
.learn-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.learn-table th { text-align: left; width: 40%; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--xl-line); font-weight: 600; }
.learn-table td { padding: 7px 0; border-bottom: 1px solid var(--xl-line); }
.ls-foot { font-size: .85rem; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 640px) {
  .ls-skills div { grid-template-columns: 1fr; gap: 4px; }
  .learn-card { flex-wrap: wrap; }
  .learn-card .lc-go { width: 100%; text-align: right; }
}
.xl-tools[hidden], .xl-menu[hidden], .xl-pop[hidden], .xl-preview[hidden], .xl-fillh[hidden] { display: none !important; }
.speed-promo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 8px; background: #14142b; color: #f4f4ff; text-decoration: none; }
.speed-promo b { font-family: "Press Start 2P", var(--mono); font-size: 10px; color: #ffd93d; letter-spacing: .5px; }
.speed-promo span { font-size: .9rem; color: #c8c8ee; }
.speed-promo:hover { background: #1d1d3d; }
/* Live ticks: a cell that's right glows light green (its own fill colour still shows). */
.xl-grid td.mk-good { background: #d8f3df; box-shadow: inset 0 0 0 2px #52b788, inset 0 0 9px rgba(82, 183, 136, .55); animation: xlgood .6s ease-out; }
.xl-grid td.mk-good.fl { background: var(--fill); }
.xl-grid td.sel.mk-good { background: color-mix(in srgb, var(--xl-green) 14%, #d8f3df); }
.xl-grid td.sel.mk-good.fl { background: color-mix(in srgb, var(--xl-green) 14%, var(--fill)); }
.xl-grid td.act.mk-good { box-shadow: inset 0 0 0 2px var(--xl-green), inset 0 0 10px rgba(82, 183, 136, .7); }
@keyframes xlgood { from { box-shadow: inset 0 0 0 3px #52b788, inset 0 0 18px rgba(82, 183, 136, .95); } }
:root[data-theme="dark"] .xl-grid td.mk-good:not(.fl) { background: #1f4030; }
/* Paste Options (formulas pasted onto another sheet) */
.xl-pastebox { position: absolute; z-index: 20; width: 260px; padding: 10px 12px; background: var(--xl-cell); color: var(--xl-ink); border: 1px solid var(--xl-green); border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.2); font-size: .82rem; line-height: 1.4; white-space: normal; }
.xl-pastebox p { margin: 4px 0 8px; }
.xl-pb-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.xl-pb-btns button { padding: 5px 9px; border: 1px solid var(--xl-grid); border-radius: 4px; background: var(--xl-rib); color: inherit; font: inherit; cursor: pointer; }
.xl-pb-btns button:first-child { background: var(--xl-green); border-color: var(--xl-green); color: #fff; }
/* Exercise complete (Excel Lab) */
.lab-done { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(20, 30, 25, .45); animation: labfade .2s ease-out; }
.lab-done-card { width: min(460px, 100%); padding: 26px 24px 22px; border-radius: 14px; background: var(--xl-panel, #fff); color: var(--xl-ink); text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.3); animation: labpop .35s cubic-bezier(.2, 1.4, .4, 1); }
.lab-done-tick { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--xl-good); color: #fff; font-size: 34px; font-weight: 700; }
.lab-done-card h3 { margin: 0 0 6px; font-size: 1.35rem; }
.lab-done-card p { margin: 0 0 6px; color: var(--muted); }
.lab-done-btns { display: grid; gap: 8px; margin-top: 16px; }
.lab-done-btns .btn { justify-content: center; text-align: center; }
.lab-done-stay { border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; padding: 4px; }
@keyframes labfade { from { opacity: 0; } }
@keyframes labpop { from { transform: scale(.85); opacity: 0; } }
/* The cells a formula is pointing at while you type it (mouse drag or arrow keys) */
.xl-grid td.pt { outline: 2px dashed #2f6fdb; outline-offset: -2px; background: color-mix(in srgb, #2f6fdb 10%, var(--fill, var(--xl-cell))); }
/* Function list and tips while typing a formula, as in Excel */
.xl-ac { position: absolute; z-index: 25; background: var(--xl-cell); color: var(--xl-ink); border: 1px solid var(--xl-grid); box-shadow: 0 6px 18px rgba(0,0,0,.18); font: .8rem system-ui, -apple-system, "Segoe UI", sans-serif; white-space: normal; }
.xl-ac.list { width: 370px; max-width: calc(100vw - 40px); max-height: 190px; overflow-y: auto; padding: 2px; }
.xl-ac button { display: grid; grid-template-columns: 92px 1fr; gap: 8px; width: 100%; padding: 4px 8px; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.xl-ac button b { font: 600 .8rem var(--mono, ui-monospace, monospace); }
.xl-ac button span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-ac button.on, .xl-ac button:hover { background: color-mix(in srgb, var(--xl-green, #217346) 16%, var(--xl-cell)); }
.xl-ac.tip { padding: 3px 8px; background: #fffbe6; color: #1c1b19; border-color: #d8c87a; }
.xl-ac.tip code { font: .8rem var(--mono, ui-monospace, monospace); white-space: nowrap; }
:root[data-theme="dark"] .xl-ac.tip { background: #3a3520; color: #f2ecd0; border-color: #6b5f2a; }
.xl-ac[hidden] { display: none !important; }
/* Hidden columns and rows (Home › Format › Hide & Unhide): a double line on the heading shows where they are */
.xl-grid td.hc, .xl-grid th.hc { padding: 0 !important; border-right-width: 0 !important; font-size: 0 !important; color: transparent !important; overflow: hidden; box-shadow: none !important; background-image: none !important; }
.xl-grid td.hc::before, .xl-grid td.hc::after { display: none !important; }
.xl-grid tr.hr { display: none; }
.xl-grid thead th.hcb { box-shadow: inset 3px 0 0 -1px #8a8a8a; }
.xl-grid tbody tr.hrb > th { box-shadow: inset 0 3px 0 -1px #8a8a8a; }
/* Accounting format: the £ sits at the left of the cell, the figure at the right */
.xl-grid td[data-acct]::before { content: attr(data-acct); float: left; }
.xl-grid td.acct { padding-right: 10px; }
.pv-acct { float: left; margin-right: 8px; }
.xl-ribbon .xl-nf { width: 118px; margin-bottom: 2px; }
/* Format Cells */
.xl-pop:has(.xl-fmt) { width: min(480px, calc(100% - 16px)); }
.xl-fmt-body { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
.xl-fmt-cats { display: grid; align-content: start; border: 1px solid var(--xl-grid); border-radius: 4px; padding: 2px; }
.xl-pop .xl-fmt-cats button { height: 28px; border: 0; border-radius: 3px; background: transparent; text-align: left; padding: 0 8px; }
.xl-pop .xl-fmt-cats button.on { background: var(--xl-green); color: #fff; }
.xl-fmt-opts { display: grid; gap: 8px; align-content: start; min-width: 0; }
.xl-pop select { height: 30px; max-width: 100%; border: 1px solid var(--xl-grid); border-radius: 4px; background: var(--xl-cell); color: inherit; font: inherit; }
.xl-fmt-sample { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--xl-grid); border-radius: 4px; font-size: .78rem; color: var(--muted); }
.xl-fmt-sample output { min-height: 1.3em; font-size: .95rem; color: var(--xl-ink); text-align: right; overflow-wrap: anywhere; }
.xl-fmt-sample output.red { color: #ff0000; }
.xl-fmt-note { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.xl-pop .xl-chk { display: flex; padding: 0; }
.xl-pop .xl-chk input { height: auto; }
@media (max-width: 520px) { .xl-fmt-body { grid-template-columns: 1fr; } .xl-fmt-cats { grid-template-columns: repeat(4, 1fr); } .xl-pop .xl-fmt-cats button { padding: 0 4px; font-size: .78rem; text-align: center; } }
/* Header & Footer codes */
.xl-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.xl-pop .xl-codes button { height: 24px; padding: 0 6px; font: .72rem var(--mono, ui-monospace, monospace); }
/* Charts: the one chosen for Chart Design, and click-to-edit titles */
.xl-chart.on { outline: 2px solid var(--xl-green); outline-offset: 1px; }
.xl-chart .xl-ch-edit { cursor: pointer; }
.xl-chart .xl-ch-edit:hover { fill: var(--xl-green); }
.xl-charts { display: grid; gap: 8px; }
.pv-pages { font-size: .82rem; opacity: .85; }
.xl-menu[data-for="ctx"] { min-width: 190px; }
.xl-menu[data-for="margins"] { min-width: 300px; }
/* On a phone the ribbon tabs scroll sideways in their own row, so View and Chart Design stay reachable */
.xl-tabs { overflow-x: auto; scrollbar-width: none; }
.xl-tabs::-webkit-scrollbar { display: none; }
.xl-tabs button { flex: none; }
/* Long text spills over the empty cells to its right (the column keeps its width), as in Excel. */
.xl-grid td.spill { overflow: visible; }
.xl-grid td.spill .xl-sp { position: absolute; z-index: 1; left: 6px; top: 50%; transform: translateY(-50%); width: var(--spw); overflow: hidden; white-space: nowrap; pointer-events: none; }