/* ==========================================================================
   Be Rwanda Wise and Be Vietnam Wise apps: Design.md look (v140, 7 November 2026; readability fixes v144)
   Loaded last on /rwanda-wise and /vietnam-wise, after /bw-design.css, which
   holds the shared Design.md tokens and family components. The guide, FAQ,
   embassy, useful-links and contact pages load /rwanda-vietnam-guides-design.css.
   APPEARANCE ONLY.
   ========================================================================== */

:root{
  /* v144: the family navy (--bw-ink) is text here, as in /bw-design.css; its background uses are all set below.
     (v140 pointed it at the panel colour, which made the chapter headings, "At a glance" links and figures and
     the next-chapter names invisible.) */
  --bw-ink:var(--d-text);
  --brown:var(--d-panel); --brown-soft:var(--d-hover); --parchment:var(--d-canvas); --parchment-deep:var(--d-hover);
  --ink:var(--d-text); --red:var(--d-accent); --red-deep:var(--d-accent); --green:var(--d-text-2); --green-soft:var(--d-hover);
  --gold:var(--d-accent); --copper:var(--d-accent); --slate:var(--d-text-2);
}
html body{ background:var(--d-canvas) !important; color:var(--d-text) !important; }
html body :is(button, input, select, textarea){ font-family:var(--d-body) !important; }

/* top bar, tabs, footer */
html body header.topnav{ background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line) !important; box-shadow:none !important; }
html body header.topnav :is(h1, .brand, .app-title, span){ color:var(--d-text); }
html body :is(.seal, .seal-lg, .hero .seal-lg){ background:var(--d-hover) !important; background-image:none !important; box-shadow:none !important; border:1px solid var(--d-line) !important; }
html body nav.tabs button{ color:var(--d-text-2) !important; background:transparent !important; border-radius:6px !important; font-family:var(--d-body) !important; }
html body nav.tabs button:not(.active):hover{ background:var(--d-hover) !important; color:var(--d-text) !important; }
html body nav.tabs button.active{ color:var(--d-text) !important; background:transparent !important; box-shadow:inset 0 -2px 0 var(--d-accent) !important; }
html body .icon-btn{ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; }
html body .icon-btn:hover{ background:var(--d-hover) !important; }
html body .icon-dot{ background:var(--d-accent) !important; }
html body .icon-badge{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; }
html body footer.sitefoot{ background:var(--d-panel) !important; color:var(--d-text-2) !important; border-top:1px solid var(--d-line) !important; }
html body .pwa-banner{ background:var(--d-panel) !important; border-top:1px solid var(--d-line) !important; color:var(--d-text) !important; }
html body .pwa-go{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-radius:6px !important; }

/* hero: the photo stays, without the gradient fades */
html body .hero{ background:var(--d-panel) !important; background-image:none !important; color:var(--d-text) !important; border-bottom:1px solid var(--d-line); }
html body .hero :is(h1, h2){ color:var(--d-text) !important; }
html body .hero :is(.hero-lede, p){ color:var(--d-text-2) !important; }
html body .hero .hero-eyebrow{ color:var(--d-accent) !important; }
html body :is(.hero h1, .hero h2, .lawyers-wrap h2, .contact-wrap h2, #topicContent h2)::after{ background:var(--d-accent) !important; height:1px !important; }
html body .hero.hero-kigali::before{ background-color:var(--d-panel) !important; box-shadow:none !important; }
html body .hero:is(.hero-kigali, .hero-saigon){ background:transparent !important; }
html body .hero.hero-kigali::after{ background:linear-gradient(90deg, rgba(9,13,22,0.94) 0%, rgba(9,13,22,0.86) 34%, rgba(9,13,22,0.5) 54%, rgba(9,13,22,0.4) 64%, rgba(9,13,22,0.4) 100%) !important; }
@media (max-width:720px){ html body .hero.hero-kigali::after{ background:linear-gradient(180deg, rgba(9,13,22,1) 0%, rgba(9,13,22,1) calc(100% - 440px), rgba(9,13,22,0.42) calc(100% - 370px), rgba(9,13,22,0.24) calc(100% - 280px), rgba(9,13,22,0.28) 100%) !important; } }
/* v159: the white tigers photo (Vietnam) is a real picture beside or below the text, so the hero needs no wash; the credit gets
   the same small dark backing as the Rwanda credit, and the "tiger economy" line under the photo is in the secondary text colour */
html body .hero.hero-saigon::after{ background:none !important; }
html body .hero.hero-saigon .hero-credit{ background:rgba(9,13,22,0.72); padding:2px 6px; border-radius:4px; text-shadow:none !important; font-size:11px !important; }
html body .hero.hero-saigon .vn-hero-photo figcaption{ color:var(--d-text-2) !important; font-family:var(--d-body); }
/* v144: the zebra photo is 40% brighter (Jason, 7 November 2026): the wash now darkens only the text side on desktop and
   the text area on phones; text that sits over the photo gets a small dark backing so it stays readable */
html body .hero.hero-kigali .hero-credit{ background:rgba(9,13,22,0.72); padding:2px 6px; border-radius:4px; text-shadow:none !important; }
@media (max-width:720px){ html body .hero.hero-kigali .profile-link{ background:rgba(9,13,22,0.78); padding:4px 8px; border-radius:4px; margin-left:-8px; } }
html body .hero .hero-credit, html body .hero .hero-credit a{ color:var(--d-text-2) !important; }

/* buttons */
html body :is(.btn-primary, .btn-lawyer, #sendBtn, .match-pill, .action-primary, .faq-lawbot-btn, .gate-btn, .faq-ask){
  background:var(--d-accent) !important; background-image:none !important; color:var(--d-on-accent) !important; border:1px solid var(--d-accent) !important;
  border-radius:6px !important; box-shadow:none !important; font-weight:600;
}
html body :is(.btn-primary, .btn-lawyer, #sendBtn, .action-primary, .faq-lawbot-btn, .gate-btn, .faq-ask):hover:not(:disabled){ background:var(--d-accent-hover) !important; }
html body :is(.gate-btn, #sendBtn):disabled{ background:var(--d-hover) !important; border-color:var(--d-line) !important; color:var(--d-text-3) !important; }
html body :is(.btn-secondary, .action-outline, .action-outline.brown, .chip, .cat-tab, .topic-pill, .action-chip, .faq-cat, .faq-guide, .topic-source-link, .modal-close){
  background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; box-shadow:none !important;
}
html body :is(.chip, .topic-pill){ border-radius:999px !important; }
html body :is(.btn-secondary, .action-outline, .chip, .cat-tab, .topic-pill, .action-chip, .faq-cat, .faq-guide, .topic-source-link):hover{ background:var(--d-hover) !important; }
html body :is(.cat-tab.active, .faq-cat.active, .action-chip.done){ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; color:var(--d-text) !important; }

/* panels and cards */
html body :is(.feature-card, .dir-card, .hf, .topic-points, .disclaimer, .input-bar, .faq-item, .faq-lawbot, .slot-card, .contact-card, .modal-box,
  .gate-box, .gate-foot, .next-card, .g-tool, .g-glance, .g-onpage, .g-table, .g-box-fl, .g-example, .g-flow, .g-box-horizon, .g-section-card, .g-rel, .g-summary, .g-checklist, .g-qa){
  background:var(--d-panel) !important; background-image:none !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; transform:none !important;
}
html body .gate-foot{ border-width:1px 0 0 !important; border-radius:0 !important; }
html body .gate-box{ border-top:1px solid var(--d-accent) !important; }
html body :is(.gate-backdrop, .modal-overlay){ background:rgba(9,13,22,0.88) !important; }
html body .gate-check{ background:var(--d-canvas) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; color:var(--d-text) !important; }
html body .gate-box h2 svg{ background:transparent !important; color:var(--d-accent) !important; }
html body :is(.feature-card, .dir-card, .hf, .next-card, .g-section-card, .g-rel):hover{ background:var(--d-hover) !important; }
html body :is(.feature-card .icon-wrap, .contact-card .icon-wrap, .next-card .next-icon, .next-card.primary .next-icon){ background:var(--d-hover) !important; color:var(--d-accent) !important; border:1px solid var(--d-line); }
html body .next-card.primary, html body .g-next-card{ background:var(--d-accent-tint) !important; border:1px solid var(--d-accent) !important; color:var(--d-text) !important; }
html body .g-next-card:hover{ background:var(--d-hover) !important; }
html body :is(.feature-card, .dir-card, .hf, .next-card, .faq-item, .slot-card, .contact-card, .g-section-card, .g-rel, .g-next-card) :is(h2, h3, h4, strong, b){ color:var(--d-text) !important; }
html body :is(.feature-card, .dir-card, .hf, .next-card, .faq-item, .slot-card, .contact-card, .disclaimer, .g-section-card, .g-rel, .g-next-card) :is(p, span, small, li){ color:var(--d-text-2) !important; }
html body .disclaimer{ border-left:1px solid var(--d-accent) !important; }
html body :is(.match-banner, .profile-summary, .faq-updated, .tag-pill, .cite, .topic-badge, .freshness-badge.fallback){ background:var(--d-hover) !important; color:var(--d-text) !important; border-color:var(--d-line-input) !important; }
html body .cite:hover{ background:var(--d-accent-tint) !important; }
html body .freshness-badge.live{ background:var(--d-green-tint) !important; color:var(--d-green) !important; border:1px solid var(--d-green-edge) !important; }
html body .freshness-dot{ background:currentColor !important; }

/* guide panels inside the app */
html body .g-summary li.g-updated, html body .g-box-watch{ background:var(--d-accent-tint) !important; border-color:var(--d-accent-edge) !important; color:var(--d-text) !important; }
html body .g-steps li::before{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; font-family:var(--d-mono); }
html body .g-table thead th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; }
html body .g-table tbody th{ background:var(--d-panel) !important; color:var(--d-text) !important; }
html body .g-checklist li::before{ background:var(--d-canvas) !important; border:1px solid var(--d-line-input) !important; }
html body .g-yes{ background:var(--d-green-tint) !important; color:var(--d-green) !important; }
html body .g-no{ background:var(--d-red-tint) !important; color:var(--d-red) !important; }

/* chat */
html body #messages{ background:var(--d-canvas) !important; }
html body .bubble-user{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; }
html body :is(.bubble-ai, .loading-bubble){ background:var(--d-panel) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-left:1px solid var(--d-accent) !important; border-radius:6px !important; box-shadow:none !important; }
html body .bubble-ai.notice{ background:var(--d-red-tint) !important; border-color:var(--d-red-edge) !important; }
html body .bubble-ai :is(p, li){ color:var(--d-text) !important; }
html body .loading-dots span{ background:var(--d-text-2) !important; }
html body .md-table th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; }
html body .bw-spot-banner{ background:var(--d-accent-tint) !important; }

/* latest-updates ticker */
html body :is(.ticker, .bw-ticker, .ticker-wrap){ background:var(--d-panel) !important; border-color:var(--d-line) !important; }

/* headings and links that used the family navy as text colour */
html body :is(details.hf > summary, .trust-item .trust-big, .bw-tk-title, #guideTitle, .dir-heading, #homeFaqTitle, .lawyers-wrap h2, .contact-wrap h2, .serif){ color:var(--d-text) !important; }
html body .trust-item .trust-big{ font-family:var(--d-display) !important; }
html body .back-link{ color:var(--d-text-2) !important; background:transparent !important; }
html body .back-link:hover{ color:var(--d-text) !important; }
html body .hero .profile-link{ text-shadow:none !important; color:var(--d-text) !important; }
html body button.feature-card.chapter-card, html body button.next-card{ border-radius:6px !important; }
html body .next-card.primary em{ color:var(--d-accent) !important; }

/* "Markets & news" ticker (bw-ticker.css) */
html body .bw-tk{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; }
html body .bw-tk-head{ background:var(--d-panel) !important; border-bottom:1px solid var(--d-line) !important; }
html body .bw-tk-dot{ background:var(--d-green) !important; box-shadow:none !important; }
html body :is(.bw-tk-updated, .bw-tk-k, .bw-tk-m, .bw-tk-chg, .bw-tk-src time){ color:var(--d-text-2) !important; }
html body .bw-tk-pause{ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; }
html body .bw-tk-pause:hover{ background:var(--d-hover) !important; }
html body .bw-tk-list li{ border-color:var(--d-line) !important; }
html body .bw-tk-v{ color:var(--d-text) !important; font-family:var(--d-mono) !important; }
html body .bw-tk-chg.up{ color:var(--d-green) !important; }
html body .bw-tk-chg.dn{ color:var(--d-red) !important; }
html body .bw-tk-news a{ color:var(--d-text) !important; }
html body .bw-tk-src{ color:var(--d-accent) !important; }
html body .bw-tk-foot{ background:var(--d-panel) !important; color:var(--d-text-2) !important; border-color:var(--d-line) !important; }

/* "doing business" pathway finder (dbv-pathways.js) */
html body .dbp{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-top:1px solid var(--d-accent) !important; border-radius:8px !important; }
html body .dbp .dbp-k{ color:var(--d-accent) !important; }
html body .dbp :is(h2, h3, label){ color:var(--d-text) !important; }
html body .dbp > p, html body .dbp-prog{ color:var(--d-text-2) !important; }
html body .dbp .dbp-go{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-color:var(--d-accent) !important; }
html body .dbp .dbp-alt{ background:transparent !important; color:var(--d-text) !important; border-color:var(--d-line-input) !important; }
html body .dbp .dbp-alt:hover{ background:var(--d-hover) !important; }
html body .dbp-route, html body .dbp li{ border-color:var(--d-line) !important; }
html body .dbp-bar{ background:var(--d-hover) !important; border-radius:999px !important; }
html body .dbp-bar span{ background:var(--d-accent) !important; }
html body .dbp li::before{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input); font-family:var(--d-mono); }
html body .dbp li.done::before{ background:var(--d-green-tint) !important; color:var(--d-green) !important; border-color:var(--d-green-edge) !important; }
html body label strong{ color:var(--d-text) !important; }
html body .trust-strip{ border-image:none !important; border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line); }

/* Vietnam Wise: language button and enquiry note. v169: Rwanda Wise's « Français » button (a.rw-lang-btn) looks the same. */
html body :is(a.vn-lang-btn, a.rw-lang-btn){ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border:1px solid var(--d-accent) !important; border-radius:6px !important; box-shadow:none !important; }
html body :is(a.vn-lang-btn, a.rw-lang-btn) :is(b, small, span){ color:var(--d-on-accent) !important; }
html body :is(a.vn-lang-btn, a.rw-lang-btn):hover{ background:var(--d-accent-hover) !important; }
html body .enquiry-context{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-left:1px solid var(--d-accent) !important; border-radius:8px !important; color:var(--d-text) !important; }

/* v144: hover borders and the guide's coloured rules use hairlines or the accent, not white */
html body :is(.g-tool, .g-section-card, .g-rel, .next-card):hover{ border-color:var(--d-accent-edge) !important; }
html body .g-crumbs a:hover{ color:var(--d-text) !important; border-bottom-color:var(--d-accent) !important; }
html body .g-glance{ border-left:1px solid var(--d-accent) !important; }
html body .g-flow{ border-left:1px solid var(--d-accent) !important; }
html body .g-checklist li::before{ border-radius:4px !important; }

/* v144: an empty table cell in a guide chapter shows a muted dash instead of a blank hole; no wording is added */
html body :is(.g-table, table.dbv-table) td:empty::before{ content:"\2014"; color:var(--d-text-3); }

/* v160: the "Foreign v Vietnamese investor" box heading in the app's guide reader (.g-box-fl h4) took its old light-theme
   colour (--bw-harbour), dark on the dark panel; it now uses the text colour, as the other box headings do */
html body .g-box-fl h4{ color:var(--d-text) !important; }

/* v176 (Jason, 11 November 2026): the Chat tab, second on the app's top menu bar, is a bold yellow box on both
   apps, matching the yellow chatbot button ("Ask Rwandabot" / "Ask Lawbot") on the guide and FAQ pages. */
html body nav.tabs button#tabChat{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; font-weight:600 !important; border-radius:6px !important; margin:0 4px !important; }
html body nav.tabs button#tabChat:not(.active):hover{ background:var(--d-accent-hover) !important; color:var(--d-on-accent) !important; box-shadow:none !important; }
html body nav.tabs button#tabChat.active{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; box-shadow:inset 0 -3px 0 var(--d-on-accent) !important; }
@media (max-width:560px){
  html body nav.tabs button#tabChat{ margin:4px 4px 6px !important; min-height:34px !important; padding:6px 12px !important; }
}