/* Dorax Finance — the second look for the pages over the whole screen (owner, 2026-10-11; chosen with him: "the setup and the Journey light, as the
   home page"). The first-time setup (.ob-page) is light always: it opens right after signing up, before any theme is chosen, and a new account is
   light. The Journey's first page (#jstart) and the tours (.tour-page) are light in the light theme and keep their dark night in the dark one.
   Light as the home page: the sage-white page (#F2F4EE), white fields and choices with a hairline, ink words, forest for what is chosen and lime
   for the main button. Both the setup and the Journey are built on the Journey's page (.js-page, css/screens/journey.css), so most rules are shared. */

/* ---------- the shared page ---------- */
:is(.ob-page, :root.app-light #jstart) {
  color-scheme: light;
  --bg: #F2F4EE; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #E9EDE4; --well: #EEF1EA;
  --ink: #0E0F0C; --ink-strong: #0E0F0C; --ink-2: #454745; --ink-3: #5F625D; --on-dark: #0E0F0C;
  --line: #E1E5DC; --line-strong: #C3C9BD; --hover-line: #8E9488; --track: #DCE2D5; --knob: #FFFFFF;
  --brand: #163300; --focus: #163300; --link: #163300; --on-brand: #9FD182;
  background: #F2F4EE; color: #0E0F0C;
}
:is(.ob-page, :root.app-light #jstart) .js-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 30px; padding: 0 13px 0 11px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px #E1E5DC; color: #163300; font-size: 12.5px; letter-spacing: .02em; text-transform: none; }
:is(.ob-page, :root.app-light #jstart) .js-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9FD182; box-shadow: 0 0 0 3px rgba(159, 209, 130, .3); }
:is(.ob-page, :root.app-light #jstart) .js-step h1 { font-weight: 600; letter-spacing: -.035em; color: #0E0F0C; }
:is(.ob-page, :root.app-light #jstart) .js-lead { color: #454745; }
:is(.ob-page, :root.app-light #jstart) :is(.js-soft, .js-src, .note) { color: #5F625D; }
:is(.ob-page, :root.app-light #jstart) .js-warn, :is(.ob-page, :root.app-light #jstart) .banner.js-warn { color: #0E0F0C; background: #FFFFFF; border-color: #E1E5DC; }
:is(.ob-page, :root.app-light #jstart) .js-ok, :is(.ob-page, :root.app-light #jstart) .js-big { color: #163300; }
:is(.ob-page, :root.app-light #jstart) .js-progress li, :is(.ob-page, :root.app-light #jstart) .ob-dots i { background: #DCE2D5; }
:is(.ob-page, :root.app-light #jstart) .js-progress li.done, :is(.ob-page, :root.app-light #jstart) .ob-dots i.done { background: rgba(22, 51, 0, .35); }
:is(.ob-page, :root.app-light #jstart) .js-progress li.on, :is(.ob-page, :root.app-light #jstart) .ob-dots i.now { background: #163300; }
:is(.ob-page, :root.app-light #jstart) .js-go { background: #9FD182; color: #163300; box-shadow: none; }
:is(.ob-page, :root.app-light #jstart) :is(.js-back, .ob-foot .btn.js-back) { background: #FFFFFF; border: 1px solid #C3C9BD; color: #0E0F0C; }
:is(.ob-page, :root.app-light #jstart) :is(.js-x, .ob-out) { background: #FFFFFF; border: 1px solid #C3C9BD; color: #0E0F0C; }
:is(.ob-page, :root.app-light #jstart) :is(.js-x, .js-go, .js-back, .js-link, .js-light, .ob-out):focus-visible, :is(.ob-page, :root.app-light #jstart) .js-days button:focus-visible { outline-color: #163300; }
:is(.ob-page, :root.app-light #jstart) .js-link { border-color: #C3C9BD; background: #FFFFFF; color: #0E0F0C; }

/* ---------- the first-time setup ---------- */
.ob-page .ob-brand { color: #163300; } .ob-page .ob-brand .logo .ac { fill: #9FD182; }
.ob-page .ob-bar select.lang { color: #0E0F0C; background-color: #FFFFFF; border-color: #C3C9BD; }
.ob-page .field label, .ob-page .ob-slide-h label { color: #454745; }
.ob-page .field input[type=text] { color: #0E0F0C; background: #FFFFFF; border-color: #C3C9BD; }
.ob-page .field input[type=text]::placeholder { color: #8E9488; }
.ob-page .field input[type=text]:focus { border-color: #163300; box-shadow: 0 0 0 3px rgba(22, 51, 0, .12); }
.ob-page .ob-dream, .ob-page .ob-way { color: #0E0F0C; background: #FFFFFF; border-color: #D3D8CD; }
.ob-page .ob-dream:hover, .ob-page .ob-way:hover { border-color: #163300; }
.ob-page .fl-ico, .ob-page .ob-dream .fl-ico { background: #F2F4EE; color: #163300; }
.ob-page .ob-dream[aria-pressed="true"] { background: #163300; border-color: #163300; color: #FFFFFF; }
.ob-page .ob-dream[aria-pressed="true"] .fl-ico { background: #9FD182; color: #163300; }
.ob-page .ob-way small, .ob-page .ob-fact small, .ob-page .ob-later .linkbtn { color: #5F625D; }
.ob-page .ob-val { color: #454745; border-bottom-color: #C3C9BD; }
.ob-page .ob-val input[type=text] { color: #0E0F0C; background: none; border: 0; box-shadow: none; }      /* the amount stays a figure on its dashed line, no box (owner, 2026-10-07) */
.ob-page .ob-slide input[type=range]::-webkit-slider-thumb { background: #FFFFFF; border-color: #163300; box-shadow: 0 0 0 6px rgba(22, 51, 0, .1); }
.ob-page .ob-hero { border-bottom-color: #E1E5DC; }
.ob-page .ob-hero .rw-n, .ob-page .ob-when, .ob-page .ob-foot .ob-cheer { color: #163300; }
.ob-page .ob-hero .rw-u, .ob-page .ob-hero > p { color: #454745; }
.ob-page .ob-fact { border-bottom-color: #E1E5DC; } .ob-page .ob-fact b { color: #0E0F0C; }
.ob-page .ob-foot .btn.primary.js-go { background: #9FD182; border-color: #9FD182; color: #163300; }

/* ---------- the Journey's first page, in the light theme: the climb by day ---------- */
:root.app-light #jstart .js-stars { display: none; }
:root.app-light #jstart #js-sky stop:nth-child(1) { stop-color: #F2F4EE; } :root.app-light #jstart #js-sky stop:nth-child(2) { stop-color: #EAF2E2; } :root.app-light #jstart #js-sky stop:nth-child(3) { stop-color: #E2F6D5; }
:root.app-light #jstart .js-hill.h3 { fill: #D6E1CB; } :root.app-light #jstart .js-hill.h2 { fill: #C3D6B2; } :root.app-light #jstart .js-hill.h1 { fill: #A9C793; }
:root.app-light #jstart .js-road { stroke: rgba(22, 51, 0, .3); }
:root.app-light #jstart .js-walked { stroke: #163300; filter: none; }
:root.app-light #jstart .js-mark { fill: #FFFFFF; stroke: #163300; } :root.app-light #jstart .js-mark.on { fill: #9FD182; stroke: #163300; }
:root.app-light #jstart .js-me-glow { fill: #9FD182; } :root.app-light #jstart .js-me-dot { fill: #163300; }
:root.app-light #jstart .js-flag-cloth { fill: rgba(22, 51, 0, .35); } :root.app-light #jstart[data-step="done"] .js-flag-cloth { fill: #163300; }
:root.app-light #jstart .js-shade { background: linear-gradient(180deg, rgba(242, 244, 238, 0) 25%, rgba(242, 244, 238, .7) 55%, #F2F4EE 100%); }
@media (min-width: 921px) { :root.app-light #jstart .js-shade { background: linear-gradient(90deg, #F2F4EE 0%, #F2F4EE 36%, rgba(242, 244, 238, .6) 44%, rgba(242, 244, 238, 0) 60%); } }
:root.app-light #jstart .js-flame { color: #163300; --jr-heart: #9FD182; } :root.app-light #jstart .js-flame .jr-fl { filter: none; }
:root.app-light #jstart .js-light { background: #FFFFFF; border-color: #D3D8CD; color: #0E0F0C; }
:root.app-light #jstart .js-light.on { background: #E2F6D5; border-color: #163300; }
:root.app-light #jstart .js-light b { color: #163300; }
:root.app-light #jstart .js-how li span:last-child { color: #454745; } :root.app-light #jstart .js-how b { color: #0E0F0C; }
:root.app-light #jstart .js-ico { background: #E2F6D5; color: #163300; }
:root.app-light #jstart .js-owed li { border-bottom-color: #E1E5DC; } :root.app-light #jstart .js-dot { background: #163300; }
:root.app-light #jstart .js-days button { border-color: #D3D8CD; background: #FFFFFF; color: #0E0F0C; }
:root.app-light #jstart .js-days small { color: #5F625D; }
:root.app-light #jstart .js-days [aria-checked="true"] { background: #163300; border-color: #163300; color: #9FD182; }
:root.app-light #jstart .js-days [aria-checked="true"] small, :root.app-light #jstart .js-days [aria-checked="true"] b { color: #9FD182; }
:root.app-light #jstart .js-amount { border-bottom-color: #C3C9BD; } :root.app-light #jstart .js-amount:focus-within { border-bottom-color: #163300; }
:root.app-light #jstart .js-cur { color: #5F625D; } :root.app-light #jstart .js-amount input { color: #0E0F0C; } :root.app-light #jstart .js-amount input::placeholder { color: #ACB2A6; }

/* ---------- the tours, in the light theme ---------- */
:root.app-light .tour-page { --on-dark: #0E0F0C; background: #F2F4EE; color: #0E0F0C; }
:root.app-light .tour-page h1 { font-weight: 600; letter-spacing: -.035em; color: #0E0F0C; }
:root.app-light .tour-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 30px; padding: 0 13px 0 11px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px #E1E5DC; color: #163300; letter-spacing: .02em; text-transform: none; }
:root.app-light .tour-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9FD182; box-shadow: 0 0 0 3px rgba(159, 209, 130, .3); }
:root.app-light .tour-lead { color: #454745; }
:root.app-light .tour-does li { color: #0E0F0C; } :root.app-light .tour-does li span { border-color: #C3C9BD; background: #FFFFFF; color: #163300; }
:root.app-light .tour-x { border-color: #C3C9BD; background: #FFFFFF; color: #0E0F0C; }
:root.app-light .tour-later { color: #5F625D; }
:root.app-light .tour-page :is(.tour-x, .tour-go, .tour-later):focus-visible { outline-color: #163300; }
/* the drawings: forest shapes on the light page, lime for the touch of colour */
:root.app-light .ta-tile { border-color: #D3D8CD; background: #FFFFFF; } :root.app-light .ta-tile i { background: #C3C9BD; } :root.app-light .ta-tile b { background: #163300; }
:root.app-light .ta-free, :root.app-light .ta-track { background: #DCE2D5; stroke: #DCE2D5; }
:root.app-light .ta-free i { background: #163300; } :root.app-light .ta-fill { stroke: #163300; }
:root.app-light .ta-row { border-bottom-color: #E1E5DC; } :root.app-light .ta-row i { background: #ACB2A6; } :root.app-light .ta-row i.c0 { background: #163300; }
:root.app-light .ta-row b, :root.app-light .ta-bill b { background: #454745; } :root.app-light .ta-row em, :root.app-light .ta-bill em { background: #C3C9BD; }
:root.app-light .ta-bill i { border-color: #C3C9BD; }
:root.app-light .ta-bars span { background: #C3D6B2; }
:root.app-light .ta-bars span.on { background: #163300; }
:root.app-light .ta-card { border-color: #D3D8CD; background: #FFFFFF; } :root.app-light .ta-card:nth-child(3) { border-color: #163300; }
:root.app-light .ta-card i { background: #C3C9BD; } :root.app-light .ta-card b { background: #454745; }
:root.app-light .ta-doc { border-color: #ACB2A6; background: #FFFFFF; } :root.app-light .ta-doc b { color: #163300; } :root.app-light .ta-doc i { background: #C3C9BD; }
:root.app-light .ta-arrow { color: #5F625D; }
:root.app-light .ta-frow { border-bottom-color: #E1E5DC; } :root.app-light .ta-frow em { background: #ACB2A6; } :root.app-light .ta-frow em.c0 { background: #163300; }
:root.app-light .ta-frow b { background: #454745; } :root.app-light .ta-frow i { border-color: #ACB2A6; color: #163300; }