/* In-post widgets (see post-widgets.js). Every rule that changes the layout is scoped to
   .is-live, so the plain list and the plain <pre> are what a reader without JavaScript gets. */

.post-checklist, .post-copy, .post-filter, .post-tool { margin: 2em 0; }

.post-checklist { background: var(--paper-light); border: 1.5px solid var(--ink); padding: 20px 24px; border-radius: var(--radius); }
.post-checklist > * + * { margin-top: 1em; }
.post-checklist__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.post-checklist__count { margin: 0; color: var(--ink-soft); min-width: 11ch; }
.post-checklist__meter { flex: 1 1 120px; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.post-checklist__meter span { display: block; height: 100%; width: 0; background: var(--teal); }
.post-checklist__reset { font: 400 0.8125rem var(--f-mono); color: var(--ink-soft); background: none; border: 0; padding: 0 4px; min-height: 44px; text-decoration: underline; cursor: pointer; }
.post-checklist__reset:focus-visible, .post-checklist__box input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.post-checklist.is-live ul, .post-checklist.is-live ol { list-style: none; padding-left: 0; margin-bottom: 0; }
.post-checklist.is-live li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; margin: 0; padding: 6px 0; border-top: 1px solid var(--rule); }
/* a numbered list keeps its numbers: the prose refers to "check 4" and "item 8" */
.post-checklist.is-live ol { counter-reset: post-checklist; }
.post-checklist.is-live ol > li { counter-increment: post-checklist; grid-template-columns: 44px auto minmax(0, 1fr); }
.post-checklist.is-live ol > li::before { content: counter(post-checklist) "."; order: 2; padding: 9px 10px 9px 0; font-family: var(--f-mono); font-size: 0.9em; color: var(--ink-soft); }
.post-checklist.is-live ol > li > .post-checklist__box { order: 1; }
.post-checklist.is-live ol > li > .post-checklist__text { order: 3; }
.post-checklist__box { display: grid; place-items: center; width: 44px; min-height: 44px; cursor: pointer; }
.post-checklist__box input { width: 20px; height: 20px; accent-color: var(--teal); margin: 0; cursor: pointer; }
.post-checklist__text { padding: 9px 0; }
.post-checklist__text > :first-child { margin-top: 0; }
.post-checklist__text > :last-child { margin-bottom: 0; }
.post-checklist li.is-done .post-checklist__text { color: var(--ink-soft); }
/* a long identifier in an item must wrap, or the page scrolls sideways on a phone */
.post-checklist code { overflow-wrap: anywhere; }

.post-copy__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.post-copy__said { color: var(--teal); }
.post-copy pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 0.875rem; line-height: 1.55; }

.post-filter__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.post-filter__chip { font: 400 0.8125rem var(--f-mono); letter-spacing: 0.02em; color: var(--ink); background: var(--paper-light); border: 1px solid var(--ink); border-radius: var(--radius); padding: 0 14px; min-height: 44px; cursor: pointer; }
.post-filter__chip[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); }
.post-filter__chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.post-filter__said { margin: 12px 0 0; color: var(--ink-soft); }
.post-filter tr[hidden] { display: none; }
/* a comparison wide enough to filter is wide enough to scroll: keep its cells readable */
.post-filter th, .post-filter td { min-width: 10.5rem; }

.post-tool .tool-app { min-height: 0; }
.post-tool__fallback { margin: 0; }
.post-tool .tool-app.is-capped { overflow: hidden; position: relative; }
.post-tool .tool-app.is-capped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--paper-light)); }
.post-tool__more { margin-top: 12px; }
.post-tool .tool-app:focus { outline: none; }
.post-tool__note { margin-top: 12px; color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) { .post-checklist__meter span { transition: width 200ms var(--ease); } }
@media print { .post-checklist__bar, .post-copy__bar, .post-filter__bar, .post-filter__said, .post-tool { display: none; }
  .post-filter tr[hidden] { display: table-row; } }