/* Existing Colour chapters direction: one sea-lion guide and a real question interface. */
.qf-blog-hero { gap: clamp(30px, 5vw, 68px); }
.qf-blog-hero .qf-sea-lion-figure { width: min(100%, 440px); justify-self: center; text-align: center; }
.qf-blog-hero .qf-sea-lion-figure img { width: min(100%, 440px); height: auto; margin-inline: auto; aspect-ratio: 1; object-fit: contain; transition: transform .3s ease; }
.qf-blog-hero .qf-sea-lion-figure:hover img { transform: translateY(-6px) rotate(-1deg); }
.qf-blog-hero .qf-sea-lion-figure figcaption { margin-top: 4px; font-size: 16px; color: #39545c; }
.qf-blog-hero .wp-block-button__link { border: 0; background: #ff794d; color: #101e24; font-size: 17px; margin-top: 10px; }
.qf-guide-assistant { margin-block: 56px 76px; padding: clamp(24px, 3.5vw, 44px); background: #0b2635; color: #edf2ef; scroll-margin-top: 28px; }
.qf-guide-assistant *, .qf-assistant-entry * { box-sizing: border-box; }
.qf-assistant-header { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; }
.qf-assistant-avatar { width: 100px; height: 100px; object-fit: contain; flex: 0 0 auto; transition: transform .2s ease; }
.qf-assistant-avatar-wrap { flex: 0 0 auto; }
.qf-assistant-heading { min-width: 0; }
.qf-assistant-heading .qf-assistant-mode { color: #ffab89; margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.qf-assistant-heading h2 { margin: 0 0 10px; font-size: clamp(27px, 2.8vw, 36px); line-height: 1.25; font-weight: 500; letter-spacing: -.03em; }
.qf-assistant-heading .qf-assistant-description { margin: 0; font-size: 17px; line-height: 1.65; }
.qf-assistant-console { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px 28px; }
.qf-assistant-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; }
.qf-assistant-topbar button { border: 0; padding: 8px 0 8px 12px; background: transparent; color: #edf2ef; font: inherit; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.qf-assistant-messages { grid-column: 1; grid-row: 2; min-height: 250px; max-height: 360px; padding-right: 12px; overflow-y: auto; overflow-wrap: anywhere; scrollbar-gutter: stable; }
.qf-assistant-message { margin: 0 0 14px; padding: 20px; background: #dce7e2; color: #101e24; }
.qf-assistant-message.is-user { margin-left: 36px; background: #254a59; color: #edf2ef; }
.qf-assistant-message p { margin: 0; font-size: 17px; line-height: 1.75; }
.qf-assistant-message p + p { margin-top: 12px; }
.qf-assistant-message .qf-assistant-message__label { margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.qf-assistant-message .qf-assistant-source { display: block; margin-top: 14px; font-size: 16px; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; color: inherit; }
.qf-assistant-source a { display: block; padding-block: 4px; }
.qf-assistant-question-panel { grid-column: 2; grid-row: 2; min-width: 0; }
.qf-assistant-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.qf-assistant-more { margin-top: 16px; }
.qf-assistant-more summary { padding: 12px 0; cursor: pointer; font-size: 17px; color: #ffab89; }
.qf-assistant-more .qf-assistant-questions { max-height: 320px; overflow-y: auto; padding-right: 8px; scrollbar-gutter: stable; }
.qf-assistant-questions button { padding: 11px 12px; border: 0; background: #244957; color: #edf2ef; font: inherit; font-size: 16px; text-align: left; line-height: 1.6; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.qf-assistant-questions button:hover, .qf-assistant-questions button[aria-pressed="true"] { background: #355f6a; }
.qf-assistant-questions button:active { transform: translateY(2px); }
.qf-assistant-form { grid-column: 1 / -1; display: block; margin: 0; }
.qf-assistant-form label { display: block; margin-bottom: 10px; font-size: 17px; }
/* A real message composer uses its own visible field boundary. */
.qf-assistant-form textarea { display: block; width: 100%; min-height: 92px; resize: vertical; border: 1px solid #7d999e; border-radius: 0; padding: 16px 18px; background: #edf2ef; color: #101e24; font: inherit; font-size: 17px; line-height: 1.6; }
.qf-assistant-form textarea::placeholder { color: #536970; opacity: 1; }
.qf-assistant-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; }
.qf-assistant-submit-wrap { flex: 0 0 auto; }
.qf-assistant-actions p { margin: 0; max-width: 570px; color: #c9dcd9; font-size: 16px; line-height: 1.6; }
.qf-assistant-actions button { flex-shrink: 0; padding: 15px 24px; border: 0; background: #ff794d; color: #101e24; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.qf-assistant-actions button:hover { background: #ff986e; }
.qf-assistant-actions button:active { transform: translateY(2px); }
.qf-assistant-status { min-height: 24px; margin: 12px 0 0; color: #c9dcd9; font-size: 16px; line-height: 1.5; }
.qf-assistant-footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; font-size: 16px; line-height: 1.6; }
.qf-assistant-footer a { color: #edf2ef; text-decoration: underline; text-underline-offset: 5px; }
.qf-guide-assistant button:disabled { opacity: .55; cursor: default; }
/* Focus outlines belong to the working question interface. */
.qf-guide-assistant :is(button,textarea,a,summary):focus-visible { outline: 3px solid #ffab89; outline-offset: 4px; }
.qf-guide-assistant.is-answering .qf-assistant-avatar { transform: rotate(-5deg); }
.qf-assistant-entry { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; margin-block: 28px 36px; padding: 22px 24px; background: #dce7e2; color: #101e24; }
.qf-assistant-entry a { color: inherit; font-size: 19px; font-weight: 600; }
.qf-assistant-entry span { font-size: 16px; line-height: 1.6; color: #39545c; }
@media (max-width: 1000px) {
  .qf-assistant-console { grid-template-columns: minmax(0, 1fr); }
  .qf-assistant-messages { grid-column: 1; grid-row: auto; min-height: 130px; max-height: 340px; }
  .qf-assistant-question-panel { grid-column: 1; grid-row: auto; }
  .qf-assistant-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
  .qf-blog-hero .qf-sea-lion-figure img { width: min(100%, 290px); }
  .qf-blog-hero .qf-sea-lion-figure { margin-inline: auto; }
  .qf-guide-assistant { margin-block: 36px 52px; padding: 24px 20px; }
  .qf-assistant-header { gap: 14px; margin-bottom: 24px; align-items: flex-start; }
  .qf-assistant-avatar { width: 66px; height: 76px; }
  .qf-assistant-heading h2 { font-size: 26px; max-width: 5em; }
  .qf-assistant-heading .qf-assistant-description { font-size: 16px; }
  .qf-assistant-console { gap: 20px; }
  .qf-assistant-messages { max-height: 360px; padding-right: 4px; }
  .qf-assistant-message { padding: 18px 16px; }
  .qf-assistant-message.is-user { margin-left: 18px; }
  .qf-assistant-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qf-assistant-questions button { min-width: 0; overflow-wrap: anywhere; }
  .qf-assistant-more .qf-assistant-questions { display: grid; grid-template-columns: 1fr; overflow-x: hidden; max-height: 300px; padding-right: 8px; }
  .qf-assistant-actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .qf-assistant-submit-wrap, .qf-assistant-actions button { width: 100%; }
  .qf-assistant-actions p { font-size: 16px; }
  .qf-assistant-footer { flex-direction: column; gap: 14px; }
}
@media (max-width: 500px) {
  .qf-assistant-questions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .qf-blog-hero .qf-sea-lion-figure img, .qf-guide-assistant *, .qf-guide-assistant *::before, .qf-guide-assistant *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-qf-motion="paused"] .qf-blog-hero .qf-sea-lion-figure img, html[data-qf-motion="paused"] .qf-guide-assistant * { transition: none !important; animation: none !important; }