/* =========================================================
   Public flow pages: visa wizard, result, track, appointment,
   success, blog. Built on design-system.css tokens.

   This file loads on every page, so every rule here is either
   a .flow-* class or an id/class used only by these pages.
   Layout is mobile first; the smallest supported width is 360px
   with a 16px side gutter and no horizontal page scroll.
   ========================================================= */

.flow-page { min-height: 100vh; background: var(--color-card); }
.flow-page .page-header { background: #fff; }
/* The hidden attribute must win over the display values set on flow components. */
.flow-page [hidden] { display: none !important; }

.flow-main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 96px;
  box-sizing: border-box;
  min-width: 0;
}
.flow-main--wide { max-width: 800px; }
.flow-main--narrow { max-width: 560px; }
@media (max-width: 640px) {
  .flow-main { padding-top: 20px; padding-bottom: 72px; }
}

.flow-title { font-size: 26px; line-height: 1.3; margin: 0; color: var(--color-secondary); overflow-wrap: anywhere; }
.flow-lead { margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--color-text-muted); }
.flow-center { text-align: center; }
@media (max-width: 640px) { .flow-title { font-size: 22px; } }

.flow-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flow-header-title {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--color-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-header-title--start { text-align: start; }

.flow-stack > * + * { margin-top: 16px; }
.flow-span-2 { grid-column: 1 / -1; }
.flow-ltr { direction: ltr; text-align: start; }
.flow-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Progress and stepper ---------- */
.flow-progress { margin-bottom: 24px; }
.flow-progress-meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px;
}
.flow-stepper {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.flow-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--color-text-faint);
}
.flow-step-num {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--color-border);
  font-size: 13px; font-weight: 700; color: var(--color-text-faint);
}
.flow-step.is-done .flow-step-num { background: #15803D; border-color: #15803D; color: #fff; }
.flow-step.is-current { color: var(--color-secondary); }
.flow-step.is-current .flow-step-num { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.flow-step-name { line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .flow-step-name { display: none; }
  .flow-step.is-current .flow-step-name { display: block; }
}

/* ---------- Cards ---------- */
.flow-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  box-sizing: border-box;
}
.flow-card--muted { background: var(--color-card); box-shadow: none; }
.flow-card--navy { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.flow-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.flow-card-title { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--color-secondary); margin: 0; overflow-wrap: anywhere; }
.flow-card-sub { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--color-text-muted); }
.flow-card + .flow-card { margin-top: 16px; }
.flow-section-gap { margin-top: 24px; }
@media (max-width: 480px) { .flow-card { padding: 18px; } }

/* ---------- Notices and status messages ---------- */
.flow-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: var(--color-navy-light); color: var(--color-secondary);
  font-size: 14px; line-height: 1.7;
}
.flow-notice > i, .flow-notice > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
.flow-notice--warn { background: var(--color-warning-light); color: #5B3A07; }
.flow-notice--danger { background: var(--color-error-light); color: #7F1D1D; }
.flow-notice--ok { background: var(--color-success-light); color: #14532D; }

/* Live regions stay in the layout (even when empty) so screen readers announce updates. */
.flow-status { min-height: 0; margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }
.flow-status.is-error { color: #B91C1C; font-weight: 600; }
.flow-status.is-success { color: #15803D; font-weight: 600; }

/* ---------- Buttons row ---------- */
.flow-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.flow-actions-spacer { flex: 1 1 0; min-width: 0; }
.flow-actions--center { justify-content: center; }
@media (max-width: 560px) {
  .flow-actions { flex-direction: column-reverse; align-items: stretch; }
  .flow-actions .btn { width: 100%; }
  .flow-actions-spacer { display: none; }
}

/* ---------- Choice buttons (country, purpose, visa type) ---------- */
.flow-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flow-choice-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow-choice-grid--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .flow-choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.flow-choice {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; margin: 0; padding: 14px 16px;
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 12px;
  font: inherit; text-align: start; cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.flow-choice:hover:not([aria-disabled="true"]) { border-color: color-mix(in srgb, var(--color-secondary) 45%, var(--color-border)); }
.flow-choice[aria-pressed="true"] {
  border-color: var(--color-cta); background: #FFF9F4;
  box-shadow: inset 0 0 0 1px var(--color-cta);
}
.flow-choice[aria-disabled="true"] { cursor: not-allowed; opacity: 0.62; background: var(--color-card); }
.flow-choice-flag { font-size: 26px; line-height: 1; flex-shrink: 0; }
.flow-choice-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.flow-choice-title { font-size: 15px; font-weight: 700; color: var(--color-secondary); overflow-wrap: anywhere; line-height: 1.5; }
.flow-choice-desc { font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.flow-choice-tick {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.flow-choice-tick i, .flow-choice-tick svg { width: 14px; height: 14px; }
.flow-choice[aria-pressed="true"] .flow-choice-tick { background: var(--color-cta); border-color: var(--color-cta); color: #fff; }

.flow-cap {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.flow-cap--on { background: var(--color-success-light); color: #15803D; }
.flow-cap--guide { background: var(--color-navy-light); color: var(--color-secondary); }
.flow-cap--partial { background: var(--color-warning-light); color: #92400E; }

/* ---------- Fields ---------- */
.flow-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px) { .flow-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.flow-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.flow-field:last-child { margin-bottom: 0; }
.flow-label, .flow-field > label { font-size: 14px; font-weight: 700; color: var(--color-secondary); line-height: 1.5; }
.flow-field input, .flow-field select, .flow-field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.flow-hint { font-size: 13px; line-height: 1.7; color: var(--color-text-faint); margin: 0; }
.flow-error { display: none; font-size: 13px; color: #B91C1C; line-height: 1.6; }
.flow-field.has-error .flow-error { display: block; }
.flow-field.has-error > input,
.flow-field.has-error > select,
.flow-field.has-error > textarea { border-color: var(--color-error); }

/* design-system.css does not style type="search"; match the other text inputs. */
.flow-page input[type="search"] {
  width: 100%; height: 48px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: 15px; color: var(--color-text);
}
.flow-page input[type="search"]::placeholder { color: var(--color-text-faint); }

/* Yes / no and document toggles */
.flow-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.flow-segment--inline { max-width: none; width: 216px; }
.flow-seg-btn {
  min-height: 44px; padding: 8px 12px; margin: 0;
  background: #fff; color: var(--color-secondary);
  border: 1px solid var(--color-border); border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.flow-seg-btn:hover { border-color: var(--color-secondary); }
.flow-seg-btn[aria-pressed="true"] { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.flow-field.has-error .flow-segment { outline: 2px solid var(--color-error); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 560px) { .flow-segment--inline { width: 100%; } }

/* Document rows (wizard step 4) */
.flow-doc-list { display: flex; flex-direction: column; gap: 12px; }
.flow-doc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center;
  padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff;
}
.flow-doc-name { font-size: 15px; font-weight: 700; color: var(--color-text); line-height: 1.6; overflow-wrap: anywhere; }
.flow-doc-meta { margin-top: 2px; font-size: 12px; color: var(--color-text-faint); }
@media (max-width: 560px) { .flow-doc { grid-template-columns: minmax(0, 1fr); } }

/* Upload drop zone (legacy assessment, step 7) */
.flow-dropzone {
  width: 100%; min-height: 120px; padding: 20px 16px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: var(--color-text); text-align: center;
  border: 2px dashed var(--color-border); border-radius: var(--radius-card);
  font: inherit; cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.flow-dropzone:hover, .upload-zone .flow-dropzone.is-dragging { border-color: var(--color-cta); background: #FFF9F4; }
.flow-dropzone > i, .flow-dropzone > svg { width: 28px; height: 28px; color: var(--color-primary-text); margin-bottom: 4px; }
.upload-result { margin-top: 10px; min-height: 0; }
.upload-result:empty { margin-top: 0; }

/* ---------- Result page ---------- */
.flow-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 560px) {
  .flow-score { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}
.flow-ring {
  --score: 0; --ring: var(--color-warning);
  position: relative; display: grid; place-items: center;
  width: 152px; height: 152px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--ring) calc(var(--score) * 1%), var(--color-border) 0);
}
.flow-ring-inner {
  width: 124px; height: 124px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.flow-ring-value { font-size: 40px; font-weight: 800; line-height: 1; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.flow-ring-of { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--color-text-faint); }
.flow-verdict-level {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 700; background: var(--color-navy-light); color: var(--color-secondary);
}
.flow-verdict-level.is-good { background: var(--color-success-light); color: #15803D; }
.flow-verdict-level.is-warn { background: var(--color-warning-light); color: #92400E; }
.flow-verdict-level.is-bad { background: var(--color-error-light); color: #B91C1C; }
.flow-verdict-title { margin: 10px 0 0; font-size: 22px; line-height: 1.35; color: var(--color-secondary); }
.flow-verdict-meta { margin-top: 6px; font-size: 14px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.flow-verdict-note { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--color-text-muted); }
.flow-ref {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.flow-ref-label { font-size: 12px; font-weight: 600; color: var(--color-text-faint); }
.flow-ref-code {
  direction: ltr; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 800; letter-spacing: 1px; color: var(--color-secondary); overflow-wrap: anywhere;
}

.flow-bars { display: flex; flex-direction: column; gap: 16px; }
.flow-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.flow-bar-label { font-size: 14px; font-weight: 600; color: var(--color-text); min-width: 0; overflow-wrap: anywhere; }
.flow-bar-weight { font-size: 12px; font-weight: 500; color: var(--color-text-faint); }
.flow-bar-value { font-size: 14px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flow-bar .progress-track { height: 8px; }

.flow-blockers { border-inline-start: 4px solid var(--color-error); }
.flow-blockers-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flow-blockers-list li {
  padding: 10px 12px; border-radius: 8px; background: var(--color-error-light);
  color: #7F1D1D; font-size: 14px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere;
}

.flow-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flow-issue { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; }
.flow-issue > i, .flow-issue > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.flow-issue-label { font-size: 12px; font-weight: 800; }
.flow-issue-msg { margin-top: 2px; font-size: 14px; line-height: 1.7; color: var(--color-text); overflow-wrap: anywhere; }
.flow-issue.is-critical { background: var(--color-error-light); color: #B91C1C; }
.flow-issue.is-warning { background: var(--color-warning-light); color: #92400E; }
.flow-issue.is-info { background: var(--color-navy-light); color: var(--color-secondary); }

.flow-group + .flow-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.flow-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flow-group-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--color-secondary); line-height: 1.5; }
.flow-count {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--color-navy-light); color: var(--color-secondary); white-space: nowrap;
}
.flow-group-note { margin: 6px 0 0; font-size: 13px; line-height: 1.8; color: var(--color-text-muted); }
.flow-subhead { margin: 18px 0 0; font-size: 13px; font-weight: 800; color: var(--color-text-muted); }
.flow-check-list { list-style: none; margin: 8px 0 0; padding: 0; }
.flow-check {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.flow-check:last-child { border-bottom: 0; }
.flow-check-icon { display: inline-flex; margin-top: 1px; }
.flow-check-icon i, .flow-check-icon svg { width: 20px; height: 20px; }
.flow-check.is-ok .flow-check-icon { color: #15803D; }
.flow-check.is-missing .flow-check-icon { color: #B91C1C; }
.flow-check.is-pending .flow-check-icon { color: #92400E; }
.flow-check.is-optional .flow-check-icon { color: var(--color-text-faint); }
.flow-check-name { font-size: 15px; font-weight: 700; color: var(--color-text); line-height: 1.6; overflow-wrap: anywhere; }
.flow-check-desc { margin-top: 4px; font-size: 13px; line-height: 1.8; color: var(--color-text-muted); }
.flow-check-meta { margin-top: 6px; font-size: 12px; line-height: 1.8; color: var(--color-text-faint); overflow-wrap: anywhere; }
.flow-check-meta a { color: var(--color-primary-text); font-weight: 700; text-decoration: underline; }
.flow-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; line-height: 1.5; }
.flow-chip--ok { background: var(--color-success-light); color: #15803D; }
.flow-chip--missing { background: var(--color-error-light); color: #B91C1C; }
.flow-chip--pending { background: var(--color-warning-light); color: #92400E; }
.flow-chip--optional { background: var(--color-card); color: var(--color-text-muted); border: 1px solid var(--color-border); }
@media (max-width: 480px) {
  .flow-check { grid-template-columns: auto minmax(0, 1fr); }
  .flow-check .flow-chip { grid-column: 2; justify-self: start; }
}

.flow-source {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.flow-source:last-child { border-bottom: 0; }
.flow-source-main { min-width: 0; flex: 1 1 200px; }
.flow-source-name { font-size: 14px; font-weight: 700; color: var(--color-secondary); overflow-wrap: anywhere; }
.flow-source-name a { color: var(--color-primary-text); text-decoration: underline; }
.flow-source-meta { margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--color-text-faint); }
.flow-source-date { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; }

.flow-advisor { background: var(--color-secondary); border-color: var(--color-secondary); padding: 28px 24px; }
.flow-advisor .flow-card-title { color: #fff; }
.flow-advisor-text { margin: 10px 0 0; font-size: 14px; line-height: 1.85; color: #D3DCE8; }
.flow-paid {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 12px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px; font-weight: 700;
}
.flow-paid i, .flow-paid svg { width: 14px; height: 14px; }
.flow-advisor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.flow-advisor .btn-outline-light { min-height: 48px; }
.flow-advisor-status { margin-top: 12px; font-size: 13px; line-height: 1.7; color: #E5ECF4; min-height: 0; }
.flow-advisor-fine { margin-top: 14px; font-size: 12px; line-height: 1.8; color: #AFC1D6; }

.flow-print-only { display: none; }

/* ---------- Track page ---------- */
.flow-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
@media (max-width: 480px) { .flow-search { grid-template-columns: minmax(0, 1fr); } .flow-search .btn { width: 100%; } }
.flow-search input { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; }
.flow-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 480px) { .flow-kv { grid-template-columns: minmax(0, 1fr); } }
.flow-kv-label { font-size: 12px; font-weight: 600; color: var(--color-text-faint); }
.flow-kv-value { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.flow-kv-value--code { direction: ltr; text-align: start; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; }

/* ---------- Appointment and success ---------- */
.flow-fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.flow-legend { font-size: 15px; font-weight: 800; color: var(--color-secondary); padding: 0; margin-bottom: 14px; }
.flow-icon-tile {
  width: 52px; height: 52px; border-radius: 14px; background: var(--color-primary-light);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.flow-icon-tile i, .flow-icon-tile svg { width: 24px; height: 24px; color: var(--color-primary-text); }
.flow-icon-tile--ok { background: var(--color-success-light); }
.flow-icon-tile--ok i, .flow-icon-tile--ok svg { color: #15803D; }
.flow-code {
  direction: ltr; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px; font-weight: 800; letter-spacing: 2px; color: var(--color-primary-text);
  overflow-wrap: anywhere; margin-top: 8px;
}
.flow-list { margin: 10px 0 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.9; color: var(--color-text-muted); }
.flow-list li + li { margin-top: 4px; }
.flow-row-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--color-secondary); font-size: 15px; }
.flow-row-title i, .flow-row-title svg { width: 18px; height: 18px; color: var(--color-primary-text); flex-shrink: 0; }

/* ---------- Blog ---------- */
.flow-hero { padding: 40px 0 28px; }
.flow-hero h1 { font-size: 30px; line-height: 1.3; color: var(--color-secondary); }
.flow-hero-lead { margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--color-text-muted); }
.flow-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 14px; font-weight: 700; color: var(--color-secondary);
}
.flow-article { max-width: 680px; margin: 0 auto; padding-bottom: 80px; min-width: 0; }
.flow-article #blog-detail-content h1 { font-size: 30px !important; line-height: 1.35; margin: 0 0 12px; overflow-wrap: anywhere; }
.blog-detail-cover { height: 280px; border-radius: var(--radius-card); background-color: var(--color-card); background-size: cover; background-position: center; margin-bottom: 28px; }
.blog-detail-meta { font-size: 13px; color: var(--color-text-faint); margin-bottom: 24px; }
.blog-detail-body { font-size: 16px; line-height: 2; color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; }
.flow-notfound { text-align: center; padding: 48px 0; }
@media (max-width: 640px) {
  .flow-hero h1 { font-size: 24px; }
  .blog-detail-cover { height: 180px; }
  .flow-article #blog-detail-content h1 { font-size: 24px !important; }
}

/* ---------- Print: the result page can be saved as PDF ---------- */
@media print {
  .flow-noprint, .page-header, .skip-link, .flow-actions, .flow-advisor, .toast-wrap { display: none !important; }
  .flow-page { background: #fff; }
  .flow-card { box-shadow: none; break-inside: avoid; }
  .flow-main { padding: 0; max-width: none; }
  .flow-print-only { display: block; }
}