/* Winter flying article: lift-curve figure, checklist and go / no-go widgets.
 * Shares tokens with home.css / article.css. */
.widget.wf { grid-template-columns: 1fr; }
.wf-bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.wf-bar i { display: block; height: 100%; width: 0; background: var(--magenta); transition: width .25s ease; }
.wf-count { font: 600 14px var(--mono); margin: 0; }
.wf-group { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px 6px; margin: 0; background: var(--paper); }
.wf-group legend { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); padding: 0 6px; }
.wf-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px dashed var(--rule); font-size: 16px; line-height: 1.45; cursor: pointer; }
.wf-group .wf-item:first-of-type { border-top: 0; }
.wf-item input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--magenta); }
.wf-item input:checked + span { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-soft) 50%, transparent); }
.wf-reset, .wf-next { justify-self: start; font: 600 15px var(--body); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.wf-next { background: var(--ink); color: var(--paper); }
.wf-sit { font-size: 18px; line-height: 1.5; margin: 0; }
.wf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-opt { font: 600 15px var(--body); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.wf-opt:not([disabled]):hover { border-color: var(--ink); }
.wf-opt.ok { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.wf-opt.bad { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.wf-opt[disabled] { cursor: default; }
.wf-why.ok { border-left: 4px solid #1f7a4d; padding-left: 12px; }
.wf-score { font: 600 20px var(--display, var(--body)); margin: 0; }
.wf-reset:focus-visible, .wf-next:focus-visible, .wf-opt:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
/* Lift-curve figure */
.lc-axis { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.lc-grid { stroke: var(--rule); stroke-width: 1; }
.lc-clean { fill: none; stroke: var(--blue); stroke-width: 3; }
.lc-frost { fill: none; stroke: var(--magenta); stroke-width: 3; stroke-dasharray: 7 5; }
.lc-dot { fill: var(--paper); stroke-width: 2.5; }
.lc-dot.c { stroke: var(--blue); } .lc-dot.f { stroke: var(--magenta); }
.lc-lbl-c { fill: var(--blue); font: 600 13px var(--mono); }
.lc-lbl-f { fill: var(--magenta); font: 600 13px var(--mono); }
.lc-drop { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 3 3; }
.prose .fig.lc-fig svg { max-width: 520px; margin: 0 auto; }
@media (max-width: 600px) {
  .wf-opt { flex: 1 1 100%; text-align: left; }
  .wf-item { font-size: 15px; }
}
.w-note.wf-why { color: var(--ink); font-weight: 400; font-size: 16px; line-height: 1.5; border-left: 4px solid var(--magenta); padding-left: 12px; }
.w-note.wf-why.ok { border-left-color: #1f7a4d; }
.w-note.wf-why strong { color: var(--magenta); }
.w-note.wf-why.ok strong { color: #1f7a4d; }
@media (prefers-color-scheme: dark) { .w-note.wf-why.ok strong { color: #5fc493; } }