/* Shared student-page rhythm, using the existing theme roles. */
body.yf-ui-prototype main > .route-content {
  box-sizing: border-box; width: 100%; max-width: 1120px; min-height: calc(100dvh - 90px);
  margin: 0 auto; padding: 44px clamp(24px, 4vw, 60px) 64px; background: transparent;
}
body.yf-ui-prototype .route-content .section-kicker { margin: 0 0 20px; padding: 0; border: 0; font-size: 12px; line-height: 20px; letter-spacing: .06em; color: var(--yf-muted); }
body.yf-ui-prototype .section-kicker > span:last-child:not(:first-child) { display: none; }
body.yf-ui-prototype .route-content .route-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px;
  align-items: start; margin: 0 0 28px;
}
body.yf-ui-prototype .route-content .route-heading h2 {
  grid-area: 1 / 1; max-width: 820px; margin: 0; padding: 0; font-family: inherit;
  font-size: clamp(26px, 2.4vw, 32px); line-height: 1.45; font-weight: 600;
  letter-spacing: -.025em; color: var(--yf-text); text-wrap: pretty;
}
body.yf-ui-prototype .route-content .route-heading > p:not(.route-eyebrow) {
  grid-area: 2 / 1; max-width: 760px; margin: 0; font-size: 14px; line-height: 1.85; color: var(--yf-muted);
}
body.yf-ui-prototype .route-content .route-heading > .route-eyebrow {
  grid-area: 1 / 1; display: block; width: auto; height: auto; margin: 0;
  padding: 0; border: 0; background: transparent; color: var(--yf-primary);
  font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: .04em;
}
body.yf-ui-prototype .route-heading:has(> .route-eyebrow) > h2 { grid-row: 2; }
body.yf-ui-prototype .route-heading:has(> .route-eyebrow) > p:not(.route-eyebrow) { grid-row: 3; }
body.yf-ui-prototype .route-content .route-heading > button { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; white-space: nowrap; }
body.yf-ui-prototype .route-content .route-heading > .destination-note { grid-column: 1 / -1; font-size: 12px; color: var(--yf-muted); }
body.yf-ui-prototype .route-content :is(.route-footnote,.wb-note) { margin: 16px 0 0; font-size: 12px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .route-content :is(.route-panel,.crm-history-panel,.legacy-entry-status) {
  border: 1px solid var(--yf-border); border-radius: 16px; background: var(--yf-surface);
  box-shadow: none;
}
body.yf-ui-prototype .crm-history-panel { padding: 24px; }
body.yf-ui-prototype .crm-history-panel h2 { margin: 0 0 14px; font-size: 17px; line-height: 1.5; font-weight: 550; }
body.yf-ui-prototype .crm-history-note { font-size: 13px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .legacy-entry-status:not([hidden]) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0; padding: 24px; }
body.yf-ui-prototype .legacy-entry-status p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .legacy-entry-status button[data-legacy-login],
body.yf-ui-prototype .route-content .ui-history-login button { min-height: 42px; padding: 9px 18px; border: 1px solid var(--yf-primary); border-radius: 10px; background: var(--yf-primary); color: var(--yf-on-primary); font-size: 14px; }
body.yf-ui-prototype .ui-history-login { display: none; }
body.yf-ui-prototype[data-auth-state="guest"] .ui-history-login { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body.yf-ui-prototype .ui-history-login strong { display: block; font-size: 17px; line-height: 1.6; font-weight: 550; }
body.yf-ui-prototype .ui-history-login p { margin: 7px 0 0; color: var(--yf-muted); font-size: 14px; line-height: 1.8; }
body.yf-ui-prototype .ui-history-login button { flex: none; }
body.yf-ui-prototype[data-auth-state="guest"] #students .crm-history-panel > :not(.ui-history-login),
body.yf-ui-prototype[data-auth-state="guest"] #legacyHistoryBtn,
body.yf-ui-prototype[data-auth-state="guest"] #students .route-footnote { display: none; }
body.yf-ui-prototype .crm-history-list { margin: 20px 0 0; padding: 0; list-style: none; }
body.yf-ui-prototype .crm-history-item { padding: 16px 0; border-bottom: 1px solid var(--yf-border); }
body.yf-ui-prototype .crm-history-title { font-size: 15px; line-height: 1.7; }

/* Public overview and assessment choices. Preserve all examples and disclaimers. */
body.yf-ui-prototype .value-flow { gap: 12px; border: 0; margin: 0 0 24px; background: transparent; }
body.yf-ui-prototype .value-flow > div { min-width: 0; padding: 22px; border: 1px solid var(--yf-border); border-radius: 14px; background: var(--yf-surface); }
body.yf-ui-prototype .value-flow strong { display: block; margin-top: 12px; font-size: 18px; line-height: 1.5; }
body.yf-ui-prototype .value-flow p { font-size: 13px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .value-mock { margin-top: 0; padding: 24px; }
body.yf-ui-prototype .mock-bar { gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; font-size: 12px; }
body.yf-ui-prototype .value-mock > strong { font-size: 17px; line-height: 1.65; }
body.yf-ui-prototype .value-mock > p { font-size: 13px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .mock-columns { height: 130px; gap: 14px; }
body.yf-ui-prototype .mock-columns i { border-radius: 7px 7px 0 0; font-size: 12px; font-style: normal; }
body.yf-ui-prototype .value-roles { margin-top: 20px; gap: 12px; }
body.yf-ui-prototype .value-roles article { padding: 20px; border: 1px solid var(--yf-border); border-radius: 14px; background: transparent; }
body.yf-ui-prototype .value-roles b { font-size: 14px; color: var(--yf-primary); }
body.yf-ui-prototype .value-roles span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.7; }
body.yf-ui-prototype .value-roles small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .assess-grid { gap: 18px; margin-top: 0; }
body.yf-ui-prototype .assess-grid article { display: flex; flex-direction: column; padding: 22px; gap: 20px; border: 1px solid var(--yf-border); border-radius: 16px; background: var(--yf-surface); }
body.yf-ui-prototype .assess-card-main { gap: 18px; flex: 1; align-items: center; }
body.yf-ui-prototype .assess-art { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 16px; background: var(--yf-primary-soft); overflow: hidden; }
body.yf-ui-prototype .assess-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.yf-ui-prototype .assess-body { min-width: 0; }
body.yf-ui-prototype .assess-body > span { font-size: 11px; color: var(--yf-muted); }
body.yf-ui-prototype .assess-body strong { display: block; margin-top: 3px; font-size: 17px; line-height: 1.6; }
body.yf-ui-prototype .assess-body p { margin: 7px 0; font-size: 13px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .assess-body small { font-size: 12px; line-height: 1.7; color: var(--yf-muted); }
body.yf-ui-prototype .assess-grid .text-link { display: flex; justify-content: space-between; align-items: center; min-height: 42px; margin: 0; padding: 9px 14px; border: 1px solid var(--yf-border); border-radius: 10px; text-decoration: none; background: var(--yf-primary-soft); color: var(--yf-text); font-size: 13px; line-height: 1.5; }
body.yf-ui-prototype .assess-grid .text-link:hover { border-color: var(--yf-primary); }
body.yf-ui-prototype .assessment-report { margin-top: 24px; padding: 24px; gap: 22px; }
body.yf-ui-prototype .assessment-report .block-label { padding: 0; border: 0; background: transparent; color: var(--yf-primary); font-size: 12px; line-height: 1.8; }
body.yf-ui-prototype .assessment-report strong { display: block; margin-top: 8px; font-size: 18px; }
body.yf-ui-prototype .assessment-report p { font-size: 13px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .report-bars { gap: 12px; }
body.yf-ui-prototype .report-bars i { min-width: 100px; min-height: 30px; padding: 5px 10px; border-radius: 6px; font-size: 12px; line-height: 20px; font-style: normal; background: var(--yf-primary-soft); color: var(--yf-text); }
body.yf-ui-prototype .report-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.yf-ui-prototype .report-actions button:disabled { background: var(--yf-surface-soft); color: var(--yf-muted); border-color: var(--yf-border); opacity: 1; cursor: default; }

/* Fellow poster and actions use the same warm/dark theme as the rest of the app. */
body.yf-ui-prototype #fellow .fellow-dark { padding: 22px; background: var(--yf-surface); border: 1px solid var(--yf-border); border-radius: 16px; box-shadow: none; }
body.yf-ui-prototype #fellow .fellow-reward-head { margin-bottom: 16px; }
body.yf-ui-prototype #fellow .rw-tag { font-size: 12px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype #fellow .rw-cnt { gap: 7px; }
body.yf-ui-prototype #fellow .rw-item { padding: 4px 10px; border: 0; border-radius: 7px; background: var(--yf-primary-soft); color: var(--yf-text); font-size: 12px; }
body.yf-ui-prototype #fellow .fp-poster { aspect-ratio: 16 / 7; max-height: 340px; border-radius: 12px; background: var(--yf-surface-soft); }
body.yf-ui-prototype #fellow .fp-slide picture { display: block; width: 100%; height: 100%; }
body.yf-ui-prototype #fellow .fp-slide img { object-fit: cover; }
body.yf-ui-prototype #fellow .fp-arrow { display: grid; place-items: center; min-height: 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--yf-border); border-radius: 10px; background: var(--yf-surface); color: var(--yf-text); font-size: 24px; box-shadow: none; }
body.yf-ui-prototype #fellow .fp-arrow:hover { transform: translateY(-50%); }
body.yf-ui-prototype #fellow .fp-rules-open { min-height: 38px; padding: 7px 12px; border: 1px solid var(--yf-border); border-radius: 9px; background: var(--yf-surface); color: var(--yf-text); font-size: 13px; }
body.yf-ui-prototype #fellow .fp-btns { gap: 12px; margin-top: 16px; }
body.yf-ui-prototype #fellow .fp-btn { height: auto; min-height: 80px; min-width: min(260px,100%); gap: 12px; padding: 16px; border-radius: 12px; box-shadow: none; backdrop-filter: none; transform: none; }
body.yf-ui-prototype #fellow .fp-btn-main { background: var(--yf-primary); border-color: var(--yf-primary); color: var(--yf-on-primary); }
body.yf-ui-prototype #fellow .fp-btn-main .fp-tt :is(b,i) { color: var(--yf-on-primary); }
body.yf-ui-prototype #fellow .fp-btn-join { background: var(--yf-surface-soft); color: var(--yf-text); }
body.yf-ui-prototype #fellow .fp-btn-join .fp-tt i { color: var(--yf-muted); }
body.yf-ui-prototype #fellow .fp-btn .fp-ico { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }
body.yf-ui-prototype #fellow .fp-tt b { font-size: 15px; font-weight: 550; }
body.yf-ui-prototype #fellow .fp-tt i { font-size: 12px; line-height: 1.6; }
body.yf-ui-prototype .fp-rmod-card { padding: 22px; border-radius: 16px; box-shadow: 0 16px 50px color-mix(in srgb,var(--yf-text) 15%,transparent); }
body.yf-ui-prototype .fp-rmod-head { font-size: 18px; font-weight: 550; }
body.yf-ui-prototype #fellow .fp-dots { display: flex; left: 50%; right: auto; width: max-content; transform: translateX(-50%); gap: 0; padding: 0; border: 0; background: transparent; }
body.yf-ui-prototype #fellow .fp-dots i { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
body.yf-ui-prototype #fellow .fp-dots i::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--yf-primary); border-radius: 999px; background: var(--yf-surface); box-shadow: 0 1px 4px #0005; }
body.yf-ui-prototype #fellow .fp-dots i.on::before { width: 18px; border-color: var(--yf-surface); background: var(--yf-primary); }
body.yf-ui-prototype #fellow .fp-dots i:focus-visible { outline-offset: -3px; }

/* Account, wrong-book, parent and embedded query components. */
body.yf-ui-prototype :is(.account-integration-dialog,.wb-dialog) { border: 1px solid var(--yf-border); border-radius: 16px; background: var(--yf-surface); color: var(--yf-text); }
body.yf-ui-prototype :is(.account-dialog-head,.wb-dialog-head) { gap: 16px; padding: 20px 24px; }
body.yf-ui-prototype :is(.account-dialog-head,.wb-dialog-head) h2 { margin: 0; font-size: 21px; line-height: 1.5; }
body.yf-ui-prototype :is(.account-dialog-body,.wb-dialog-body) { padding: 20px 24px 24px; }
body.yf-ui-prototype :is(.account-dialog-body,.wb-dialog-body) > p { margin: 0 0 18px; font-size: 14px; line-height: 1.85; color: var(--yf-muted); }
body.yf-ui-prototype :is(.account-integration-dialog,.wb-dialog) label { font-size: 13px; line-height: 1.7; }
body.yf-ui-prototype .account-integration-dialog label:has(input[type="checkbox"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
body.yf-ui-prototype :is(.account-integration-dialog,.wb-dialog,#parentApp,#wrong-base,#nanjing-zero) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) {
  box-sizing: border-box; min-height: 44px; max-width: 100%; border: 1px solid var(--yf-border);
  border-radius: 9px; padding: 10px 12px; background: var(--yf-surface); color: var(--yf-text); font-family: inherit; font-size: 14px; line-height: 1.6;
}
body.yf-ui-prototype :is(.account-integration-dialog,.wb-dialog,#parentApp,#wrong-base,#nanjing-zero) :is(button,input,select,textarea):focus-visible { outline: 2px solid var(--yf-primary); outline-offset: 2px; }
body.yf-ui-prototype :is(.account-integration-dialog,.wb-dialog) button { min-height: 40px; border-radius: 9px; padding: 8px 14px; font-size: 13px; }
body.yf-ui-prototype :is(.account-integration-dialog,.wb-dialog) button[type="submit"],
body.yf-ui-prototype #parentApp button.primary { min-height: 44px; border: 1px solid var(--yf-primary); background: var(--yf-primary); color: var(--yf-on-primary); }
body.yf-ui-prototype .wb-dialog form > [type="submit"] { position: static; bottom: auto; box-shadow: none; }
/* The formula enhancer sets an inline display:block even before any text exists. */
body.yf-ui-prototype .wb-dialog .wb-question-preview:empty { display: none !important; }
body.yf-ui-prototype .account-dialog-close { background: transparent; border-color: transparent; }
body.yf-ui-prototype .account-integration-dialog:has(form) { max-width: 560px; }
body.yf-ui-prototype .account-dialog-body > [role="status"]:empty { display: none; }
body.yf-ui-prototype .account-dialog-body form p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--yf-muted); }
body.yf-ui-prototype .yf-prototype-sidebar-bottom .account-nav { position: relative; }
body.yf-ui-prototype .yf-prototype-sidebar-bottom #loginBtn { justify-content: flex-start; }
body.yf-ui-prototype .ui-account-name { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.yf-ui-prototype .yf-prototype-sidebar-bottom #userMenu:not([hidden]) {
  position: absolute; inset: auto 0 calc(100% + 10px); z-index: 3; width: auto;
  display: grid; gap: 4px; margin: 0; padding: 6px; max-height: min(300px, calc(100dvh - 180px));
  overflow-y: auto; border: 1px solid var(--yf-border); border-radius: 12px;
  background: var(--yf-surface); box-shadow: 0 8px 24px color-mix(in srgb,var(--yf-text) 10%,transparent);
}
body.yf-ui-prototype .yf-prototype-sidebar-bottom .user-menu-item { width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--yf-text); font-size: 13px; text-align: left; }
body.yf-ui-prototype .yf-prototype-sidebar-bottom .user-menu-item:hover { background: var(--yf-primary-soft); }
body.yf-ui-prototype #parentApp .card { padding: 24px; border-radius: 16px; box-shadow: none; }
body.yf-ui-prototype #parentApp h3 { font-size: 18px; line-height: 1.6; }
body.yf-ui-prototype #parentApp :is(.sub,.muted,.child-sub) { font-size: 13px; line-height: 1.85; }
body.yf-ui-prototype #parentApp #bindBox { align-items: end; gap: 12px !important; margin-top: 20px !important; }
body.yf-ui-prototype #bindBox .ui-field { display: flex; flex: 1 1 150px; flex-direction: column; gap: 6px; font-size: 13px; }
body.yf-ui-prototype #bindBox .ui-field input { width: 100%; max-width: none !important; }
body.yf-ui-prototype #wrong-base .wb-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body.yf-ui-prototype #wrong-base button { min-height: 40px; border-radius: 9px; font-size: 13px; }
body.yf-ui-prototype #wrong-base :is(.wb-card,.wb-panel) { border-radius: 14px; }
body.yf-ui-prototype #wrong-base :is(.wb-note,.wb-meta,.wb-empty) { font-size: 13px; line-height: 1.8; }
/* The host route already provides the page heading. Keep the embedded app at
   the same hierarchy and width instead of nesting a second landing page. */
body.yf-ui-prototype #wrong-book #wrong-base:not(:empty) {
  margin: 0; padding: 0; max-width: none; grid-template-columns: minmax(0,1fr);
  grid-template-areas: "hero" "stats" "toolbar" "taxonomy" "status" "grid" "progress";
  gap: 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  overflow: visible; font-family: inherit;
}
body.yf-ui-prototype #wrong-base::before,
body.yf-ui-prototype #wrong-base > .wb-heading { display: none; }
body.yf-ui-prototype #wrong-base > :is(.wb-hero,.wb-progress,.wb-taxonomy),
body.yf-ui-prototype #wrong-base .wb-card { box-shadow: none; border: 1px solid var(--yf-border); border-radius: 14px; }
body.yf-ui-prototype #wrong-base > .wb-hero { padding: 22px; min-height: 0; gap: 10px 24px; background: var(--yf-surface); }
body.yf-ui-prototype #wrong-base .wb-hero > strong { font-size: 20px; line-height: 1.65; letter-spacing: -.02em; }
body.yf-ui-prototype #wrong-base .wb-hero > p { color: var(--yf-muted); line-height: 1.85; }
body.yf-ui-prototype #wrong-base .wb-hero > .wb-primary { box-shadow: none; }
body.yf-ui-prototype #wrong-base > .wb-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
body.yf-ui-prototype #wrong-base > [data-status]:empty { display: none; }
body.yf-ui-prototype #wrong-base > .wb-taxonomy { padding: 20px; background: var(--yf-surface); }
body.yf-ui-prototype #wrong-base > .wb-progress { padding: 20px; background: var(--yf-surface); }
body.yf-ui-prototype #wrong-base .wb-progress-meter strong { font-size: 36px; }
body.yf-ui-prototype #wrong-base .wb-rail-quote { display: none; }
body.yf-ui-prototype #wrong-base .wb-empty { padding: 28px 20px; background: transparent; }
body.yf-ui-prototype #wrong-base:has(> .wb-hero) .wb-empty-onboarding { padding: 12px 0; border: 0; }
body.yf-ui-prototype #wrong-base:has(> .wb-hero) .wb-empty-onboarding > :is(.wb-empty-icon,h3,.wb-empty-lead,.wb-empty-actions) { display: none; }
body.yf-ui-prototype #wrong-base .wb-empty-onboarding .wb-kicker { margin: 0 0 12px; font-size: 12px; letter-spacing: 0; }
body.yf-ui-prototype #wrong-base .wb-empty-onboarding .wb-onboarding-steps { width: 100%; margin: 0; }
body.yf-ui-prototype #wrong-base .wb-filters { flex-wrap: wrap; max-width: 100%; padding: 0; border: 0; background: transparent; }
body.yf-ui-prototype #wrong-base .wb-filters :is(input,select) { border: 1px solid var(--yf-border); background: var(--yf-surface); }
body.yf-ui-prototype #nanjing-zero .aq-heading { margin-bottom: 20px; }
body.yf-ui-prototype #nanjing-zero.module-section { padding: 24px; border: 1px solid var(--yf-border); box-shadow: none; backdrop-filter: none; }
body.yf-ui-prototype #nanjing-zero.module-section::before { display: none; }
body.yf-ui-prototype #nanjing-zero .module-title { display: none; }
body.yf-ui-prototype #nanjing-zero .module-eyebrow { font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--yf-text); }
body.yf-ui-prototype #nanjing-zero .aq-local-tag { font-size: 11px; padding: 5px 9px; border-radius: 7px; }
body.yf-ui-prototype #nanjing-zero .module-intro { font-size: 14px; line-height: 1.85; }
body.yf-ui-prototype #nanjing-zero .aq-search { padding: 20px; gap: 14px; border-radius: 14px; }
body.yf-ui-prototype #nanjing-zero .aq-field > span { font-size: 13px; }
body.yf-ui-prototype #nanjing-zero .aq-submit { height: 44px; border-radius: 9px; font-size: 14px; }
body.yf-ui-prototype #nanjing-zero :is(.aq-result-head,.aq-result-body) { padding: 20px; }
body.yf-ui-prototype #nanjing-zero :is(.aq-hint,.aq-footer-note) { font-size: 12px; line-height: 1.8; }
body.yf-ui-prototype #nanjing-zero .aq-empty { min-height: 150px; font-size: 14px; }
body.yf-ui-prototype #nanjing-zero .aq-empty p { font-size: 13px; line-height: 1.85; text-align: center; }
body.yf-ui-prototype #nanjing-zero :is(.aq-result-head span,.aq-position-title > span,.aq-position-basis,.aq-position-chart-note,.aq-position-summary span,.aq-conversion-grid span,.aq-province-conversion p,.aq-result-note) { font-size: 12px; line-height: 1.8; }
body.yf-ui-prototype #nanjing-zero :is(.aq-position-title small,.aq-province-conversion header small) { font-size: 11px; letter-spacing: .04em; }
body.yf-ui-prototype #nanjing-zero .aq-conversion-grid strong { font-size: 14px; }

body.yf-ui-prototype .footer { padding: 28px clamp(24px,4vw,60px); font-size: 12px; line-height: 1.8; }
body.yf-ui-prototype .footer-links { gap: 10px 18px; flex-wrap: wrap; }
body.yf-ui-prototype .footer-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; }
body.yf-ui-prototype .footer-faq summary { width: fit-content; min-height: 36px; cursor: pointer; }
body.yf-ui-prototype .footer-legal { gap: 8px 16px; font-size: 11px; }
body.yf-ui-prototype :is(.route-content a,.footer a,.fp-dots i):focus-visible { outline: 2px solid var(--yf-primary); outline-offset: 3px; }
/* Long teaching content keeps its own scrolling surfaces on narrow screens. */
body.yf-ui-prototype #home .chat-message-body { overflow-wrap: anywhere; }
body.yf-ui-prototype #home .chat-message-body table { width: 100%; border: 1px solid var(--yf-border); border-spacing: 0; border-collapse: separate; border-radius: 10px; }
body.yf-ui-prototype #home .chat-message-body :is(th,td) { padding: 10px 12px; text-align: left; vertical-align: top; border: 0; border-right: 1px solid var(--yf-border); border-bottom: 1px solid var(--yf-border); }
body.yf-ui-prototype #home .chat-message-body th { background: var(--yf-surface-soft); font-weight: 550; }
body.yf-ui-prototype #home .chat-message-body tr > :last-child { border-right: 0; }
body.yf-ui-prototype #home .chat-message-body tbody tr:last-child > td { border-bottom: 0; }

@media (max-width: 900px) {
  body.yf-ui-prototype .assess-grid { grid-template-columns: 1fr; }
  body.yf-ui-prototype .assessment-report { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.yf-ui-prototype.sidebar-open .topbar .yf-prototype-sidebar-bottom {
    position: relative; z-index: 2; max-height: none; overflow: visible;
  }
  body.yf-ui-prototype.sidebar-open #homepageUsage { max-height: 72px; overflow-y: auto; }
  body.yf-ui-prototype main > .route-content { min-height: calc(100dvh - 64px); padding: 94px 20px 40px; }
  body.yf-ui-prototype .route-content .section-kicker { margin-bottom: 16px; }
  body.yf-ui-prototype .route-content .route-heading { grid-template-columns: minmax(0,1fr); gap: 10px; margin-bottom: 22px; }
  body.yf-ui-prototype .route-content .route-heading h2 { font-size: 26px; line-height: 1.5; }
  body.yf-ui-prototype .route-content .route-heading > button { grid-column: 1; grid-row: auto; justify-self: start; min-height: 44px; margin-top: 4px; }
  body.yf-ui-prototype :is(.crm-history-panel,.legacy-entry-status:not([hidden]),.value-mock,.assessment-report) { padding: 20px; }
  body.yf-ui-prototype .ui-history-login { flex-direction: column; align-items: flex-start !important; gap: 16px !important; }
  body.yf-ui-prototype .ui-history-login button { min-height: 44px; }
  body.yf-ui-prototype :is(.value-flow,.value-roles,.assess-grid) { grid-template-columns: 1fr; }
  body.yf-ui-prototype .value-flow > div { padding: 20px; }
  body.yf-ui-prototype .value-flow strong { margin-top: 6px; }
  body.yf-ui-prototype .assess-grid article { padding: 18px; gap: 16px; }
  body.yf-ui-prototype .assess-card-main { gap: 14px; }
  body.yf-ui-prototype .assess-art { flex-basis: 72px; width: 72px; height: 72px; }
  body.yf-ui-prototype .assess-body strong { font-size: 16px; }
  body.yf-ui-prototype .assess-grid .text-link { min-height: 44px; }
  body.yf-ui-prototype #fellow .fellow-dark { padding: 16px; }
  body.yf-ui-prototype #fellow .fp-poster { aspect-ratio: 4 / 3; }
  body.yf-ui-prototype #fellow .fp-btn { flex-basis: 100%; min-width: 0; }
  body.yf-ui-prototype #fellow .fp-arrow { width: 36px; height: 40px; min-height: 40px; }
  body.yf-ui-prototype #fellow .fp-dots i { width: 44px; height: 44px; }
  body.yf-ui-prototype .fp-rmod-card { padding: 18px; }
  body.yf-ui-prototype :is(.account-dialog-head,.wb-dialog-head) { padding: 16px 18px; }
  body.yf-ui-prototype :is(.account-dialog-body,.wb-dialog-body) { padding: 18px; }
  body.yf-ui-prototype #parentApp .card { padding: 18px; }
  body.yf-ui-prototype #wrong-base > .wb-grid { grid-template-columns: minmax(0,1fr); }
  body.yf-ui-prototype #wrong-base > .wb-hero { padding: 18px; grid-template-columns: minmax(0,1fr); grid-template-areas: "eyebrow" "title" "copy" "primary" "secondary"; }
  body.yf-ui-prototype #wrong-base .wb-hero > strong { font-size: 18px; }
  body.yf-ui-prototype #wrong-base .wb-toolbar [role="tablist"] { max-width: 100%; flex-wrap: wrap; }
  body.yf-ui-prototype #wrong-base .wb-toolbar [role="tab"] { padding: 8px 10px; }
  body.yf-ui-prototype #wrong-base .wb-filters { width: 100%; }
  body.yf-ui-prototype #wrong-base .wb-filters :is(input,select) { flex: 1 1 130px; width: 100%; }
  body.yf-ui-prototype #wrong-base .wb-onboarding-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.yf-ui-prototype #nanjing-zero .aq-search { grid-template-columns: 1fr; padding: 16px; }
  body.yf-ui-prototype #nanjing-zero.module-section { padding: 18px !important; }
  body.yf-ui-prototype #nanjing-zero .aq-heading { flex-wrap: wrap; gap: 10px; }
  body.yf-ui-prototype #nanjing-zero .aq-conversion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  body.yf-ui-prototype #nanjing-zero .aq-field { grid-column: 1; }
  body.yf-ui-prototype #nanjing-zero .aq-submit { grid-column: 1; width: 100%; }
  body.yf-ui-prototype .footer { padding: 24px 20px; }
}