/* Dorax Finance — the Journey on a phone, v330 (features/phone/journey-land.js): the forest only in the menu; on the page the streak and its week,
   the sprint, what is owed, the reminders; the day's mark at the thumb over the bar. The page's own colours (--bq-*), the lime for the flame,
   what is marked and the main buttons. */
@media (max-width: 920px) {
  :root.land .jl { --jr-heart: #F2FFF8; display: flex; flex-direction: column; gap: 32px; padding: 26px 0 100px; }      /* room under the last row for the day's mark */
  :root.land .jl-top { display: flex; flex-direction: column; gap: 18px; }
  :root.land .jl-streak { display: flex; align-items: center; gap: 16px; }
  :root.land .jl-flame { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lk-lime) 28%, transparent), transparent 70%); color: var(--bq-ink-3); }
  :root.land .jl-flame.lit { color: var(--lk-lime); }
  :root.land .jl-flame .jr-fl { width: 34px; height: 34px; }
  :root.land .jl-flame.lit .jr-fl { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lk-lime) 55%, transparent)); animation: jl-flicker 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes jl-flicker { 0%, 100% { transform: none; } 50% { transform: scale(1.04, .97); } }
  :root.land .jl-sn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  :root.land .jl-sn b { color: var(--bq-ink); font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
  :root.land .jl-sn small { color: var(--bq-ink-2); font-size: 13.5px; line-height: 1.4; }
  :root.land .jl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
  :root.land .jl-week li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  :root.land .jl-week small { color: var(--bq-ink-3); font-size: 12px; font-weight: 600; }
  :root.land .jl-week small.now { color: var(--bq-ink); }
  :root.land .jl-d { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--lk-deep); transition: background-color 300ms ease-out, box-shadow 300ms ease-out, transform 160ms ease-out; -webkit-tap-highlight-color: transparent; }
  :root.land button.jl-d { cursor: pointer; }
  :root.land .jl-d svg { width: 18px; height: 18px; stroke-width: 2.6; animation: jl-pop 360ms var(--ease-ios, cubic-bezier(.32, .72, 0, 1)) both; }
  @keyframes jl-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  :root.land .jl-d.on { background: var(--lk-lime); }
  :root.land .jl-d.now { box-shadow: inset 0 0 0 2px var(--lk-lime); }
  :root.land .jl-d.past { background: var(--bq-card-2); }
  :root.land .jl-d.next { box-shadow: inset 0 0 0 1px var(--bq-line-2); }
  :root.land button.jl-d:active { transform: scale(.9); }
  :root.land .jl-d:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }

  /* the sprint */
  :root.land .jl-sec { display: flex; flex-direction: column; gap: 12px; }
  :root.land .jl-hh { display: flex; flex-direction: column; gap: 3px; }
  :root.land .jl-hh h2, :root.land .jl-h h2 { margin: 0; color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land .jl-hh small { color: var(--bq-ink-2); font-size: 13px; }
  :root.land .jl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  :root.land .jl-h > span { color: var(--bq-ink-2); font-size: 15px; font-weight: 600; }
  :root.land .jl-h > span.owe, :root.land .jl-am.owe { color: var(--bq-crit); }
  :root.land .jl-lens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  :root.land .jl-len { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 18px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink); transition: background-color 220ms ease-out, color 220ms ease-out, transform 120ms ease-out; }
  :root.land .jl-len b { font-size: 20px; font-weight: 600; line-height: 1.1; }
  :root.land .jl-len small { font-size: 12px; font-weight: 600; opacity: .8; }
  :root.land .jl-len.on { background: var(--lk-lime); box-shadow: none; color: var(--lk-deep); }
  :root.land .jl-len:active { transform: scale(.97); }
  :root.land .jl-len:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land .jl-start { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line-2); color: var(--bq-ink); font-size: 15px; font-weight: 600; transition: transform 120ms ease-out; }
  :root.land .jl-start svg { width: 16px; height: 16px; }
  :root.land .jl-start:active { transform: scale(.98); }
  :root.land .jl-start:focus-visible, :root.land .jl-edit:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land .jl-acts { display: flex; gap: 8px; }
  :root.land .jl-edit { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; color: var(--bq-accent); font-size: 15px; font-weight: 600; }
  :root.land .jl-hint { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--bq-ink-3); font-size: 13px; line-height: 1.4; }
  :root.land .jl-hint svg { flex: none; width: 18px; height: 18px; color: var(--bq-accent); }
  :root.land .jl-note { margin: 0; color: var(--bq-ink-2); font-size: 13px; line-height: 1.45; }
  :root.land .jl-fig { display: flex; align-items: baseline; gap: 6px; color: var(--bq-ink-2); font-size: 15px; }
  :root.land .jl-fig > b:first-child { color: var(--bq-ink); font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
  :root.land .jl-fig .jl-pct { margin-left: auto; color: var(--bq-accent); font-size: 15px; }
  :root.land .jl-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bq-bar-track); }
  :root.land .jl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lk-lime); transform-origin: left; animation: jl-grow 700ms var(--ease) 120ms both; }
  @keyframes jl-grow { from { transform: scaleX(0); } to { transform: none; } }

  /* what is owed, the reminders: rows with no box */
  :root.land .jl-rows { display: flex; flex-direction: column; }
  :root.land .jl-rw { position: relative; display: flex; align-items: center; gap: 4px; }
  :root.land .jl-row { all: unset; position: relative; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 0; color: var(--bq-ink); text-decoration: none; }
  :root.land .jl-rows > :is(.jl-row, .jl-rw) + :is(.jl-row, .jl-rw)::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--bq-line); }
  :root.land .jl-row:active { opacity: .7; }
  :root.land .jl-row:focus-visible, :root.land .jl-ed:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 14px; }
  :root.land .jl-lg { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bq-card-2); color: var(--bq-ink-2); font-size: 14px; font-weight: 700; }
  :root.land .jl-lg .inst, :root.land .jl-lg .inst img { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; }
  :root.land .jl-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bq-circle); color: var(--bq-accent); }
  :root.land .jl-ic svg { width: 18px; height: 18px; }
  :root.land .jl-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.land .jl-t b { overflow: hidden; color: var(--bq-ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  :root.land .jl-t small { color: var(--bq-ink-2); font-size: 12.5px; line-height: 1.35; }
  :root.land .jl-mini { display: block; width: 96px; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: var(--bq-bar-track); }
  :root.land .jl-mini i { display: block; height: 100%; border-radius: inherit; background: var(--lk-lime); }
  :root.land .jl-am { flex: none; color: var(--bq-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
  :root.land .jl-go { flex: none; display: grid; color: var(--bq-ink-3); }
  :root.land .jl-go svg { width: 16px; height: 16px; }
  :root.land .jl-ed { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--bq-ink-3); -webkit-tap-highlight-color: transparent; }
  :root.land .jl-ed svg { width: 17px; height: 17px; }
  :root.land .jl-remind { margin-top: -18px; }

  /* the day's mark: at the thumb, over the bar */
  :root.land .jl-daily { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: calc(max(12px, calc(var(--safe-b) - 14px)) + 70px); }
  :root.land .jl-mark { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 999px; background: var(--lk-lime); color: var(--lk-deep); font-size: 15px; font-weight: 600; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55); transition: background-color 300ms ease-out, color 300ms ease-out, transform 120ms ease-out; animation: txl-add-in 420ms var(--ease-ios, cubic-bezier(.32, .72, 0, 1)) 120ms both; }
  :root.land .jl-mark svg { width: 17px; height: 17px; stroke-width: 2.4; }
  :root.land .jl-mark.done { background: color-mix(in srgb, var(--lk-lime) 18%, var(--bq-page)); color: var(--bq-accent); }
  :root.land .jl-mark:active { transform: scale(.98); }
  :root.land .jl-mark:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) { :root.land :is(.jl-flame.lit .jr-fl, .jl-d svg, .jl-bar i, .jl-mark) { animation: none; } :root.land :is(.jl-d, .jl-len, .jl-mark) { transition: none; } }
}