/* Ausgeology · Coal seam gas: styles for this lesson's worked examples, number answers, density logs, cross-sections,
   survey chart, tables and the practice data test. */
:root {
  --cs-sand: #ecd9a8; --cs-sand-dot: #a88a4a; --cs-shale: #c9ccc6; --cs-shale-ln: #a7aca4; --cs-coal: #23201d;
  --cs-gas: rgba(214, 64, 52, 0.72); --cs-water: rgba(42, 120, 214, 0.24); --cs-edge: #6d675a; --cs-ground: #5a4a32;
  --lg-coal: rgba(35, 32, 29, 0.78); --lg-dirty: rgba(140, 112, 72, 0.6); --lg-trace: #1a2124; --lg-cut: #b4501c;
  --sv-1: #b4501c; --sv-2: #e3a472; --sv-3: #c9ccc6; --sv-4: #7fb2d9; --sv-5: #1f5f8b; --sv-ink-l: #ffffff;
  --k-a: #b8501a; --k-b: #1d6f8f; --k-c: #6a4fa3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cs-sand: #6b5d3d; --cs-sand-dot: #b39b62; --cs-shale: #3b4246; --cs-shale-ln: #545d61; --cs-coal: #0b0b0a;
    --cs-gas: rgba(240, 104, 90, 0.78); --cs-water: rgba(90, 160, 230, 0.38); --cs-edge: #9a927f; --cs-ground: #b39b62;
    --lg-coal: rgba(220, 214, 200, 0.62); --lg-dirty: rgba(200, 160, 100, 0.5); --lg-trace: #e6ebeb; --lg-cut: #ec8a52;
    --sv-1: #ec8a52; --sv-2: #9a6440; --sv-3: #4a5458; --sv-4: #3f6f94; --sv-5: #7fb9e4; --sv-ink-l: #0b1822;
    --k-a: #ec8a52; --k-b: #6fb6d2; --k-c: #b9a2ec;
  }
}
:root[data-theme="dark"] {
  --cs-sand: #6b5d3d; --cs-sand-dot: #b39b62; --cs-shale: #3b4246; --cs-shale-ln: #545d61; --cs-coal: #0b0b0a;
  --cs-gas: rgba(240, 104, 90, 0.78); --cs-water: rgba(90, 160, 230, 0.38); --cs-edge: #9a927f; --cs-ground: #b39b62;
  --lg-coal: rgba(220, 214, 200, 0.62); --lg-dirty: rgba(200, 160, 100, 0.5); --lg-trace: #e6ebeb; --lg-cut: #ec8a52;
  --sv-1: #ec8a52; --sv-2: #9a6440; --sv-3: #4a5458; --sv-4: #3f6f94; --sv-5: #7fb9e4; --sv-ink-l: #0b1822;
  --k-a: #ec8a52; --k-b: #6fb6d2; --k-c: #b9a2ec;
}

/* screen 1 */
blockquote.qcaa { margin: 0; padding: 12px 16px; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--surface); max-width: 68ch; }
blockquote.qcaa p { margin: 0; }
.kinds { margin: 0; padding: 0; list-style: none; }
.kinds .ucard { border-top: 5px solid var(--k-a); }
.kinds .ucard.k-b { border-top-color: var(--k-b); }
.kinds .ucard.k-c { border-top-color: var(--k-c); }

/* worked examples, part-done examples and the student's own */
.wx, .fade-box, .turn-box { display: grid; gap: 12px; align-content: start; padding: 16px 18px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); max-width: 820px; min-width: 0; }
.wx { border-left: 6px solid var(--accent); }
.fade-box { border-left: 6px solid var(--k-b); }
.turn-box { border-left: 6px solid var(--k-c); }
.wx > .label, .fade-box > .label, .turn-box > .label { margin: 0; }
.wx-q { margin: 0; font-weight: 700; font-size: 1.06rem; line-height: 1.45; }
.wx-steps { margin: 0; padding-left: 1.5em; display: grid; gap: 8px; }
.wx-steps li { line-height: 1.5; padding-left: 4px; }
.wx-steps li::marker { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
.wx-steps li:focus { outline: none; }
.wx-steps li:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wx-steps.given li::marker { color: var(--k-b); }
.wx-steps li.todo { background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; margin-left: -6px; }
.wx-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-done { margin: 0; color: var(--ink-2); font-size: 0.97rem; }
.wx .wx-nav { display: none; }
.wx.is-live .wx-nav { display: flex; }
.turn-box .check, .fade-box .check { margin: 0; }
.wx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.wx-grid.log-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
@media (max-width: 860px) { .wx-grid, .wx-grid.log-grid { grid-template-columns: minmax(0, 1fr); } }
.formula { margin: 0; max-width: 820px; padding: 12px 16px; border-radius: 10px; background: var(--surface-2); font-family: var(--font-mono); font-size: 1rem; font-weight: 700; line-height: 1.5; }

/* number answers */
.num { display: grid; gap: 8px; }
.num label { font-weight: 700; line-height: 1.4; }
.num-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.num-row input { width: 9.5em; max-width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 1.04rem; color: var(--ink); background: var(--surface); font-variant-numeric: tabular-nums; }
.num-row input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
.num.is-right .num-row input { border-color: var(--good); }
.num.is-wrong .num-row input { border-color: var(--bad); }
.num-unit { color: var(--ink-2); }
.num .fb { margin: 0; }
.num-pair { display: grid; gap: 16px; }

/* tables */
.tbl-box { display: grid; gap: 8px; align-content: start; max-width: 820px; min-width: 0; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tbl-box > p { margin: 0; padding: 12px 14px 0; }
.tbl-box > p.small { padding: 0 14px 12px; }
.turn-box .tbl-box { background: var(--bg); }
.tbl-box td, .tbl-box th { padding: 8px 12px; }
.tbl-box thead th, .tbl-scroll thead th { text-transform: none; letter-spacing: 0; }
.tr-sum td { font-weight: 700; }
.tbl-src { margin: 0; color: var(--ink-2); }
.tbl-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .tbl-pair { grid-template-columns: minmax(0, 1fr); } }
details.tbl-more { max-width: 820px; }
.tbl-scroll { max-height: 340px; overflow: auto; }
.tbl-scroll table { font-size: 0.95rem; }

/* charts */
.chart-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 760px) { .chart-pair { grid-template-columns: minmax(0, 1fr); } }
.chart-pair .chart { min-width: 0; }

/* density logs */
.lg svg { max-width: 400px; }
.lg-grid { stroke: var(--viz-grid); stroke-width: 1; }
.lg-grid-m { stroke: var(--viz-axis); stroke-width: 1; }
.lg-trace { fill: none; stroke: var(--lg-trace); stroke-width: 1.8; stroke-linejoin: round; }
.lg-coal { fill: var(--lg-coal); }
.lg-dirty { fill: var(--lg-dirty); }
.lg-cut { stroke: var(--lg-cut); stroke-width: 1.6; stroke-dasharray: 6 4; }
.lg-cut2 { stroke: var(--lg-cut); stroke-width: 1.2; stroke-dasharray: 2 3; }
.lg-cut-lab { fill: var(--lg-cut); font-weight: 700; }
.lg-r-sand { fill: var(--cs-sand); }
.lg-r-mud { fill: var(--cs-shale); }
.lg-r-coal { fill: var(--cs-coal); }
.lg-r-dirty { fill: var(--sv-2); }

/* cross-sections */
.cs-fig { margin: 0; display: grid; gap: 6px; min-width: 0; }
.cs-fig svg { display: block; width: 100%; height: auto; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.cs-fig figcaption { font-size: 0.92rem; color: var(--ink-2); }
.cs-sand { fill: var(--cs-sand); }
.cs-dot { fill: var(--cs-sand-dot); }
.cs-shale { fill: var(--cs-shale); }
.cs-shale-ln { stroke: var(--cs-shale-ln); stroke-width: 1; }
.cs-res { stroke: none; }
.cs-water { fill: var(--cs-water); }
.cs-gas { fill: var(--cs-gas); }
.cs-edge { fill: none; stroke: var(--cs-edge); stroke-width: 1; }
.cs-coal { fill: var(--cs-coal); }
.cs-ground { stroke: var(--cs-ground); stroke-width: 2; }
.cs-well { stroke: var(--ink); stroke-width: 2.4; }
.cs-rig { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.cs-lab { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink); }
.cs-legend .sw { width: 18px; height: 14px; border-radius: 3px; border: 1px solid var(--cs-edge); }
.cs-sw-shale { background: var(--cs-shale); }
.cs-sw-sand { background: radial-gradient(circle at 30% 35%, var(--cs-sand-dot) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--cs-sand); }
.cs-sw-coal { background: var(--cs-coal); }
.cs-sw-gas { background: var(--cs-gas); }
.cs-sw-water { background: var(--cs-water); }

/* survey */
.sv-1 { fill: var(--sv-1); } .sv-2 { fill: var(--sv-2); } .sv-3 { fill: var(--sv-3); } .sv-4 { fill: var(--sv-4); } .sv-5 { fill: var(--sv-5); }
.legend .sw.sv-sw1 { background: var(--sv-1); } .legend .sw.sv-sw2 { background: var(--sv-2); } .legend .sw.sv-sw3 { background: var(--sv-3); }
.legend .sw.sv-sw4 { background: var(--sv-4); } .legend .sw.sv-sw5 { background: var(--sv-5); }
.sv-lab { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink); }
.sv-lab.sv-lab-l { fill: var(--sv-ink-l); }

/* practice data test */
.clock { display: grid; gap: 6px; justify-items: start; width: fit-content; max-width: 100%; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.clock .label { margin: 0; }
.clock-face { margin: 0; font-family: var(--font-mono); font-size: 2.4rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.clock-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.clock [data-clock-live]:empty { display: none; }
.stim { display: grid; gap: 16px; padding-top: 6px; border-top: 2px solid var(--line); }
.stim-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 8px 0 0; }
.stim-tag { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--surface); }
.stim-kind { font-size: 0.86rem; font-weight: 400; color: var(--ink-2); }
.pt-wrap { display: grid; gap: 12px; max-width: 820px; }
.pt-wrap > h3 { margin: 0; }
.pt-list { margin: 0; padding-left: 1.6em; display: grid; gap: 18px; }
.pt-list > li::marker { font-family: var(--font-mono); font-weight: 700; }
.pt { display: grid; gap: 8px; }
.pt-q { margin: 0; line-height: 1.5; font-weight: 700; }
.pt-kind, .pt-ds { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; vertical-align: 2px; }
.pt-kind { color: #fff; background: var(--k-a); }
.pt-kind.k-b { background: var(--k-b); }
.pt-kind.k-c { background: var(--k-c); }
:root[data-theme="dark"] .pt-kind { color: #0b1822; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-kind { color: #0b1822; } }
.pt-ds { border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }
.pt textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 1.02rem; line-height: 1.5; color: var(--ink); background: var(--surface); resize: vertical; }
.pt textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
details.pt-model { max-width: none; }
details.pt-model > summary { padding: 10px 0; }
.pt-tick { display: flex; gap: 10px; align-items: center; font-weight: 700; cursor: pointer; }
.pt-tick input { width: 18px; height: 18px; accent-color: var(--good); }
.pt-tally { margin: 0; font-weight: 700; }