/* Carburettor icing article: the risk chart widget and the static figures.
 * Shares tokens with home.css / article.css. */
.widget.ci { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
.ci-left { display: grid; gap: 12px; min-width: 0; }
.ci-metar { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--ink-soft); }
.ci-metar input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); font: 600 14px var(--mono); text-transform: uppercase; }
.ci-metar input:focus { outline: 2px solid var(--magenta); outline-offset: 1px; }
.ci-msg { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--ink-soft); }
.ci-msg.warn { color: var(--magenta); font-weight: 600; }
.ci-out { grid-template-columns: 1fr; }
.ci-out dd { font-size: 17px; }
.ci-out .lv-3 { color: #c53030; }
.ci-out .lv-2 { color: #c05621; }
.ci-out .lv-1 { color: #b7791f; }
.ci-out .lv-0 { color: #2f855a; }
.ci-adv { font-weight: 600; color: var(--ink); }
.ci-right svg, .fig svg.ci-static { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.ci-note { grid-column: 1 / -1; }

.ci-grid { stroke: var(--rule); stroke-width: 1; }
.ci-axis { stroke: var(--ink-soft); stroke-width: 1.2; fill: none; }
.ci-sat { stroke: var(--ink); stroke-width: 1.8; fill: none; }
.ci-rh { stroke: var(--ink); stroke-width: 0.9; fill: none; opacity: 0.75; }
.ci-t { font: 500 11px var(--mono); fill: var(--ink-soft); }
.ci-zone { stroke: none; }
.ci-t.ci-rhl { font-size: 9px; }
/* the leaflet's colours: yellow light, orange serious in descent,
   green moderate cruise + serious descent, blue serious at any power */
.ci-zone.z0, .ci-legend .z0 { fill: #ffdd18; background: #ffdd18; }
.ci-zone.z1, .ci-legend .z1 { fill: #fbb040; background: #fbb040; }
.ci-zone.z2, .ci-legend .z2 { fill: #00a650; background: #00a650; }
.ci-zone.z3, .ci-legend .z3 { fill: #1475bc; background: #1475bc; }
.ci-zone { opacity: 0.9; }
.ci-dot circle { fill: var(--magenta); stroke: var(--paper); stroke-width: 2.5; }

.prose .ci-legend { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.prose .ci-legend li { margin: 0; font-size: 13px; line-height: 1.35; display: flex; gap: 8px; align-items: center; }
.ci-legend i { flex: none; display: inline-block; width: 16px; height: 12px; border-radius: 3px; }

/* figure: what happens inside the carburettor */
.cb-body { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; }
.cb-air { stroke: var(--blue); stroke-width: 3; fill: none; stroke-linecap: round; }
.cb-fuel { fill: var(--magenta); opacity: 0.85; }
.cb-ice { fill: #9cc8f0; stroke: #2b6cb0; stroke-width: 1; }
.cb-butterfly { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.cb-ah { fill: var(--blue); }
.cb-pipe { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.cb-t { font: 500 12px var(--mono); fill: var(--ink-soft); }
.cb-th { font: 600 13px var(--mono); fill: var(--ink); }
.cb-tc { font: 600 13px var(--mono); fill: var(--magenta); }
.cb-tb { font: 600 13px var(--mono); fill: var(--blue); }

/* figure: the RPM trace when carb heat goes on */
.rp-axis { stroke: var(--ink-soft); stroke-width: 1.2; fill: none; }
.rp-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.rp-line { stroke: var(--blue); stroke-width: 3; fill: none; stroke-linejoin: round; }
.rp-mark { stroke: var(--magenta); stroke-width: 1.4; stroke-dasharray: 5 4; }
.rp-t { font: 500 12px var(--mono); fill: var(--ink-soft); }
.rp-tc { font: 600 12px var(--mono); fill: var(--magenta); }
.rp-th { font: 600 13px var(--mono); fill: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ci-out .lv-3 { color: #f5a3a3; }
  :root:not([data-theme="light"]) .ci-out .lv-2 { color: #f6ad7b; }
  :root:not([data-theme="light"]) .ci-out .lv-1 { color: #f2c66d; }
  :root:not([data-theme="light"]) .ci-out .lv-0 { color: #8fd8a8; }
}
:root[data-theme="dark"] .ci-out .lv-3 { color: #f5a3a3; }
:root[data-theme="dark"] .ci-out .lv-2 { color: #f6ad7b; }
:root[data-theme="dark"] .ci-out .lv-1 { color: #f2c66d; }
:root[data-theme="dark"] .ci-out .lv-0 { color: #8fd8a8; }

@media (max-width: 760px) {
  .widget.ci { grid-template-columns: minmax(0, 1fr); }
  .ci-out { grid-template-columns: 1fr; }
}