climate.css

@layer components {
  #climate-interpretation p:not(.eyebrow){font-size:14px;line-height:1.85;letter-spacing:0;margin-bottom:16px}#climate-interpretation p:last-child{margin-bottom:0}
  .course-chapters{display:grid;gap:7px;margin:10px 0 24px}.course-chapters a{display:flex;gap:12px;font-size:12px;line-height:1.6;text-decoration:none;padding:7px 8px;border:1px solid transparent;border-radius:4px}.course-chapters a span{font-size:10px;color:var(--muted)}.course-chapters a[aria-current=page]{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent);font-weight:600}.sidebar-intro{margin-bottom:24px}
  .chapter-route{display:flex;gap:19px;align-items:center;flex-wrap:wrap;padding:18px 0 31px;font-size:11px;color:var(--muted)}.chapter-route b{font-weight:400;color:var(--accent)}
  .station-figure{display:grid;grid-template-columns:minmax(200px,360px) minmax(180px,1fr);gap:25px;align-items:center;margin:32px 0 0}.station-figure img{width:100%;height:auto;border-radius:5px}.station-figure figcaption{font-size:12px;line-height:1.8;color:var(--muted);max-width:400px}.principle-download{display:flex;align-items:center;gap:20px;margin-top:26px}.principle-download p{margin:0;max-width:300px}
  .data-table-wrap{overflow:auto;margin:24px 0;max-width:100%}.climate-table{border-collapse:collapse;width:100%;font-size:12px;text-align:left;line-height:1.75}.climate-table caption{text-align:left;font-size:11px;color:var(--muted);margin-bottom:13px}.climate-table th,.climate-table td{border-bottom:1px solid var(--line);padding:14px 15px;vertical-align:top;min-width:125px}.climate-table thead th{background:var(--sage);color:var(--ink);font-weight:600;font-size:10px;letter-spacing:.03em}.climate-table tbody th{font-weight:600;color:var(--ink);min-width:150px}.climate-table td{min-width:200px}.method-detail,.practice-question{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:26px 0;font-size:13px;max-width:100%}.method-detail summary,.practice-question summary{cursor:pointer;font-size:14px;font-weight:550;color:var(--ink);line-height:1.7}.method-detail p,.practice-question p{max-width:850px;margin:18px 0 0}.method-detail .button{margin:5px 0 18px}.method-detail .climate-table td{min-width:85px}.method-detail .climate-table tbody th{min-width:65px}.method-detail .climate-table thead th{min-width:95px}
  .dataset-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 25px;padding:23px 26px;border:1px solid var(--accent-border);border-radius:6px;background:var(--sage);margin:29px 0 0}.dataset-box h3{font-size:20px;margin-bottom:8px}.dataset-box .eyebrow{font-size:9px;margin-bottom:10px}.dataset-box p{font-size:11px;margin-bottom:0;max-width:760px}.dataset-actions{display:flex;flex-direction:column;align-items:center;gap:13px}.dataset-actions label{cursor:pointer;font-size:11px}.dataset-actions .quiet-button{font-size:10px}.dataset-box>.caption{grid-column:1/-1}.dataset-box [role=status]{grid-column:1/-1;color:var(--accent)}.dataset-box [role=status]:empty{display:none}.dataset-actions:has(input:focus-visible) label{outline:3px solid var(--accent);outline-offset:4px}.climate-metrics{margin-top:0;border:1px solid var(--line);border-top:0;padding:20px 0;border-radius:0 0 6px 6px}.climate-metrics strong{font-size:29px}.climate-metrics small{font-size:9px}
  .analysis-step{margin-top:49px;padding-top:29px;border-top:1px solid var(--line)}.analysis-heading{display:flex;align-items:center;gap:21px;margin-bottom:15px}.analysis-heading>span{font-size:10px;letter-spacing:.08em;color:var(--accent);white-space:nowrap}.analysis-heading h3{font-size:24px;margin:0;letter-spacing:-.03em}.analysis-step>p{max-width:850px;font-size:14px}.weather-figure{background:var(--sage);border:1px solid var(--line);border-radius:6px;padding:17px 10px 5px;margin:24px 0 0}.weather-figure svg{width:100%;height:auto}.chart-key{display:flex;gap:22px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin:14px 0 20px}.chart-key>span{display:inline-flex;gap:7px;align-items:center}.chart-key i{display:inline-block;width:18px;height:10px;flex-shrink:0}.key-line{border-top:3px solid var(--accent);height:0!important}.key-dew{border-top:3px solid light-dark(#52748f,#a7c2d8);height:0!important}.key-band,.wind-low{background:light-dark(#7ac5e6,#76c9f0)}.wind-mid{background:light-dark(#8cb4cc,#46728d)}.wind-high{background:var(--accent)}.analysis-step #radiation-chart+.chart-key .key-band{background:light-dark(#8cb4cc,#46728d)}.analysis-step>.evidence-reading{padding:16px 19px;border-left:2px solid var(--accent);background:var(--sage);font-size:13px;margin:19px 0 22px;color:var(--ink)}.chart-toolbar{display:flex;align-items:center;gap:15px;margin-top:27px;font-size:12px}.chart-toolbar select{width:auto;min-width:180px;font-size:12px}.reasoning-example{border:1px solid var(--accent-border);border-radius:6px;padding:24px 27px;background:var(--sage);margin:29px 0}.reasoning-example p:last-child{font-size:18px;line-height:1.7;letter-spacing:-.015em;margin:0;max-width:850px}.reasoning-example .eyebrow{font-size:9px;color:var(--accent)}.stress-sequence{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin:30px 0}.stress-sequence span{font-size:11px;color:var(--accent)}.stress-sequence h3{font-size:18px;margin:8px 0}.stress-sequence p{font-size:13px;max-width:230px;margin:0}.practice-question{margin:0;border-bottom:0;padding:22px 0}.practice-question:last-child{border-bottom:1px solid var(--line)}.studio-steps{padding-left:24px;max-width:800px}.studio-steps li{padding:11px 0 12px 10px;font-size:14px}.studio-steps li::marker{color:var(--accent);font-size:12px}.studio-steps h3{font-size:19px;margin-bottom:8px}.studio-steps p{margin-bottom:10px}.chapter-next{display:flex;justify-content:space-between;gap:20px;padding-top:25px;margin-top:35px;border-top:1px solid var(--line)}.chapter-next>span{font-size:9px;letter-spacing:.1em;color:var(--muted)}.chapter-next a{font-size:13px;color:var(--accent);text-decoration:none}
  .matrix-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin:34px 0 12px}.matrix-heading .caption{margin:0;max-width:640px}
  .principle-matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:7px;background:var(--panel)}.principle-matrix-wrap:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
  .principle-matrix{border-collapse:collapse;width:100%;min-width:980px;table-layout:fixed}.principle-matrix thead th{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);padding:16px 6px 4px;text-align:center}.principle-matrix thead td{width:118px}
  .principle-matrix tbody th{text-align:left;vertical-align:middle;padding:10px 8px 10px 18px;border-top:1px solid var(--line)}.principle-matrix tbody th span{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}.principle-matrix tbody th small{display:block;font-size:10px;font-weight:400;line-height:1.5;color:var(--muted);margin-top:6px}
  .principle-matrix td{padding:0;border-top:1px solid var(--line);vertical-align:top}.matrix-cell{display:flex;flex-direction:column;align-items:center;height:100%;padding:4px 4px 14px;text-decoration:none;color:var(--body);border-radius:4px}.matrix-cell svg{width:100%;height:auto;display:block}.matrix-cell span{font-size:11px;line-height:1.4;text-align:center;padding:0 4px;color:var(--ink)}
  .matrix-cell:hover,.matrix-cell:focus-visible{background:var(--accent-soft)}.matrix-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.matrix-cell:hover span{color:var(--accent)}

  .subsection-heading{font-size:21px;letter-spacing:-.025em;margin:44px 0 0}
  .driver-grid,.factor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:30px 0 8px}
  .factor-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
  .driver-grid article,.factor-grid article{border-top:2px solid var(--accent-border);padding:14px 2px 4px}
  .driver-grid span,.factor-grid span{font-size:9px;letter-spacing:.1em;color:var(--accent)}
  .driver-grid h3{font-size:17px;line-height:1.3;letter-spacing:-.02em;margin:8px 0 9px}
  .factor-grid h4{font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:6px 0 8px}
  .driver-grid p,.factor-grid p{font-size:12.5px;line-height:1.8;margin:0}
  .compare-table th,.compare-table td{min-width:0!important;padding:11px 10px}
  .compare-table tbody th{min-width:130px!important}
  .compare-table tbody th small{display:block;font-weight:400;font-size:10px;color:var(--muted);margin-top:3px}
  .compare-table td:nth-child(2){min-width:150px!important}
  .compare-table td:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .compare-table .quiet-button{white-space:nowrap}
  .principle-detail{border:1px solid var(--accent-border);border-radius:7px;background:var(--panel);margin-top:18px;scroll-margin-top:80px;overflow:hidden}
  .detail-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
  .detail-bar .small-label{font-size:9px;letter-spacing:.1em;color:var(--accent)}
  .detail-nav{display:flex;gap:8px}
  .detail-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .principle-card[hidden],.family-note[hidden]{display:none}
  .principle-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;scroll-margin-top:90px}
  .principle-figure{background:var(--sage);display:flex;align-items:center}
  .principle-figure svg{width:100%;height:auto;display:block}
  .principle-text{padding:22px 22px 20px;display:flex;flex-direction:column}
  .principle-lens{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
  .principle-text h4{font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--ink);margin:0 0 9px}
  .principle-text .mechanism{font-size:11px;font-weight:650;color:var(--accent);margin-bottom:10px}
  .principle-text p{font-size:13px;line-height:1.8;margin-bottom:16px}
  .principle-text a{font-size:10px;color:var(--accent);margin-top:auto;text-decoration:none}
  .family-note{border-left:1px solid var(--line);padding:22px 22px 20px}
  .family-note .eyebrow{font-size:9px;color:var(--accent);margin:0 0 8px}
  .family-note h4{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:0 0 6px}
  .family-note .family-tag{font-size:19px;font-weight:450;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
  .family-note p{font-size:12.5px;line-height:1.8;margin-bottom:18px}
  .family-note .caption{font-size:10.5px;margin-top:-8px}
  .matrix-cell.is-selected{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent-border)}
  .matrix-cell.is-selected span{color:var(--accent);font-weight:600}
  .matrix-row-link{display:block;text-decoration:none;color:inherit;border-radius:4px;padding:4px}
  .matrix-row-link:hover span,.principle-matrix tr.is-family th span{color:var(--accent)}
  .reading-steps{max-width:850px;padding-left:22px;margin:22px 0}
  .reading-steps li{font-size:13.5px;line-height:1.8;padding:4px 0 4px 6px}
  .reading-steps li::marker{color:var(--accent);font-size:12px}
  .key-temp{border-top:3px solid light-dark(#d33f3f,#ef7a7a);height:0!important}
  .key-temp-band{background:light-dark(rgba(211,63,63,.18),rgba(239,122,122,.22))}
  .key-dewpoint{border-top:3px dashed light-dark(#14946a,#3cc796);height:0!important}
  .key-rh{border-top:3px solid light-dark(#2a78d6,#5598e7);height:0!important}
  .key-ghi{background:light-dark(rgba(226,98,15,.2),rgba(240,138,75,.22));border-top:2px solid light-dark(#e2620f,#f08a4b)}
  .key-dni{border-top:3px solid light-dark(#8a3b12,#ffe3cc);height:0!important}
  .key-dhi{border-top:3px dashed light-dark(#b58100,#e3b234);height:0!important}
  .chart-hover{position:relative;cursor:crosshair}
  .chart-tooltip{position:absolute;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:2px;min-width:180px;max-width:290px;padding:9px 11px;border:1px solid var(--line);border-radius:5px;background:var(--panel);box-shadow:0 4px 14px rgba(0,0,0,.12);font-size:11px;line-height:1.5;color:var(--body)}
  .chart-tooltip[hidden]{display:none}
  .chart-tooltip strong{color:var(--ink);font-size:11.5px}
  .chart-tooltip small{color:var(--muted);font-size:10px}
  .hover-guide{stroke:var(--ink);stroke-width:1;opacity:.45;pointer-events:none}
  .variable-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
  .variable-switch .segmented{flex:1 1 480px;flex-wrap:wrap}
  .variable-switch .segmented button{min-width:62px}
  .chart-toolbar label.quiet-button{cursor:pointer}
  .chart-toolbar+.chart-toolbar{margin-top:12px}
  .dataset-actions select{font-size:12px;min-width:230px}
}
@layer responsive {
  @media(max-width:1200px){.driver-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.factor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-body{grid-template-columns:1fr}.family-note{border-left:0;border-top:1px solid var(--line)}}
  @media(max-width:650px){.driver-grid,.factor-grid{grid-template-columns:1fr}.principle-card{grid-template-columns:1fr}.principle-text,.family-note{padding:17px 16px}.principle-text h4{font-size:19px}.detail-bar{padding:10px 14px}.compare-table{font-size:11px}.dataset-actions select{min-width:0;width:100%}.variable-switch .segmented button{min-width:0;flex:1 1 28%}}

  .mobile-chart-note{display:none}
  @media(max-width:650px){.weather-figure{overflow-x:auto}.weather-figure svg{min-width:600px}.mobile-chart-note{display:block;font-size:11px;color:var(--muted)}}
  @media(max-width:1200px){.climate-metrics strong{font-size:25px}}
  @media(max-width:650px){.chapter-route{gap:10px;font-size:10px}.station-figure{grid-template-columns:1fr;gap:13px}.station-figure img{max-width:400px}.principle-download{display:block}.principle-download .caption{margin-top:13px}.climate-table td{min-width:190px}.dataset-box{grid-template-columns:1fr;padding:20px}.dataset-actions{align-items:flex-start;gap:10px}.dataset-box>.caption{grid-column:auto}.dataset-actions .quiet-button{min-height:35px}.climate-metrics strong{font-size:29px}.analysis-heading{display:block}.analysis-heading>span{display:block;margin-bottom:10px}.analysis-heading h3{font-size:24px}.analysis-step{margin-top:35px;padding-top:25px}.analysis-step>p{font-size:13px}.chart-key{gap:10px;font-size:9px}.chart-toolbar{justify-content:space-between;font-size:11px}.chart-toolbar select{min-width:135px;max-width:180px}.weather-figure{padding:10px 2px}.reasoning-example{padding:21px}.reasoning-example p:last-child{font-size:16px}.stress-sequence{grid-template-columns:1fr;gap:23px}.stress-sequence p{max-width:none}.chapter-next{display:block}.chapter-next>span{display:block;margin-bottom:12px}}
  @media(max-width:420px){}
}
@layer print {
  @media print{.course-chapters,.dataset-actions,.chart-toolbar,.variable-switch,.detail-bar,.segmented,.principle-download,.principle-text a,.compare-table button,.chart-tooltip{display:none!important}.principle-card[hidden],.family-note[hidden]{display:grid!important}.family-note[hidden]{display:block!important}.principle-card{break-inside:avoid;border-top:1px solid #ccc}.principle-figure svg{max-height:150pt;width:auto}.principle-matrix-wrap{overflow:visible}.principle-matrix{min-width:0}.weather-figure,.dataset-box,.analysis-heading,.stress-sequence{break-inside:avoid}.weather-figure{max-width:650px}.analysis-step{break-before:auto}.climate-table{font-size:8pt}.climate-table th,.climate-table td{min-width:0!important;padding:7pt}.data-table-wrap{overflow:visible}.station-figure{max-width:550px}.chapter-route,.chapter-next{display:none}.method-detail:not([open]){display:none}.practice-question{break-inside:avoid}.practice-question p{display:block!important}}
}