/*
 * Avenrow app reproduction: the phone, its screens, and the app fragments used around the page.
 * Rebuilt from references/real-app with the native theme tokens. Keep the authentic app colours
 * here (including grey #6F7C79 and the amber Unpaid pill): they represent the product UI.
 * The status stripes are the app's state language: blue scheduled · amber owed · green paid.
 * Sample values are filled in from js/content.js.
 */

/* ---------- device ---------- */
.device { position: relative; width: var(--dw, 360px); aspect-ratio: 414 / 868; }
.phone { position: absolute; left: 0; top: 0; width: 414px; height: 868px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.phone-shell { position: absolute; inset: 0; border-radius: 64px; padding: 12px;
  background: linear-gradient(145deg, #464a47 0%, #161917 40%, #2b2e2c 100%);
  box-shadow: 0 0 0 1.5px #646a66 inset, 0 0 0 4px #0b0d0c inset; }
.phone-shell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.5), transparent 25%, transparent 72%, rgba(180,255,225,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

.screen { position: relative; width: 390px; height: 844px; overflow: hidden; border-radius: 52px; background: var(--ivory); color: var(--ink);
  font-family: var(--app-sans); font-size: 16px; letter-spacing: -0.01em; isolation: isolate; }
.screen svg { width: 1em; height: 1em; display: block; }
.scr-light { position: absolute; inset: 0 0 auto 0; height: 360px; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 8% 0%, rgba(78,215,176,.24), transparent 60%), radial-gradient(80% 60% at 100% 0%, rgba(13,91,79,.10), transparent 70%); }
.sheen { position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 100%); }
.island { position: absolute; top: 11px; left: 50%; width: 122px; height: 36px; margin-left: -61px; border-radius: 20px; background: #050606; z-index: 20; }
.sb { position: absolute; inset: 0 0 auto 0; height: 54px; padding: 18px 30px 0 46px; display: flex; justify-content: space-between; z-index: 19; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.sb-i { display: flex; gap: 6px; align-items: center; }
.sb-i svg { width: auto; height: 12px; }
.sb-batt { width: 26px; height: 12.5px; border-radius: 4px; border: 1.2px solid rgba(27,42,39,.4); padding: 1.5px; }
.sb-batt i { display: block; height: 100%; width: 72%; background: var(--ink); border-radius: 2px; }

/* Real product media. To replace a reproduction with a screenshot or recording, put
   <img class="screen-media" …> or <video class="screen-media" …> inside .screen (390 × 844). */
.screen-media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---------- views ---------- */
.v { position: absolute; inset: 0; padding: 64px 22px 0; z-index: 1;
  transition: opacity 560ms var(--ease-out), transform 800ms var(--ease-out), filter 560ms var(--ease-out); }
.v-money { opacity: 0; transform: scale(1.06); filter: blur(8px); }
.screen[data-view="money"] .v-money { opacity: 1; transform: none; filter: none; }
.screen[data-view="money"] .v-today { opacity: 0; transform: scale(.94); filter: blur(8px); }
.screen[data-sheet="job"] .v-today { transform: scale(.955) translateY(6px); }

/* Home / Today */
.t-head { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 16px; }
.t-greet { font-family: var(--app-serif); font-size: 26px; color: var(--ink-2); letter-spacing: -0.01em; }
.t-name { font-family: var(--app-serif); font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; }
.t-date { color: var(--ink-2); font-size: 18px; margin-top: 6px; }
.t-bell { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--emerald-deep); box-shadow: 0 4px 14px -6px rgba(27,42,39,.25); margin-top: 26px; }
.t-bell svg { width: 22px; height: 22px; }
.t-row { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 12px; }
.lbl { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--ink-2); }
.lbl i { width: 3px; height: 18px; border-radius: 2px; background: var(--emerald); }
.link { color: var(--emerald); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 4px; }
.link svg { width: 14px; height: 14px; }

.prog { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 14px; padding: 20px 24px 22px; border-radius: 26px; color: var(--surface);
  background: linear-gradient(115deg, #1a6a5c, var(--emerald-deep)); box-shadow: 0 10px 24px -14px rgba(13,91,79,.7); }
.prog-l { font-size: 12px; letter-spacing: .2em; font-weight: 600; opacity: .7; }
.prog-r { font-family: var(--app-serif); font-size: 26px; }
.prog-track { grid-column: 1 / -1; height: 9px; border-radius: 9px; background: rgba(5,30,26,.55); overflow: hidden; }
.prog-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3fc9a2, var(--mint)); transform: scaleX(.03); transform-origin: 0 50%; transition: transform 800ms var(--ease-out); }
.screen:not([data-job="scheduled"]) .prog-fill { transform: scaleX(var(--done-k, .334)); } /* --done-k = 1 / jobs today, set by hero.js */

.jcs { display: grid; gap: 12px; margin-top: 14px; }
.jc, .ui-job { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 16px 16px 16px 24px; border-radius: 22px; background: var(--surface); box-shadow: 0 6px 18px -12px rgba(27,42,39,.35); overflow: hidden;
  transition: transform 300ms var(--ease-out); }
.jc-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--upcoming); transition: background-color 450ms ease; }
.jc-stripe.s-owed { background: var(--warning); }
.jc-stripe.s-paid { background: var(--success); }
.jc-title { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.jc-sub { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.jc-sub b { color: var(--ink); font-weight: 600; }
.jc-side { display: grid; justify-items: end; align-content: start; gap: 8px; }
.jc-price { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.jc-price.muted { color: var(--ink-3); }
.jc-action { position: relative; height: 32px; min-width: 112px; }
.pill { position: absolute; right: 0; top: 0; height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: opacity 280ms var(--ease-out), transform 380ms var(--ease-out), filter 280ms ease; }
.pill-done { background: var(--emerald-deep); color: var(--surface); }
.pill-unpaid { background: #FBEBD6; color: var(--owed); opacity: 0; transform: scale(.92); filter: blur(2px); }
.pill.press { animation: press 260ms var(--ease-out); }
@keyframes press { 40% { transform: scale(.93); } }

.screen[data-job="done"] #hs-job .jc-stripe, .ui-job[data-state="done"] .jc-stripe { background: var(--warning); }
.screen[data-job="done"] #hs-job .pill-done, .ui-job[data-state="done"] .pill-done { opacity: 0; transform: scale(.92); filter: blur(2px); }
.screen[data-job="done"] #hs-job .pill-unpaid, .ui-job[data-state="done"] .pill-unpaid { opacity: 1; transform: none; filter: none; }

.addjob { position: absolute; left: 22px; right: 22px; bottom: 108px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--surface); font-weight: 600; font-size: 18px;
  background: linear-gradient(100deg, #1a6a5c, var(--emerald-deep) 60%, #0a4a40); box-shadow: 0 12px 26px -14px rgba(13,91,79,.8); }
.addjob span { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--emerald-deep); display: grid; place-items: center; }
.addjob svg { width: 20px; height: 20px; }

.tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; padding: 10px 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(248,244,236,.96); border-top: 1px solid var(--border); z-index: 3; }
.tab { display: grid; justify-items: center; align-content: start; gap: 4px; font-size: 13px; color: var(--ink-3); font-weight: 500; transition: color 300ms ease; }
.tab svg { width: 28px; height: 28px; }
.tab .i-f { display: none; }
.screen[data-view="today"] .t-home, .screen[data-view="money"] .t-money { color: var(--emerald-deep); font-weight: 600; }
.screen[data-view="money"] .t-money .i-o { display: none; }
.screen[data-view="money"] .t-money .i-f { display: block; }

/* Money */
.m-top { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.m-title { font-family: var(--app-serif); font-size: 38px; letter-spacing: -0.02em; }
.m-nav { display: flex; gap: 8px; }
.m-nav span { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 4px 12px -8px rgba(27,42,39,.3); }
.m-nav svg { width: 16px; height: 16px; }
.m-set { display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: var(--emerald); font-weight: 500; font-size: 15px; margin-top: 8px; }
.m-set svg { width: 16px; height: 16px; }
.m-seg { margin-top: 14px; display: grid; grid-template-columns: 1fr 1.25fr 1.15fr; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset; font-size: 15px; color: var(--ink-2); text-align: center; }
.m-seg span { padding: 10px 0; border-radius: 999px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.m-seg svg { width: 12px; height: 12px; }
.m-seg .on { background: var(--emerald-deep); color: var(--surface); font-weight: 600; }
.net { margin-top: 16px; border-radius: 26px; overflow: hidden; box-shadow: 0 16px 30px -18px rgba(13,91,79,.7); }
.net-top { position: relative; display: grid; padding: 20px 24px 20px; color: var(--surface); background: linear-gradient(125deg, #17705f, var(--emerald-deep) 70%); }
.net-curve { position: absolute; right: 0; top: 0; width: 46% !important; height: 100% !important; }
.net-l { font-size: 12px; letter-spacing: .2em; font-weight: 600; opacity: .7; }
.net-v { font-family: var(--app-serif); font-size: 62px; line-height: 1.05; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.net-rule { height: 1px; background: linear-gradient(90deg, var(--brass), rgba(185,154,91,.15)); margin: 14px 0 12px; }
.net-sub { font-size: 16px; opacity: .95; display: flex; align-items: center; gap: 10px; }
.net-sub em { font-style: normal; color: var(--warning); }
.net-earned b { display: inline-block; padding: 1px 6px; margin: -1px -6px -1px -2px; border-radius: 8px; font-variant-numeric: tabular-nums; transition: background-color 600ms ease, box-shadow 600ms ease, color 600ms ease; }
.screen[data-money="after"] .net-earned b { background: rgba(108,255,192,.24); box-shadow: 0 0 0 1px rgba(108,255,192,.5); color: #EFFFF8; }
.net-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,253,248,.25); background: rgba(255,253,248,.06); }
.net-chip svg { width: 12px; height: 12px; }
.net-foil { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 0; padding: 16px 24px 16px; background: var(--counterfoil); }
.net-foil::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; border-top: 2px dotted var(--brass); opacity: .7; }
.net-foil .r { text-align: right; }
.foil-l { display: block; font-size: 12px; letter-spacing: .18em; font-weight: 600; color: var(--ink-2); }
.foil-l.owed, .foil-v.owed { color: var(--owed); }
.foil-l.paid { color: var(--emerald); }
.foil-v { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.foil-track { grid-column: 1/-1; height: 6px; border-radius: 6px; background: #F6D9B4; margin-top: 12px; overflow: hidden; }
.foil-track span { display: block; height: 100%; width: 100%; background: var(--emerald); transform: scaleX(var(--paid-before, 1)); transform-origin: 0 50%; transition: transform 1400ms var(--ease-out); }
.screen[data-money="after"] .foil-track span { transform: scaleX(var(--paid-after, .77)); } /* share of earned that is paid, set by hero.js */
.foil-note { grid-column: 1/-1; font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.m-row { margin: 22px 0 6px; }
.m-exp { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); color: var(--emerald); font-weight: 600; font-size: 15px; }
.m-exp svg { width: 14px; height: 14px; }
.m-sub { color: var(--ink-3); font-size: 13.5px; margin-bottom: 4px; }
.mc { position: relative; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 16px 26px; border-radius: 22px; background: var(--surface); overflow: hidden; box-shadow: 0 6px 18px -12px rgba(27,42,39,.35); }
.mc-sub { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.mc-r { text-align: right; }
.mc-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease-out); }
.mc-slot > div { overflow: hidden; min-height: 0; }
.mc-slot .mc { opacity: 0; transform: translateY(-8px); transition: opacity 500ms var(--ease-out) 200ms, transform 700ms var(--ease-out) 200ms; margin-bottom: 1px; }
.screen[data-money="after"] .mc-slot { grid-template-rows: 1fr; }
.screen[data-money="after"] .mc-slot .mc { opacity: 1; transform: none; }

/* Job sheet */
.scrim { position: absolute; inset: 0; z-index: 4; background: rgba(27,42,39,.34); opacity: 0; pointer-events: none; transition: opacity 480ms ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 66px; z-index: 5; padding: 12px 18px 0; border-radius: 34px 34px 0 0; background: #F4EFE6;
  transform: translateY(104%); transition: transform 680ms var(--ease-drawer); box-shadow: 0 -10px 40px -20px rgba(0,0,0,.4); }
.screen[data-sheet="job"] .sheet { transform: none; }
.screen[data-sheet="job"] .scrim { opacity: 1; }
.grab { display: block; width: 40px; height: 5px; border-radius: 5px; background: #D5CCBE; margin: 0 auto 10px; }
.sh-top { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.sh-lbl { font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--ink-2); }
.sh-x { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--border) inset; }
.sh-x svg { width: 18px; height: 18px; }
.sh-card { position: relative; margin-top: 12px; padding: 18px 22px 0 28px; border-radius: 24px; background: var(--surface); overflow: hidden; box-shadow: 0 8px 22px -14px rgba(27,42,39,.35); }
.sh-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--warning); }
.sh-state { color: var(--emerald); font-size: 13px; letter-spacing: .2em; font-weight: 700; }
.sh-time { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; }
.sh-day { color: var(--ink-2); font-size: 16px; margin-top: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sh-loc { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--app-serif); font-size: 30px; letter-spacing: -0.02em; }
.sh-loc svg { width: 22px; height: 22px; color: var(--warning); }
.sh-for { color: var(--ink-2); font-size: 16px; margin: 4px 0 0 32px; display: inline-flex; gap: 4px; align-items: center; padding-bottom: 12px; }
.sh-for svg { width: 12px; height: 12px; }
.sh-line { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--border); color: var(--ink-2); font-size: 17px; }
.sh-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sh-earned { color: var(--ink); font-weight: 700; font-size: 20px; margin: 0 -10px; padding: 11px 10px; border-radius: 12px; transition: background-color 600ms ease, box-shadow 600ms ease; }
.screen[data-glow="earned"] .sh-earned { background: rgba(78,215,176,.2); box-shadow: 0 0 0 1px rgba(15,122,100,.25) inset; border-top-color: transparent; }
.screen[data-glow="earned"] .sh-earned b { color: var(--emerald-deep); }
.sh-notes { margin: 6px -22px 0 -28px; padding: 14px 22px 16px 28px; background: var(--counterfoil); position: relative; }
.sh-notes::before { content: ""; position: absolute; top: 0; left: 24px; right: 22px; border-top: 2px dotted var(--brass); opacity: .6; }
.sh-nl { font-size: 12px; letter-spacing: .2em; font-weight: 600; color: var(--ink-2); }
.sh-nt { font-weight: 600; font-size: 16px; margin-top: 10px; }
.sh-nd { color: var(--ink-2); font-size: 14px; }
.sh-nv { font-size: 16px; margin-top: 4px; }
.sh-pay { margin-top: 14px; height: 70px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 20px; font-weight: 600; font-size: 19px; }
.sh-pay svg { width: 22px; height: 22px; color: var(--warning); }
.sh-btn { margin-left: auto; height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--emerald); color: var(--emerald); display: inline-flex; align-items: center; font-size: 17px; font-weight: 600; }
.sh-inv { display: flex; align-items: center; gap: 10px; margin: 18px 10px; color: var(--emerald); font-size: 17px; font-weight: 500; }
.sh-inv svg { width: 20px; height: 20px; }

/* Touch indicator */
.tap { position: absolute; z-index: 30; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.8) 0 30%, rgba(255,255,255,.25) 31% 60%, transparent 61%); box-shadow: 0 0 0 1px rgba(27,42,39,.15); }
.tap.go { animation: tap 720ms var(--ease-out); }
@keyframes tap { 0% { opacity: 0; transform: scale(1.4); } 25% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------- app fragments used on the page (outside the phone) ---------- */
.ui, .ui-job, .earned-badge, .mini-job, .vp-card, .inv-job { font-family: var(--app-sans); letter-spacing: -0.01em; }
.ui-job { width: 330px; color: var(--ink); box-shadow: 0 30px 60px -28px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.6) inset; }
.ui-job svg { width: 1em; height: 1em; }

.ui-sched { width: 300px; padding: 14px 14px 14px; border-radius: 24px; background: var(--ivory); color: var(--ink);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.6) inset; }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 2px 2px 12px; }
.wk span { display: grid; gap: 4px; justify-items: center; padding: 6px 0 7px; border-radius: 12px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wk i { font-style: normal; font-size: 9.5px; letter-spacing: .14em; color: var(--ink-3); font-weight: 600; }
.wk .sel { background: var(--emerald-deep); color: var(--surface); box-shadow: 0 8px 16px -8px rgba(13,91,79,.8); }
.wk .sel i { color: rgba(255,253,248,.7); }
.mini-job { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: 0 4px 14px -10px rgba(27,42,39,.4); color: var(--ink); }
.mini-job > div { display: grid; gap: 2px; flex: 1; }
.mini-job b { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.mini-job small { color: var(--ink-2); font-size: 13px; }
.mini-job .amt { font-weight: 600; font-size: 16px; }
.mini-job .jc-stripe { width: 4px; }

.earned-badge { display: grid; justify-items: start; gap: 2px; padding: 14px 22px 12px; border-radius: 20px; color: var(--surface);
  background: linear-gradient(135deg, #17705F, var(--emerald-deep) 65%, #0A4A40); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14) inset; }
.eb-l { font-size: 11.5px; letter-spacing: .22em; font-weight: 600; opacity: .72; }
.eb-v { font-family: var(--app-serif); font-size: 46px; line-height: 1.02; letter-spacing: -0.02em; }
.earned-badge.sm { padding: 10px 16px 8px; border-radius: 16px; }
.earned-badge.sm .eb-v { font-size: 32px; }
.earned-badge.sm .eb-l { font-size: 10px; }

.pill-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; font-family: var(--app-sans); font-weight: 600; font-size: 16px; white-space: nowrap; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); }
.pill-chip svg { width: 15px; height: 15px; }
.pill-chip.done { background: var(--emerald-deep); color: var(--surface); }
.pill-chip.done svg { display: none; }
.pill-chip.paid { background: var(--soft-mint); color: var(--emerald); }

/* ---------- reduced motion: the demo still steps through its states, with fades only ---------- */
.rm .v, .rm .sheet, .rm .pill { transition-property: opacity, background-color, color; }
.rm .v-money, .rm .screen[data-view="money"] .v-today, .rm .screen[data-sheet="job"] .v-today { transform: none; filter: none; }
.rm .sheet { transform: none; opacity: 0; }
.rm .screen[data-sheet="job"] .sheet { opacity: 1; }
.rm .tap.go, .rm .pill.press { animation: none; }