/* Shared hierarchy for the demo and connected app. Size follows reading role. */
#casefork-mock {
  --cf-title-size: 32px;
  --cf-section-size: 20px;
  --cf-item-size: 18px;
}
#casefork-mock .cf-main h1,
#casefork-mock .cf-main .cf-voicepage h1 {
  font-size: var(--cf-title-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.025em;
  margin: 12px 0 16px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
#casefork-mock .cf-main h2 {
  font-size: var(--cf-section-size);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -.015em;
  color: var(--cf-ink);
}
#casefork-mock .cf-main h3,
#casefork-mock .cf-main .cf-case-row h2 {
  font-size: var(--cf-item-size);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -.01em;
}
#casefork-mock .cf-main .cf-article p,
#casefork-mock .cf-main .cf-sub {
  font-size: 15px;
  line-height: 1.85;
}
#casefork-mock .cf-sectionhead { margin: 36px 0 16px; }
#casefork-mock .cf-article h2 { margin-bottom: 12px; }
#casefork-mock .cf-summary h2 { margin-bottom: 16px; }
#casefork-mock .cf-hero { padding-bottom: 16px; }
#casefork-mock .cf-nav :is(a, button) {
  min-height: 44px;
  font-size: 14px;
}
#casefork-mock .cf-nav [aria-current="page"]:not(.cf-primary) {
  color: var(--cf-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
/* Selected primary actions must retain foreground/background contrast. */
#casefork-mock .cf-nav .cf-primary,
#casefork-mock .cf-nav .cf-primary[aria-current="page"] {
  color: var(--cf-buttontext);
  background: var(--cf-button);
}
#casefork-mock .cf-nav .cf-primary[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}
#casefork-mock :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--cf-ink);
  outline-offset: 4px;
}
@media (max-width: 650px) {
  #casefork-mock { --cf-title-size: 26px; --cf-section-size: 18px; }
  #casefork-mock .cf-nav { gap: 8px; flex-wrap: wrap; }
  #casefork-mock .cf-nav :is(a, button),
  #casefork-mock .cf-nav .cf-primary { font-size: 13px; }
  #casefork-mock .cf-nav .cf-primary { padding-inline: 12px; }
  #casefork-mock .cf-main h1,
#casefork-mock .cf-main .cf-voicepage h1 { line-height: 1.55; }
}

/* Persistent feedback stays beside the task until resolved. */
#casefork-mock #work-feedback {
  max-width: 960px; margin: 20px auto 0; padding: 14px 18px;
  border: 1px solid var(--cf-line); border-radius: 8px;
  background: var(--cf-soft); font-size: 14px; line-height: 1.7;
}
#casefork-mock #work-feedback[data-state=error] { border-left: 3px solid #b34c36; }
#casefork-mock [hidden] { display: none !important; }
#casefork-mock .live-next { padding: 24px; background: var(--cf-soft); border-radius: 12px; margin: 0 0 36px; }
#casefork-mock .live-next h2 { margin: 8px 0; }
#casefork-mock .live-next p { margin: 0 0 20px; color: var(--cf-muted); }
#casefork-mock .live-inputmodes { display: flex; gap: 8px; margin: 24px 0 16px; }
#casefork-mock .live-inputmodes button { min-height: 44px; padding: 10px 20px; }
#casefork-mock .live-inputmodes [aria-pressed=true] { background: var(--cf-soft); border-color: var(--cf-ink); }
#casefork-mock .cf-main .live-question { font-size: 22px; line-height: 1.65; margin: 24px 0 12px; }
#casefork-mock .cf-voicepage > h1 { margin-top: 28px; }
#casefork-mock .cf-voicepage #answer { margin-top: 20px; }
#casefork-mock .cf-voicepage #answer > .cf-quiet { margin-top: 12px; }
@media(max-width:650px) {
  #casefork-mock #work-feedback { margin: 16px 20px 0; }
  #casefork-mock .cf-main .live-question { font-size: 20px; }
  #casefork-mock .live-next { padding: 20px; }
}
#casefork-mock .live-feedback {
  padding: 14px 16px; margin: 16px 0; border-radius: 8px;
  background: var(--cf-soft); font-size: 14px; line-height: 1.7;
  border: 1px solid var(--cf-line);
}
#casefork-mock .live-feedback[data-state=error] { border-left: 3px solid #b34c36; }
#casefork-mock .cf-legal section p { white-space: pre-line; }