/* P2 visual redesign (board module 10): pictures first, fewer words.
   Hero illustration, the 3-step strip, the example result card, the result summary (status ring + one ring per
   requirement + cost and time), the plan timeline, and folded detail sections. Dark theme only, Morpheus tokens.
   Status colours (text 4.5:1 or more on --m-panel, marks 3:1 or more): green #66ffbb / #2fbf71, red #ff8888 / #e5534b,
   amber #ffd166, blue #7cc4ff, purple #c9a7ff, grey --m-text-3. A colour never stands alone: every mark carries an
   icon and every verdict its words. */

:root {
  --v-ok: #2fbf71;
  --v-ok-text: #66ffbb;
  --v-bad: #e5534b;
  --v-bad-text: #ff8888;
  --v-unk: #ffd166;
  --v-you: #7cc4ff;
  --v-mine: #c9a7ff;
  --v-none: #8090a8;
  --v-surface: #111128;
  --v-surface-2: #15152f;
  --v-line: #2a2a4a;
  --v-radius: 14px;
}

/* ── shared: icon in a circle ─────────────────────────────────────── */
.v-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--v-none);
  color: var(--v-none);
  flex: none;
  font-size: 0.9rem;
}
.v-ring .m-icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
.v-ring-ok { background: var(--v-ok); border-color: var(--v-ok); color: #06150d; }
.v-ring-code { border-color: var(--v-ok); color: var(--v-ok-text); }
.v-ring-ai { border-color: var(--v-ok); border-style: dashed; color: var(--v-ok-text); }
.v-ring-you { border-color: var(--v-you); color: var(--v-you); }
.v-ring-mine { border-color: var(--v-mine); color: var(--v-mine); }
.v-ring-plan { border-color: var(--v-none); border-style: dashed; color: var(--m-text-2); }
.v-ring-none { border-color: var(--v-none); color: var(--v-none); }
.v-ring-bad { background: var(--v-bad); border-color: var(--v-bad); color: #fff; }
.v-ring-unk { background: var(--v-unk); border-color: var(--v-unk); color: #1a1400; }

/* ── home and landing: hero ───────────────────────────────────────── */
.v-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .v-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; }
}
.v-hero-title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.2px;
  margin: 0 0 1rem;
  color: var(--m-text);
  max-width: 22ch;
}
:lang(zh) .v-hero-title { max-width: 16em; }
.v-hero-art { display: flex; justify-content: center; }
.v-hero-art svg { width: 100%; max-width: 340px; max-height: 240px; height: auto; }
@media (max-width: 991.98px) {
  .v-hero-art { order: -1; }
  .v-hero-art svg { max-width: 220px; max-height: 110px; }
}
.v-art-paper { fill: #15152f; stroke: #3a3a5c; stroke-width: 1.5; }
.v-art-head { fill: #2a2a4a; }
.v-art-line { fill: #3a3a5c; }
.v-art-line-bad { fill: rgba(229, 83, 75, 0.35); }
.v-art-band-bad { fill: rgba(229, 83, 75, 0.12); }
.v-art-ok { fill: var(--v-ok); }
.v-art-bad { fill: var(--v-bad); }
.v-art-unk { fill: var(--v-none); }
.v-art-mark { fill: none; stroke: #0a0a1a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v-art-mark-light { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v-art-lens { fill: none; stroke: var(--m-green); stroke-width: 4; }
.v-art-lens-glass { fill: rgba(0, 255, 136, 0.08); }
.v-art-glow { fill: rgba(0, 255, 136, 0.06); }
.v-art-handle { fill: none; stroke: var(--m-green); stroke-width: 9; stroke-linecap: round; }
.v-art-dot { fill: #0a0a1a; }

/* ── home and landing: the 3-step strip ───────────────────────────── */
.v-steps {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.5rem;
  flex-wrap: nowrap;
}
.v-steps > li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: none;
  color: var(--m-text);
  font-weight: 600;
}
.v-steps > li + li::before {
  content: "";
  width: clamp(1rem, 4vw, 3rem);
  height: 2px;
  background: linear-gradient(90deg, var(--v-line), var(--m-green));
  border-radius: 2px;
  flex: none;
}
.v-steps-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid var(--m-border);
  color: var(--m-green);
  flex: none;
}
.v-steps-ic .m-icon { width: 1.35rem; height: 1.35rem; }
.v-steps-n { color: var(--m-text-3); font-weight: 600; margin-right: 0.15rem; }
@media (max-width: 420px) {
  .v-steps { gap: 0.35rem; }
  .v-steps > li { gap: 0.4rem; font-size: 0.95rem; }
  .v-steps-ic { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
  .v-steps-n { display: none; }
}

/* ── home and landing: the form card ──────────────────────────────── */
.v-form-card {
  background: var(--v-surface);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 1.25rem;
}
@media (min-width: 768px) { .v-form-card { padding: 1.5rem; } }
.v-wait { color: var(--m-text-2); display: inline-flex; align-items: center; gap: 0.35rem; }

/* ── home and landing: the example result ─────────────────────────── */
.v-below {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.75rem;
}
@media (min-width: 992px) { .v-below { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.v-example { margin: 0; }
.v-example-card {
  background: linear-gradient(160deg, #15152f 0%, #111128 100%);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.v-example-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--v-bad-text);
}
.v-example-list { list-style: none; padding: 0; margin: 0; }
.v-example-list > li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--v-line);
  max-width: none;
}
.v-example-list .v-ring { width: 1.5rem; height: 1.5rem; }
.v-example-list .v-ring .m-icon { width: 0.85rem; height: 0.85rem; }
.v-example-req { color: var(--m-text); font-weight: 600; min-width: 0; }
.v-example-v { color: var(--m-text-2); font-size: 0.875rem; margin-left: auto; padding-left: 0.5rem; white-space: nowrap; }
.v-example-v-bad { color: var(--v-bad-text); font-weight: 700; }
.v-example-cap { color: var(--m-text-3); font-size: 0.875rem; margin-top: 0.5rem; }
.v-second { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.v-second-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: 12px; background: rgba(124, 196, 255, 0.1); border: 1px solid rgba(124, 196, 255, 0.35);
  color: var(--v-you); flex: none;
}
.v-second-ic .m-icon { width: 1.35rem; height: 1.35rem; }

/* ── landing page section ─────────────────────────────────────────── */
.v-landing {
  padding: 2.5rem 0 3rem;
  background: radial-gradient(ellipse at 75% 20%, rgba(0, 255, 136, 0.06) 0%, transparent 55%),
              linear-gradient(135deg, #0a0a1a 0%, #0d1a2a 50%, #0a0a1a 100%);
}
@media (max-width: 767.98px) { .v-landing { padding: 1.25rem 0 2rem; } }
.v-second-block .hero-subtitle { margin-left: 0; }
.v-second-art {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--v-surface);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 1rem 1.25rem;
}
.v-second-art > svg { width: 6.5rem; height: auto; flex: none; }
@media (max-width: 420px) { .v-second-art > svg { width: 4.5rem; } }

/* ── planner page ─────────────────────────────────────────────────── */
.v-plan-hero { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.v-plan-hero svg { width: 7.5rem; height: auto; flex: none; }
@media (max-width: 575.98px) { .v-plan-hero svg { width: 4.5rem; } }
.v-plan-hero h1 { margin-bottom: 0.35rem; }
.v-adv {
  background: var(--v-surface);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  margin-bottom: 1rem;
}
.v-adv > summary { padding: 0.75rem 1rem; }
.v-adv > .v-adv-body { padding: 0 1rem 1rem; }

/* ── folded sections (details) ────────────────────────────────────── */
.v-fold > summary, .v-tl-group > summary, .v-adv > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--m-text-2);
  font-weight: 600;
}
.v-fold > summary::-webkit-details-marker, .v-tl-group > summary::-webkit-details-marker,
.v-adv > summary::-webkit-details-marker { display: none; }
.v-fold > summary::before, .v-tl-group > summary::before, .v-adv > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--m-dur) var(--m-ease);
  flex: none;
  margin: 0 0.25rem;
}
.v-fold[open] > summary::before, .v-tl-group[open] > summary::before, .v-adv[open] > summary::before {
  transform: rotate(45deg);
}
.v-fold > summary:hover, .v-tl-group > summary:hover, .v-adv > summary:hover { color: var(--m-text); }
details.card.v-fold > summary { padding: 0.5rem 1rem; }

/* ── result page: summary ─────────────────────────────────────────── */
.v-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.5rem;
  background: var(--v-surface);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .v-sum { grid-template-columns: 11rem minmax(0, 1fr); } .v-sum.v-sum-none { grid-template-columns: minmax(0, 1fr); } }
.v-sum-status { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .v-sum-status { flex-direction: column; align-items: flex-start; } }
.v-donut-wrap { position: relative; width: 6.5rem; height: 6.5rem; flex: none; }
.v-donut { width: 6.5rem; height: 6.5rem; flex: none; display: block; }
.v-donut-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--m-text-2);
}
.v-donut-icon .m-icon { width: 2rem; height: 2rem; stroke-width: 2.5; }
.v-donut-icon-ok { color: var(--v-ok-text); }
.v-donut-icon-bad { color: var(--v-bad-text); }
.v-donut-icon-unk { color: var(--v-unk); }
.v-sum-body { min-width: 0; display: grid; gap: 0.75rem; }
.v-donut-track { fill: none; stroke: var(--v-line); stroke-width: 3.6; }
.v-donut-seg { fill: none; stroke-width: 3.6; }
.v-donut-ok { stroke: var(--v-ok); }
.v-donut-soft { stroke: #8fd9b6; stroke-width: 2.2; }
.v-donut-bad { stroke: var(--v-bad); }
.v-donut-unk { stroke: var(--v-unk); }
.v-donut-mine { stroke: var(--v-mine); }
.v-donut-none { stroke: var(--v-none); }
.v-sum-big { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin: 0; }
.v-sum-ok .v-sum-big { color: var(--v-ok-text); }
.v-sum-bad .v-sum-big { color: var(--v-bad-text); }
.v-sum-unk .v-sum-big { color: var(--v-unk); }
.v-sum-part .v-sum-big { color: var(--m-text); }
.v-sum-sub { color: var(--m-text-2); margin: 0.15rem 0 0; }
.v-sum-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }   /* K-152: 8 px between rows */
.v-sum-list > li { max-width: none; }
.v-sum-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
  color: var(--m-text);
  text-decoration: none;
}
.v-sum-row:hover { background: rgba(255, 255, 255, 0.04); color: var(--m-text); }
.v-sum-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.v-sum-v { color: var(--m-text-2); font-size: 0.875rem; margin-left: auto; text-align: right; flex: 0 1 auto; }
@media (max-width: 575.98px) {
  .v-sum-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.65rem; row-gap: 0.1rem; align-items: start; }
  .v-sum-v { grid-column: 2; margin-left: 0; text-align: left; }
}
.v-sum-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.v-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--v-surface-2);
  border: 1px solid var(--v-line);
  color: var(--m-text-2);
  font-size: 0.875rem;
}
.v-chip strong { color: var(--m-text); font-weight: 700; }

/* ── result page: plan timeline ───────────────────────────────────── */
.v-tl-wrap { margin: 0.5rem 0 1.25rem; }
.v-tl-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--m-text-2); font-size: 0.875rem;
  margin: 0 0 0.6rem; padding: 0; list-style: none; }
.v-tl-legend > li { display: inline-flex; align-items: center; gap: 0.4rem; max-width: none; }
.v-tl-legend .v-dot { position: static; }
.v-tl-group { margin-bottom: 0.5rem; }
.v-tl-group > summary { color: var(--m-text); }
.v-tl-count { color: var(--m-text-3); font-weight: 400; }
.v-tl-minis { display: inline-flex; gap: 0.2rem; margin-left: 0.25rem; }
.v-tl-mini { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--v-none); }
.v-tl-mini-bad { background: var(--v-bad); }
.v-tl-mini-unk { background: var(--v-unk); }
.v-tl { list-style: none; margin: 0; padding: 0 0 0 0.25rem; position: relative; }
.v-tl > li {
  position: relative;
  padding: 0.35rem 0 0.35rem 2.4rem;
  max-width: calc(70ch + 2.4rem);  /* K-152: the step text stops at about 70 characters per line */
}
.v-tl > li + li { margin-top: 0.5rem; }   /* K-152: 8 px between steps */
.v-tl > li::before {             /* the line between dots (it runs on through the 8 px gap to the next step) */
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 0;
  bottom: -0.5rem;
  width: 2px;
  background: var(--v-line);
}
.v-tl > li:first-child::before { top: 0.9rem; }
.v-tl > li:last-child::before { bottom: calc(100% - 0.9rem); }
.v-dot {
  position: absolute;
  left: 0.3rem;
  top: 0.4rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--v-surface);
  border: 2px solid var(--v-none);
  color: var(--v-none);
  flex: none;
}
.v-dot .m-icon { width: 0.7rem; height: 0.7rem; stroke-width: 3; }
.v-dot-none { width: 0.7rem; height: 0.7rem; left: 0.53rem; top: 0.62rem; background: var(--v-none); }
.v-dot-ok { background: var(--v-ok); border-color: var(--v-ok); color: #06150d; }
.v-dot-ai { border-color: var(--v-ok); border-style: dashed; color: var(--v-ok-text); }
.v-dot-you { border-color: var(--v-you); color: var(--v-you); }
.v-dot-bad { background: var(--v-bad); border-color: var(--v-bad); color: #fff; width: 1.35rem; height: 1.35rem; left: 0.2rem; top: 0.3rem; }
.v-dot-unk { background: var(--v-unk); border-color: var(--v-unk); color: #1a1400; width: 1.35rem; height: 1.35rem; left: 0.2rem; top: 0.3rem; }
.v-tl-step { color: var(--m-text); }
.v-tl-n { color: var(--m-text-3); font-size: 0.8rem; margin-right: 0.35rem; font-variant-numeric: tabular-nums; }
.v-tl-bad .v-tl-step, .v-tl-unk .v-tl-step { font-weight: 600; }
.v-tl-bad { background: linear-gradient(90deg, rgba(229, 83, 75, 0.12), transparent 70%); border-radius: 8px; }
.v-tl-unk { background: linear-gradient(90deg, rgba(255, 209, 102, 0.1), transparent 70%); border-radius: 8px; }
.v-tl-marks { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.v-mark {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; border: 1px solid;
}
.v-mark-bad { color: var(--v-bad-text); border-color: rgba(229, 83, 75, 0.6); background: rgba(229, 83, 75, 0.1); }
.v-mark-unk { color: var(--v-unk); border-color: rgba(255, 209, 102, 0.55); background: rgba(255, 209, 102, 0.08); }
.v-plan-full { margin-top: 0.25rem; }

/* ── result page: the requirements card, one row per requirement ──── */
#requirements .v-req { position: relative; padding: 0.55rem 0 0.55rem 2.5rem; list-style: none; max-width: none;
  border-top: 1px solid var(--v-line);
  /* K-152: the row's line runs across the card; its text stops at about 70 characters per line */
  padding-right: max(0px, calc(100% - 70ch - 2.5rem)); }
#requirements [data-code-check] { margin-top: 0.5rem; }   /* K-152: 8 px between "I think this violates" and "Evidence" */
#requirements .v-req:first-child { border-top: 0; }
#requirements .v-req > .v-ring { position: absolute; left: 0.1rem; top: 0.5rem; }
#requirements ul.v-req-list { padding-left: 1rem; }
#requirements .v-evid > summary { min-height: 32px; font-weight: 400; font-size: 0.875rem; }
@media (max-width: 767.98px) { #requirements .v-evid > summary { min-height: 44px; } }

/* motion: the only motion here is the chevron turn and hover colour, both off under reduced motion
   (morpheus.css sets every transition to 0.01 ms there) */
@media (prefers-reduced-motion: reduce) {
  .v-fold > summary::before, .v-tl-group > summary::before, .v-adv > summary::before { transition: none; }
}
.v-art-thin { stroke-width: 3; }
.v-art-mark-sm { stroke-width: 1.8; }
.v-dash-check { background: var(--v-surface); border: 1px solid var(--v-line); border-radius: var(--v-radius); padding: 0.75rem 1rem; }

/* the strip inside the hero needs no space of its own below; phones get shorter boxes so the button shows sooner */
.v-hero .v-steps { margin-bottom: 0; }
@media (max-width: 767.98px) {
  .v-hero { gap: 1rem; margin-bottom: 1rem; }
  .v1-check-form textarea.form-control { height: 8.5rem; }
}
@media (max-width: 575.98px) { .v-dash-check .v-steps-ic { display: none; } }
.v-sum-soft.v-sum-ok .v-sum-big, .v-sum-soft .v-donut-icon-ok { color: #8fd9b6; }

/* ── K-152 ─────────────────────────────────────────────────────────── */
/* the one sentence under the check page's promise that names who decides each verdict */
.v-hero-sub { color: var(--m-text-2); font-size: 1.05rem; line-height: 1.5; margin: -0.25rem 0 1rem; max-width: 60ch; }
:lang(zh) .v-hero-sub { max-width: 32em; }
/* who decided a violated or unclear verdict ("· AI judgment"): the words wrap as one piece */
#requirements [data-decider] { white-space: nowrap; }
/* phones: the pictures' own words are body text at 16 px (morpheus.css sets .small / small to 16 px there too) */
@media (max-width: 767.98px) {
  .v-example-v, .v-example-cap, .v-sum-v, .v-chip, .v-tl-legend, .v-mark, .v-steps > li { font-size: 1rem; }
  .v-tl-n { font-size: 0.875rem; }
  .v-hero-sub { font-size: 1rem; }
  /* the result page's text blocks that carry an inline smaller size (85-95 %): the plan text, what you asked, the
     quick-draft note and the notice boxes. !important only to beat the inline style, and only on phones. */
  #plan-rendered, [data-task-fold] > .card-body, #v05-refinement-card p.text-muted,
  main .alert[style*="font-size"] { font-size: 1rem !important; }
}

/* ── K-182: the result page is the plan ───────────────────────────────
   UI UX Pro Max checks used: colour never alone (every chip and mark has an icon and words); chips stay on one line
   with a shrinking name (the full name is in the chip's accessible name and on the plan line); 44 px tap targets with
   8 px gaps; plan text 16 px+ at line-height 1.5; visible label on the number field; reduced motion respected. */
.pf { margin: 0 0 1.25rem; }
.pf-head { margin-bottom: 1rem; }
.pf-title { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin: 0 0 0.35rem; color: var(--m-text);
  text-wrap: balance; overflow-wrap: anywhere; }
.pf-sub { color: var(--m-text-2); margin: 0 0 0.5rem; font-size: 1rem; }
.pf-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.85rem;
  padding: 0.6rem 0.85rem; border-radius: 12px; border: 1px solid var(--v-line); background: var(--v-surface);
  font-size: 1.1rem; line-height: 1.4; }
.pf-status strong { font-weight: 800; }
.pf-status-ic { display: inline-flex; width: 1.9rem; height: 1.9rem; border-radius: 50%; align-items: center;
  justify-content: center; flex: none; }
.pf-status-ic .m-icon { width: 1.1rem; height: 1.1rem; stroke-width: 3; }
.pf-status-bad { border-color: rgba(229, 83, 75, 0.6); }
.pf-status-bad strong { color: var(--v-bad-text); }
.pf-status-bad .pf-status-ic { background: var(--v-bad); color: #fff; }
.pf-status-unk { border-color: rgba(255, 209, 102, 0.55); }
.pf-status-unk strong { color: var(--v-unk); }
.pf-status-unk .pf-status-ic { background: var(--v-unk); color: #1a1400; }
.pf-status-ok { border-color: rgba(47, 191, 113, 0.55); }
.pf-status-ok strong { color: var(--v-ok-text); }
.pf-status-ok .pf-status-ic { background: var(--v-ok); color: #06150d; }
.pf-status-none .pf-status-ic, .pf-status-mine .pf-status-ic { border: 2px solid var(--v-none); color: var(--v-none); }
.pf-next { color: var(--m-text-2); font-weight: 400; }
.pf-go { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 0.75rem; margin-left: auto;
  border-radius: 10px; border: 1px solid var(--v-line); color: var(--m-text); text-decoration: none; font-size: 1rem; }
.pf-go:hover { border-color: var(--m-border-hover); color: var(--m-text); }
.pf-go .m-icon { width: 1rem; height: 1rem; }

.pf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; }
.pf-chips > li { max-width: 100%; min-width: 0; }
.pf-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; max-width: 100%; min-width: 0;
  padding: 0.25rem 0.75rem 0.25rem 0.45rem; border-radius: 999px; border: 1.5px solid var(--v-line);
  background: var(--v-surface-2); color: var(--m-text); text-decoration: none; font-size: 0.95rem; white-space: nowrap;
  cursor: pointer; list-style: none; }
.pf-chip::-webkit-details-marker { display: none; }
.pf-chip:hover { color: var(--m-text); border-color: var(--m-border-hover); }
.pf-chip-ic { display: inline-flex; width: 1.4rem; height: 1.4rem; border-radius: 50%; align-items: center;
  justify-content: center; flex: none; border: 2px solid var(--v-none); color: var(--v-none); }
.pf-chip-ic .m-icon, .pf-chip > .m-icon { width: 0.85rem; height: 0.85rem; stroke-width: 3; }
.pf-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 18em; }
.pf-chip-num { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.pf-chip-num::before { content: "·"; margin-right: 0.35rem; color: var(--m-text-3); font-weight: 400; }
.pf-chip-state { flex: none; font-weight: 700; }
.pf-chip-ok, .pf-chip-ai, .pf-chip-plan { border-color: rgba(47, 191, 113, 0.55); }
.pf-chip-ok .pf-chip-ic, .pf-chip-ai .pf-chip-ic, .pf-chip-plan .pf-chip-ic { background: var(--v-ok); border-color: var(--v-ok); color: #06150d; }
.pf-chip-ai, .pf-chip-plan { border-style: dashed; }
.pf-chip-you { border-color: rgba(124, 196, 255, 0.6); }
.pf-chip-you .pf-chip-ic { background: var(--v-you); border-color: var(--v-you); color: #04121f; }
.pf-chip-bad { border-color: var(--v-bad); background: rgba(229, 83, 75, 0.12); }
.pf-chip-bad .pf-chip-ic { background: var(--v-bad); border-color: var(--v-bad); color: #fff; }
.pf-chip-bad .pf-chip-state { color: var(--v-bad-text); }
.pf-chip-unk { border-color: var(--v-unk); background: rgba(255, 209, 102, 0.1); }
.pf-chip-unk .pf-chip-ic { background: var(--v-unk); border-color: var(--v-unk); color: #1a1400; }
.pf-chip-unk .pf-chip-state { color: var(--v-unk); }
.pf-chip-none .pf-chip-state { color: var(--m-text-2); }
.pf-chip-mine { border-color: var(--v-mine); }
.pf-chip-mine .pf-chip-ic { border-color: var(--v-mine); color: var(--v-mine); }
.pf-more > summary { list-style: none; }
.pf-more[open] > summary { margin-bottom: 0.5rem; }
.pf-chips-inner { margin: 0; }

.pf-tag { display: inline-flex; align-items: center; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.85rem;
  font-weight: 600; border: 1px solid var(--v-line); color: var(--m-text-2); background: var(--v-surface); white-space: nowrap; }
.pf-tag-you { color: var(--v-you); border-color: rgba(124, 196, 255, 0.5); }
.pf-tag-none { color: var(--m-text); border-color: var(--v-none); }
.pf-tag-ai { color: var(--m-text-2); border-style: dashed; }
.pf-tag-bad { color: var(--v-bad-text); border-color: rgba(229, 83, 75, 0.5); }
.pf-tag-unk { color: var(--v-unk); border-color: rgba(255, 209, 102, 0.5); }

.pf-chip-note { margin: 0.25rem 0 0.5rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--v-none);
  background: var(--v-surface); border-radius: 0 10px 10px 0; font-size: 1rem; line-height: 1.5; }
.pf-chip-note p { margin: 0; }
.pf-chip-note.pf-why-bad { border-left-color: var(--v-bad); }
.pf-chip-note.pf-why-unk { border-left-color: var(--v-unk); }
.pf-chip-note a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; }

.pf-plan { border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-surface);
  padding: 0.5rem 0.75rem; }
.pf-plan-text { white-space: pre-wrap; font-size: 1rem; line-height: 1.6; padding: 0.75rem 1rem; color: var(--m-text); }
.pf-group > summary { min-height: 44px; display: flex; align-items: center; gap: 0.4rem; font-weight: 700;
  color: var(--m-text); cursor: pointer; padding: 0.25rem 0; }
.pf-count { color: var(--m-text-3); font-weight: 400; }
.pf-lines { list-style: none; margin: 0; padding: 0; }
.pf-line, .pf-gap { padding: 0.55rem 0.5rem; border-top: 1px solid var(--v-line); max-width: none; }
.pf-lines > li:first-child { border-top: 0; }
.pf-row { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); column-gap: 0.85rem;
  font-size: 1.0625rem; line-height: 1.5; color: var(--m-text); }
.pf-row > .pf-text:only-child { grid-column: 1 / -1; }
.pf-time { color: var(--m-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-text { overflow-wrap: anywhere; max-width: 70ch; }
.pf-line-bad { background: rgba(229, 83, 75, 0.08); box-shadow: inset 3px 0 0 var(--v-bad); border-radius: 6px; }
.pf-line-unk { background: rgba(255, 209, 102, 0.06); box-shadow: inset 3px 0 0 var(--v-unk); border-radius: 6px; }
.pf-line-none { box-shadow: inset 3px 0 0 var(--v-none); }
mark.pf-hl { background: rgba(229, 83, 75, 0.28); color: #fff; border-bottom: 2px solid var(--v-bad); padding: 0 0.1em;
  border-radius: 3px; }
.pf-why { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0.35rem 0 0;
  font-size: 1rem; line-height: 1.5; color: var(--m-text); }
.pf-why-ic { display: inline-flex; width: 1.3rem; height: 1.3rem; border-radius: 50%; align-items: center;
  justify-content: center; flex: none; margin-top: 0.1rem; margin-right: 0.35rem; border: 2px solid var(--v-none); color: var(--v-none); }
.pf-why-ic .m-icon { width: 0.8rem; height: 0.8rem; stroke-width: 3; }
.pf-why-t { flex: 1 1 0; min-width: 0; }
.pf-why-t .pf-tag { margin-left: 0.25rem; }
.pf-why-bad .pf-why-ic { background: var(--v-bad); border-color: var(--v-bad); color: #fff; }
.pf-why-unk .pf-why-ic { background: var(--v-unk); border-color: var(--v-unk); color: #1a1400; }
.pf-why.pf-why-bad { color: var(--v-bad-text); }
.pf-why.pf-why-unk { color: var(--v-unk); }
.pf-gap { background: repeating-linear-gradient(135deg, rgba(255, 209, 102, 0.07) 0 10px, transparent 10px 20px);
  border: 1px dashed rgba(255, 209, 102, 0.6); border-radius: 8px; margin: 0.35rem 0; }
.pf-gap-bad { background: repeating-linear-gradient(135deg, rgba(229, 83, 75, 0.09) 0 10px, transparent 10px 20px);
  border-color: rgba(229, 83, 75, 0.7); }
.pf-gap p { margin: 0; font-size: 1rem; line-height: 1.5; }
.pf-gap-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 0.4rem; color: var(--m-text); }
.pf-gap .pf-why-ic { border-color: var(--v-unk); color: var(--v-unk); }
.pf-gap-bad .pf-why-ic { border-color: var(--v-bad); color: var(--v-bad-text); }
.pf-gap-amt { color: var(--v-bad-text); font-variant-numeric: tabular-nums; }
.pf-gap-then { color: var(--m-text-2); margin-top: 0.2rem !important; padding-left: 1.65rem; }

.pf-q { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid rgba(255, 209, 102, 0.45);
  background: rgba(255, 209, 102, 0.05); }
.pf-q p { margin: 0 0 0.35rem; font-size: 1rem; line-height: 1.5; color: var(--m-text); }
.pf-q-row, .pf-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pf-num { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--m-text-2); }
.pf-num input { width: 7rem; min-height: 44px; font-size: 1rem; padding: 0.25rem 0.5rem; border-radius: 8px;
  border: 1px solid var(--m-input-border); background: var(--m-input-bg); color: var(--m-text); }
.pf-fix { margin: 0.5rem 0 0; }
.pf-fix p { margin: 0; flex-basis: 100%; font-size: 1rem; line-height: 1.5; }
.pf-fix-new { color: var(--v-ok-text); display: flex; gap: 0.35rem; align-items: flex-start; }
.pf-fix-arrow .m-icon { width: 1rem; height: 1rem; margin-top: 0.25rem; }
.pf-fix-text { color: var(--m-text-2); }
.pf-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.35rem 0.95rem;
  border-radius: 10px; border: 1px solid var(--m-border-hover); background: transparent; color: var(--m-text);
  font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; max-width: 100%; white-space: normal; }
.pf-btn:hover:not(:disabled) { background: rgba(0, 255, 136, 0.08); }
.pf-btn:focus-visible, .pf-chip:focus-visible, .pf-go:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.pf-btn:disabled { opacity: 0.55; cursor: progress; }
.pf-btn .m-icon { width: 1rem; height: 1rem; flex: none; }
.pf-btn-fix { border-color: var(--v-ok); color: var(--v-ok-text); }
.pf-btn-primary { background: var(--m-green); border-color: var(--m-green); color: #04140c; }
.pf-btn-primary:hover:not(:disabled) { background: #33ffa0; }
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 1rem 0 0; }
.pf-actions:not(:has(button)) { margin: 0; }
.pf-note { color: var(--m-text-2); font-size: 0.95rem; }
.pf-progress { flex-basis: 100%; color: var(--m-text-2); }
.pf-progress:empty { display: none; }

.pf-how { margin: 1.25rem 0 0; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: transparent; }
.pf-how > summary { min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
  padding: 0.5rem 1rem; cursor: pointer; font-weight: 700; color: var(--m-text); font-size: 1.05rem; }
.pf-how > summary small { color: var(--m-text-2); font-weight: 400; font-size: 0.95rem; }
.pf-how[open] > summary { border-bottom: 1px solid var(--v-line); }
.pf-how-body { padding: 1rem 0.75rem 0.25rem; }
@media (max-width: 575.98px) {
  .pf-title { font-size: 1.4rem; }
  .pf-row { grid-template-columns: minmax(0, 1fr); }
  .pf-time { font-size: 0.95rem; }
  .pf-plan { padding: 0.25rem 0.5rem; }
  /* a phone: a long requirement name wraps inside its chip (never cut to "di…"); the number and the state stay whole */
  .pf-chip { white-space: normal; border-radius: 16px; flex-wrap: wrap; row-gap: 0.15rem; }
  .pf-chip-name { max-width: none; overflow: visible; text-overflow: clip; flex: 1 1 auto; }
  .pf-chip-num, .pf-chip-state, .pf-chip .pf-tag { white-space: nowrap; }
  .pf-chip-num::before { content: none; }
  .pf-go { margin-left: 0; grid-column: 1 / -1; justify-self: start; }
  .pf-status { font-size: 1.05rem; }
  .pf-how-body { padding: 0.75rem 0.25rem 0.25rem; }
  /* round 15 (UI/UX review): a long decider label must wrap on a phone, not push the page sideways */
  #requirements [data-decider], #requirements .badge, #how-we-checked .badge { white-space: normal; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .pf-btn, .pf-chip { transition: none; } }

/* ── K-184: a run that did not finish (one sentence, the task, "Try again"; the raw error only for admins) ── */
.k184-fail { margin: 0.5rem 0 1.25rem; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.k184-fail-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.k184-fail-title { font-size: 1.35rem; font-weight: 800; line-height: 1.3; margin: 0.1rem 0 0.35rem; color: var(--m-text); }
.k184-fail-p { margin: 0 0 0.25rem; color: var(--m-text); font-size: 1rem; }
.k184-fail-task { border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-surface);
  padding: 0.75rem 1rem; }
.k184-fail-label { margin: 0 0 0.25rem; color: var(--m-text-2); font-size: 1rem; font-weight: 600; }
.k184-fail-text { margin: 0; color: var(--m-text); white-space: pre-wrap; }
.k184-fail-actions form { margin: 0; }
.k184-fail-actions a.pf-btn { text-decoration: none; }
.k184-fail-admin { margin-top: 1rem; color: var(--m-text-2); }
.k184-fail-admin > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.k184-fail-admin pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: 0.9rem;
  color: var(--m-text-2); }

/* ── K-184: a requirement that is not met or not checked, with its next action on its own row; a broken day ── */
.pf-req-acts { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.pf-req-act { padding: 0.6rem 0.75rem; border-left: 3px solid var(--v-none); background: var(--v-surface);
  border-radius: 0 10px 10px 0; font-size: 1rem; line-height: 1.5; }
.pf-req-act.pf-why-bad { border-left-color: var(--v-bad); }
.pf-req-act.pf-why-unk { border-left-color: var(--v-unk); }
.pf-req-act > p { margin: 0; }
.pf-req-act .pf-q { margin-top: 0.4rem; }
.pf-group-bad > summary { color: var(--v-bad-text); }
.pf-group-mark { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; color: var(--v-bad-text); }
.pf-group-mark .m-icon { width: 0.9rem; height: 0.9rem; }
.pf-group-why { margin: 0.25rem 0 0.35rem; padding: 0.5rem 0.6rem; border-radius: 6px;
  background: rgba(229, 83, 75, 0.08); box-shadow: inset 3px 0 0 var(--v-bad); }
.pf-fix-still { color: var(--m-text-2); font-size: 1rem; margin: 0.35rem 0 0; }

/* ── K-185: a broken limit on the first screen (where, how much over, the change to make); a fix's computed effect ── */
.pf-over { margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border-left: 3px solid var(--v-bad);
  background: rgba(229, 83, 75, 0.08); border-radius: 0 10px 10px 0; font-size: 1rem; line-height: 1.5; }
.pf-over p { margin: 0; color: var(--m-text); }
.pf-over-t { display: flex; align-items: flex-start; gap: 0.15rem; }
.pf-over-t .pf-why-ic { background: var(--v-bad); border-color: var(--v-bad); color: #fff; }
.pf-over-t strong { color: var(--v-bad-text); }
.pf-over-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-top: 0.35rem !important;
  padding-left: 1.65rem; color: var(--m-text-2) !important; }
.pf-over-fix > span { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.pf-over-eff { display: block; color: var(--v-ok-text); }
.pf-over .pf-go { margin-left: 0; }
.pf-fix-effect { color: var(--m-text); font-weight: 600; }
.pf-notes { margin: 0 0 1rem; }
@media (max-width: 575.98px) {
  .pf-over-fix { padding-left: 0; }
}
/* K-185b: a not-checked page with several rows: the plan first, the rows after it, at every width (the template's own
   order; status + "Go to it" on top) */
.pf.pf-notes-after > .pf-plan { margin-bottom: 1rem; }
/* K-185b: an AI fact note (a correction that does not fix a broken limit) — a note with a plain link, not a fix */
.pf-factnote { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border-radius: 10px; border: 1px dashed var(--v-line);
  font-size: 1rem; line-height: 1.5; color: var(--m-text); }
.pf-factnote p { margin: 0; display: flex; align-items: flex-start; gap: 0.15rem; }
.pf-factnote .pf-why-ic { border-color: var(--m-text-2); color: var(--m-text-2); }
.pf-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; margin-left: 1.5rem;
  border: 0; background: transparent; color: var(--m-text-2); font-size: 1rem; text-decoration: underline;
  cursor: pointer; text-align: left; }
.pf-link:hover:not(:disabled) { color: var(--m-text); }
.pf-link:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.pf-link:disabled { opacity: 0.55; cursor: progress; }