/* Use-case -> task-suite widget. Tokens locked by
   docs/superpowers/specs/2026-06-12-use-case-task-suite-widget-design.md */

/* relative url()s: resolved against this file's /css/ directory, so they
   survive subpath hosting (GitHub Pages serves the site under /art-of-evals/) */
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/Quicksand-latin.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Newsreader-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Newsreader-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/JetBrainsMono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/JetBrainsMono-500-latin.woff2) format('woff2'); }

.ucw { max-width: 1000px; width: 100%; margin: 2rem auto; background: #fcfbf7;
  border-radius: 12px; overflow: hidden; color: #16140f;
  font-family: 'Quicksand', system-ui, sans-serif; }
.ucw-canvas { padding: 44px 48px 8px; }

.ucw-orchrow { display: flex; justify-content: center; }
.ucw-orch { display: flex; align-items: center; gap: 14px; background: #efece1;
  border-radius: 14px; padding: 14px 22px; }
.ucw-hero-nm { font-family: 'Newsreader', Georgia, serif; font-size: 19px;
  font-weight: 600; color: #16140f; }

.ucw-maplab { text-align: center; font-size: 12.5px; font-weight: 500; color: #8f8c80;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .4s ease, opacity .4s ease, margin-top .4s ease; }
.ucw[data-step="2"] .ucw-maplab { max-height: 24px; opacity: 1; margin-top: 8px; }

.ucw-drop { display: flex; justify-content: center; height: 30px; margin: 2px 0 4px; }
.ucw-drop span { border-left: 1.5px dotted #c4bfb3; }

.ucw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ucw-fam { border: 1px dotted #b6b0a4; border-radius: 5px; padding: 16px;
  transition: border-color .4s, background .4s; }
.ucw-nm { font-size: 15px; font-weight: 600; color: #16140f; max-height: 44px;
  overflow: hidden; transition: max-height .5s ease, opacity .4s ease; }
.ucw[data-step="2"] .ucw-nm { max-height: 0; opacity: 0; }

.ucw-capslist { display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .6s ease, opacity .5s ease, margin-top .6s ease; }
.ucw[data-step="2"] .ucw-capslist { max-height: var(--ucw-caps-h, 320px); opacity: 1;
  margin-top: 2px; }
.ucw-chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px;
  color: #4a463d; background: #f4f1e8; border-radius: 7px; padding: 6px 12px; }
.ucw-cnt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px;
  color: #8f8c80; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .5s ease, opacity .5s ease, margin-top .5s ease; }
.ucw[data-step="3"] .ucw-cnt { max-height: 40px; opacity: 1; margin-top: 8px; }

/* caption + controls bar */
.ucw-bar { display: flex; align-items: center; gap: 18px; padding: 22px 48px 28px; }
.ucw-caption { flex: 1; font-size: 14px; font-weight: 500; color: #403d34;
  line-height: 1.5; }
.ucw-dots { display: flex; gap: 7px; }
.ucw-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #b6b0a4;
  transition: all .3s; }
.ucw-dots i.ucw-on { background: #6e6a62; border-color: #6e6a62; }
.ucw-nav { display: flex; gap: 8px; }
.ucw-nav button { width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #b6b0a4; background: transparent; color: #403d34; font-size: 15px;
  cursor: pointer; font-family: inherit; transition: all .25s; }
.ucw-nav button:hover:not(:disabled),
.ucw-nav button:focus-visible:not(:disabled) { border-color: #6e6a62; }
.ucw-nav button:disabled { opacity: .3; cursor: default; }

/* responsive: keyed to the widget's own width, not the viewport — the theme's
   article column (~672px) is far narrower than desktop viewports, and
   viewport-keyed rules left the 3-column grid clipped inside it. Thresholds:
   3 columns need ~770px (210px chips + 32px box padding, 22px gaps); 2 columns
   need ~548px. The standalone diagrams/ copy keeps viewport-keyed rules on its
   1000px canvas. */
.ucw { container-type: inline-size; }
@container (max-width: 769px) {
  .ucw-canvas { padding: 32px 24px 8px; }
  .ucw-bar { padding: 18px 24px 24px; }
  .ucw-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@container (max-width: 559px) {
  .ucw-grid { grid-template-columns: 1fr; }
  .ucw-bar { flex-wrap: wrap; }
  .ucw-caption { flex-basis: 100%; }
}
@media (pointer: coarse) {
  .ucw-nav button { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ucw, .ucw * { transition: none !important; }
}