.a-screen { background:#9bb59d; color:#10251b; }
.a-home { padding:42px 24px calc(118px + env(safe-area-inset-bottom,0px)); }
.a-home > h1, .a-tree-head h1 { margin:0; color:#000; font-size:30px; }
.a-footprint-total { margin:16px 0 22px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.a-footprint-total strong { color:#000; font-size:40px; letter-spacing:-.03em; }
.a-footprint-total span { color:#274735; font-size:12px; }
.a-view-toggle { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.a-view-toggle button { height:54px; border:0; border-radius:20px; background:white; color:#111; }
.a-view-toggle button.active { background:#4a3d35; color:white; }
.a-home-visual { min-height:210px; margin:24px 0 30px; }
.a-line-chart { width:100%; height:165px; }
.a-chart-labels { display:flex; justify-content:space-between; color:white; font-size:11px; }
.a-calendar-head { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; color:white; text-align:center; }
.a-calendar-head button { border:0; background:transparent; color:white; font-size:28px; }
.a-calendar-week,.a-calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.a-calendar-week { margin:13px 0 8px; color:rgba(255,255,255,.65); text-align:center; font-size:11px; font-weight:800; }
.a-calendar-grid > span,.a-calendar-grid button { aspect-ratio:1; }
.a-calendar-grid button { position:relative; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:white; }
.a-calendar-grid button.has-data::after { content:""; position:absolute; left:50%; bottom:6px; width:5px; height:5px; transform:translateX(-50%); border-radius:50%; background:#58f0b1; }
.a-history-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:12px; }
.a-history-head h2 { margin:0; color:#000; font-size:23px; }
.a-history-head p { margin:4px 0 0; color:#294b38; font-size:11px; }
.a-history-head > span { padding:6px 9px; border-radius:10px; background:rgba(255,255,255,.35); color:#294b38; font-size:9px; white-space:nowrap; }
.a-trip-list { width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.a-trip-card { width:100%; min-width:0; padding:11px 12px; overflow:hidden; border-radius:17px; background:#f7fbf8; box-shadow:0 4px 10px rgba(35,63,44,.13); }
.a-trip-head { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.a-trip-head strong { color:#10251b; font-size:14px; }
.a-trip-head p { margin:2px 0 0; color:#607268; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a-trip-head > b { flex:0 0 auto; color:#2f7a4f; font-size:13px; font-weight:850; white-space:nowrap; }
.a-segment-chain { width:calc(100% + 4px); min-width:0; max-width:calc(100% + 4px); margin:7px -2px 6px; padding:6px 2px; display:flex; align-items:center; gap:4px; overflow-x:auto; border-top:1px solid #dfe8e1; border-bottom:1px solid #dfe8e1; scrollbar-width:none; }
.a-segment-chain::-webkit-scrollbar { display:none; }
.a-segment-step { min-width:62px; text-align:center; }
.a-segment-icon { display:inline-block; margin-right:3px; font-size:14px; vertical-align:middle; }
.a-segment-step strong { display:inline-block; vertical-align:middle; }
.a-segment-step strong { margin:0; font-size:8px; }
.a-segment-step small { margin-top:2px; color:#65776c; font-size:6px; white-space:nowrap; }
.a-segment-arrow { color:#6d8074; font-size:16px; }
.a-trip-foot { display:flex; align-items:center; gap:6px; color:#64756b; font-size:8px; }
.a-trip-foot > span { padding:3px 5px; border-radius:7px; background:#e9efea; }
.a-trip-foot .synced { color:#2d714c; background:#e1f0e5; }
.a-trip-foot .local_only,.a-trip-foot .modified { color:#7d611d; background:#f7ebc7; }
.a-trip-foot button { width:24px; height:24px; margin-left:auto; border:0; background:transparent; color:#d14d48; }
.a-trip-foot svg { width:15px; }
.a-empty-card { padding:26px; border-radius:20px; background:rgba(255,255,255,.8); text-align:center; }
.a-empty-card h3 { margin:0; }
.a-empty-card p { color:#607268; font-size:12px; }
.a-empty-card button { min-height:44px; border:0; border-radius:14px; padding:0 15px; background:#4a3d35; color:white; font-weight:700; }

.header-bar p { margin:5px 0 0; color:rgba(255,255,255,.82); font-size:11px; }
.a-manual { padding:20px 20px calc(116px + env(safe-area-inset-bottom,0px)); }
.a-privacy-note { padding:15px; border-radius:16px; background:#e4f0e7; border:1px solid #c7ddcc; }
.a-privacy-note strong { color:#265238; font-size:13px; }
.a-privacy-note p { margin:5px 0 0; color:#527060; font-size:10px; line-height:1.45; }
.a-section-title { margin:22px 0 10px; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.a-section-title h2 { margin:0; font-size:20px; }
.a-section-title p { margin:3px 0 0; color:#66746c; font-size:10px; }
.a-section-title button { min-height:38px; border:1px solid #4a3d35; border-radius:12px; padding:0 12px; background:white; color:#4a3d35; font-weight:700; }
.a-segment-editor { display:grid; gap:10px; }
.a-segment-editor article { padding:14px; border:1px solid #dbe3dd; border-radius:16px; background:#f8fcfa; }
.a-editor-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.a-editor-head strong { font-size:13px; }
.a-editor-head button { width:30px; height:30px; border:0; border-radius:9px; background:#edf2ee; color:#39483f; }
.a-editor-head button:last-child { color:#b94b45; }
.a-editor-head button:disabled { opacity:.32; }
.a-editor-fields { display:grid; grid-template-columns:1.35fr .8fr; gap:9px; margin-top:12px; }
.a-editor-fields label,.a-manual-fields label { color:#506258; font-size:9px; font-weight:700; }
.a-editor-fields select,.a-editor-fields input,.a-manual-fields select,.a-manual-fields input { width:100%; min-height:44px; margin-top:5px; border:1px solid #aebdb3; border-radius:11px; padding:0 10px; background:white; color:#10251b; }
.a-calculated-total { margin:12px 0; padding:17px; border-radius:17px; background:#4a3d35; color:white; }
.a-calculated-total span { color:rgba(255,255,255,.65); font-size:9px; }
.a-calculated-total strong { display:block; margin:5px 0 2px; font-size:24px; }
.a-calculated-total p { margin:0; color:rgba(255,255,255,.72); font-size:9px; }
.a-manual-fields { display:grid; gap:10px; margin:14px 0; }
.a-save-button { width:100%; min-height:56px; border:0; border-radius:80px; background:#4a3d35; color:white; font-size:16px; font-weight:800; }
.a-success { color:#2e7d32; text-align:center; font-weight:700; }

.a-tree-page { padding:42px 20px calc(122px + env(safe-area-inset-bottom,0px)); }
.a-tree-head { display:flex; align-items:center; justify-content:space-between; }
.a-tree-head button { min-height:44px; border:0; border-radius:20px; padding:0 13px; background:rgba(255,255,255,.32); color:#111; font-weight:700; }
.a-tree-hero { min-height:390px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.a-tree-hero > img { width:280px; height:270px; object-fit:contain; }
.a-tree-summary { width:100%; margin-top:-20px; padding:18px; border-radius:22px; background:rgba(255,255,255,.86); text-align:center; box-shadow:0 5px 12px rgba(45,72,51,.15); }
.a-tree-summary p { margin:0 0 4px; color:#68776e; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.a-tree-summary h2 { margin:0; font-size:20px; }
.a-tree-summary strong { display:block; margin:7px 0 2px; font-size:27px; }
.a-tree-summary span { color:#4e7d5a; font-size:10px; font-weight:700; }
.a-tree-card { margin-top:14px; padding:18px; border-radius:20px; background:#f5faf6; box-shadow:0 4px 10px rgba(45,72,51,.12); }
.a-tree-card > h2 { margin:0 0 14px; font-size:20px; }
.a-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.a-stat-grid div { padding:13px; border-radius:13px; background:#e8f0e9; }
.a-stat-grid strong,.a-stat-grid span { display:block; }
.a-stat-grid strong { font-size:17px; }
.a-stat-grid span { margin-top:2px; color:#617068; font-size:8px; }
.a-tree-card.campus { background:#f1f8f4; }
.a-campus-title { display:flex; align-items:end; justify-content:space-between; gap:10px; }
.a-campus-title p { margin:0 0 2px; color:#64806f; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.a-campus-title h2 { margin:0; font-size:22px; }
.a-campus-title select { max-width:138px; min-height:40px; border:1px solid #9aad9e; border-radius:12px; padding:0 9px; background:white; color:#193429; }
.a-campus-tree { margin:16px 0; padding:14px; border-radius:17px; background:#dfece1; display:grid; grid-template-columns:115px 1fr; align-items:center; }
.a-campus-tree img { width:115px; height:125px; object-fit:contain; }
.a-campus-tree h3 { margin:0; font-size:17px; }
.a-campus-tree p { margin:6px 0; color:#4f6b5a; font-size:9px; line-height:1.4; }
.a-campus-tree span { font-size:9px; font-weight:700; color:#a34f3f; }
.a-campus-tree span.good { color:#2f774d; }
.a-campus-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.a-campus-stats div { padding:10px 5px; border-radius:12px; background:white; text-align:center; }
.a-campus-stats strong,.a-campus-stats span { display:block; }
.a-campus-stats strong { font-size:14px; }
.a-campus-stats span { margin-top:3px; color:#66766d; font-size:7px; }
.a-campus-modes { margin-top:15px; display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
.a-campus-modes > strong { margin-right:auto; font-size:10px; white-space:nowrap; }
.a-campus-modes span { padding:7px 8px; border-radius:10px; background:white; font-size:8px; white-space:nowrap; }
.a-campus-modes b { color:#2f704a; }
.a-your-campus-impact { margin-top:14px; padding:12px; border-radius:13px; background:#4a3d35; color:white; display:flex; justify-content:space-between; gap:8px; font-size:9px; }
.a-your-campus-impact span { color:#cce3d2; }
.a-campus-privacy { margin-top:12px; padding:12px; border-left:3px solid #4e7d5a; background:#e5efe7; }
.a-campus-privacy strong { font-size:10px; }
.a-campus-privacy p { margin:4px 0 0; color:#587061; font-size:8px; line-height:1.45; }

.a-tree-gallery-page { padding:42px 20px calc(122px + env(safe-area-inset-bottom,0px)); }
.a-gallery-head { display:flex; align-items:center; gap:12px; }
.a-gallery-head > button { width:42px; height:42px; flex:0 0 auto; border:0; border-radius:15px; background:rgba(255,255,255,.4); color:#183326; font-size:21px; }
.a-gallery-head p { margin:0 0 2px; color:#5a7666; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.a-gallery-head h1 { margin:0; color:#10251b; font-size:27px; letter-spacing:-.03em; }
.a-gallery-intro { margin:18px 0; padding:13px 15px; border-radius:15px; background:rgba(255,255,255,.45); color:#456353; font-size:10px; }
.a-tree-gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.a-tree-gallery-grid article { position:relative; min-height:218px; padding:12px; overflow:hidden; border:1px solid rgba(48,86,60,.1); border-radius:19px; background:rgba(247,251,248,.82); text-align:center; box-shadow:0 6px 16px rgba(35,63,44,.08); }
.a-tree-gallery-grid article.active { border:2px solid #4e8a61; background:#e3f0e6; }
.a-tree-gallery-grid article > span { position:absolute; top:9px; left:9px; padding:4px 6px; border-radius:7px; background:#e8efe9; color:#587064; font-size:7px; font-weight:800; }
.a-tree-gallery-grid article.active > span { background:#4e8a61; color:white; }
.a-tree-gallery-grid img { width:112px; height:112px; object-fit:contain; }
.a-tree-gallery-grid h2 { margin:0; color:#173428; font-size:15px; }
.a-tree-gallery-grid p { margin:3px 0; color:#4e725d; font-size:8px; font-weight:700; }
.a-tree-gallery-grid small { display:block; color:#6b7b72; font-size:7px; line-height:1.3; }
@media(max-width:420px){

  .a-campus-tree { grid-template-columns:95px 1fr; }
  .a-campus-tree img { width:95px; }
}

.a-overview-page { padding:42px 20px calc(122px + env(safe-area-inset-bottom,0px)); }
.a-overview-head p,.a-overview-section-head p { margin:0 0 3px; color:#4e6d5b; font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.a-overview-head h1 { margin:0 0 18px; color:#000; font-size:30px; }
.a-target-card { padding:20px; border-radius:22px; background:#4a3d35; color:white; box-shadow:0 8px 18px rgba(42,57,46,.18); }
.a-target-top { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.a-target-top span,.a-target-top strong { display:block; }
.a-target-top span { color:rgba(255,255,255,.66); font-size:9px; }
.a-target-top strong { margin-top:4px; font-size:31px; }
.a-target-top b { padding:7px 9px; border-radius:10px; background:rgba(88,240,177,.15); color:#83f2be; font-size:9px; }
.a-target-track { height:8px; margin:16px 0 7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.15); }
.a-target-track span { display:block; height:100%; border-radius:inherit; background:#58f0b1; }
.a-target-card p { margin:0; color:rgba(255,255,255,.7); font-size:8px; }
.a-overview-stats { margin:12px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.a-overview-stats div { padding:14px; border-radius:15px; background:rgba(248,252,249,.86); }
.a-overview-stats strong,.a-overview-stats span { display:block; }
.a-overview-stats strong { font-size:17px; }
.a-overview-stats span { margin-top:2px; color:#607268; font-size:8px; }
.a-overview-modes { padding:18px; border-radius:20px; background:#f5faf6; }
.a-overview-section-head { margin-bottom:16px; display:flex; align-items:end; justify-content:space-between; gap:10px; }
.a-overview-section-head h2 { margin:0; font-size:21px; }
.a-overview-section-head > span { color:#6b7b72; font-size:8px; }
.a-mode-row { margin:12px 0; }
.a-mode-row > div { display:flex; justify-content:space-between; gap:10px; font-size:10px; }
.a-mode-row i { display:block; height:7px; margin:5px 0 3px; overflow:hidden; border-radius:99px; background:#e1e9e3; }
.a-mode-row i b { display:block; height:100%; border-radius:inherit; background:#4e8a61; }
.a-mode-row small { color:#708078; font-size:7px; }
.a-target-note { margin:12px 5px 0; color:#4f6959; font-size:8px; line-height:1.45; text-align:center; }
.a-dashboard { padding:34px 20px calc(122px + env(safe-area-inset-bottom,0px)); }
.a-dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.a-dashboard-brand { min-width:0; display:flex; align-items:center; gap:11px; }
.a-dashboard-brand img { width:70px; height:70px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 6px 9px rgba(23,55,36,.12)); }
.a-dashboard-brand span { color:#3e6d50; font-size:8px; font-weight:900; letter-spacing:.2em; }
.a-dashboard-brand p { margin:3px 0 0; color:#42604e; font-size:10px; }
.a-dashboard-brand h1 { margin:0; color:#0d2419; font-size:24px; line-height:1.05; letter-spacing:-.035em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a-dashboard-avatar { width:43px; height:43px; flex:0 0 auto; border:1px solid rgba(255,255,255,.7); border-radius:15px; background:rgba(255,255,255,.48); color:#173428; font-weight:850; }
.a-dashboard-impact { margin:18px 0 12px; padding:21px; border-radius:24px; background:#4a3d35; color:white; display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 10px 23px rgba(41,57,45,.18); }
.a-dashboard-impact p { margin:0 0 4px; color:rgba(255,255,255,.62); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.a-dashboard-impact > div:first-child > strong { display:block; font-size:34px; letter-spacing:-.035em; }
.a-dashboard-impact > div:first-child > span { display:block; margin-top:3px; color:rgba(255,255,255,.68); font-size:8px; }
.a-dashboard-change { min-width:82px; padding:10px 9px; border-radius:15px; background:rgba(255,255,255,.09); text-align:center; }
.a-dashboard-change strong,.a-dashboard-change span { display:block; }
.a-dashboard-change strong { color:#f2bb8d; font-size:16px; }
.a-dashboard-change.good strong { color:#83ddb0; }
.a-dashboard-change span { margin-top:3px; color:rgba(255,255,255,.62); font-size:7px; line-height:1.3; }
.a-dashboard-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.a-dashboard-actions button { min-height:82px; padding:13px; border:0; border-radius:19px; background:rgba(255,255,255,.72); color:#173428; text-align:left; box-shadow:0 5px 14px rgba(35,63,44,.09); }
.a-dashboard-actions button.primary { background:#dfeee2; }
.a-dashboard-actions span,.a-dashboard-actions strong,.a-dashboard-actions small { display:block; }
.a-dashboard-actions span { margin-bottom:7px; color:#3d7752; font-size:19px; }
.a-dashboard-actions strong { font-size:12px; }
.a-dashboard-actions small { margin-top:2px; color:#667a6e; font-size:8px; }
.a-dashboard-canopy { position:relative; min-height:170px; margin:12px 0 20px; padding:20px 145px 20px 20px; overflow:hidden; border-radius:24px; background:rgba(247,251,248,.84); box-shadow:0 7px 18px rgba(35,63,44,.1); }
.a-dashboard-canopy p { margin:0 0 3px; color:#4f755e; font-size:8px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.a-dashboard-canopy h2 { margin:0; color:#173428; font-size:23px; }
.a-dashboard-canopy > div > span { display:block; margin:7px 0 12px; color:#5a6d62; font-size:9px; line-height:1.35; }
.a-dashboard-canopy button { border:0; padding:0; background:transparent; color:#39734e; font-size:9px; font-weight:850; }
.a-dashboard-canopy img { position:absolute; right:3px; bottom:-2px; width:148px; height:156px; object-fit:contain; filter:drop-shadow(0 9px 10px rgba(39,74,49,.14)); }
.a-dashboard-section-head { margin:0 2px 10px; display:flex; align-items:end; justify-content:space-between; gap:10px; }
.a-dashboard-section-head p { margin:0 0 2px; color:#52705e; font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.12em; }
.a-dashboard-section-head h2 { color:#112b20; font-size:21px; }
.a-dashboard-section-head button { border:0; background:transparent; color:#3e704f; font-size:9px; font-weight:800; }
.a-dashboard-trips { display:grid; gap:8px; }
.a-dashboard-trip { min-width:0; padding:11px 12px; border-radius:17px; background:rgba(248,252,249,.88); display:flex; align-items:start; justify-content:space-between; gap:10px; box-shadow:0 4px 11px rgba(35,63,44,.08); }
.a-dashboard-trip-main { min-width:0; }
.a-dashboard-trip-main > strong { display:block; overflow:hidden; color:#173428; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.a-dashboard-trip-main > p { margin:2px 0 5px; color:#68796f; font-size:7px; }
.a-dashboard-modes { display:flex; align-items:center; gap:3px; }
.a-dashboard-modes span { font-size:12px; }
.a-dashboard-modes i { color:#73857a; font-size:8px; font-style:normal; }
.a-dashboard-trip > b { flex:0 0 auto; color:#2f7a4f; font-size:10px; white-space:nowrap; }
@media(max-width:380px) {
  .a-dashboard { padding-left:16px; padding-right:16px; }
  .a-dashboard-brand img { width:62px; height:62px; }
  .a-dashboard-brand h1 { font-size:21px; }
  .a-dashboard-canopy { padding-right:125px; }
  .a-dashboard-canopy img { width:132px; }
}
/* Landing and history use the same trip card; compact only removes secondary actions. */
.a-trip-card.compact { padding:9px 11px; border-radius:16px; }
.a-trip-card.compact .a-trip-head strong { font-size:12px; }
.a-trip-card.compact .a-trip-head > b { font-size:11px; }
.a-trip-card.compact .a-segment-chain { margin:5px -2px 0; padding:5px 2px 2px; border-bottom:0; }
.a-trip-card.compact .a-segment-step { min-width:50px; }
.a-trip-card.compact .a-segment-icon { font-size:13px; }
.a-trip-card.compact .a-segment-step strong { font-size:7px; }
.a-trip-card.compact .a-segment-step small { display:none; }
.a-trip-card.compact .a-segment-arrow { font-size:12px; }
.a-sync-state { display:inline-flex; align-items:center; gap:4px; }
.a-sync-state i { width:14px; height:14px; display:inline-grid; place-items:center; border-radius:50%; background:rgba(45,113,76,.12); font-size:8px; font-style:normal; font-weight:900; }
.a-sync-state.local_only i,.a-sync-state.modified i { background:rgba(125,97,29,.13); }
.a-sync-state.delete_pending { color:#a24c45; background:#f5dedb; }
.a-sync-state.delete_pending i { background:rgba(162,76,69,.12); }
.a-dashboard-trips .a-trip-card { box-shadow:0 4px 11px rgba(35,63,44,.08); }
/* Overview composition circle and rolling mobility report. */
.a-overview-head h1 { margin-bottom:16px; }
.a-overview-hero { padding:18px; border-radius:24px; background:rgba(248,252,249,.88); display:grid; grid-template-columns:160px minmax(0,1fr); align-items:center; gap:15px; box-shadow:0 8px 20px rgba(35,63,44,.11); }
.a-overview-circle { position:relative; width:160px; height:160px; display:grid; place-items:center; }
.a-overview-donut { position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(24,62,40,.05); }
.a-overview-donut::after { content:""; position:absolute; inset:25px; border-radius:50%; background:#f6faf7; box-shadow:inset 0 0 0 1px rgba(24,62,40,.06); }
.a-overview-center { position:relative; z-index:1; width:105px; text-align:center; }
.a-overview-center strong,.a-overview-center span { display:block; }
.a-overview-center strong { color:#173428; font-size:19px; letter-spacing:-.035em; }
.a-overview-center span { margin-top:3px; color:#6b7b72; font-size:7px; line-height:1.25; }
.a-overview-legend > p { margin:0 0 8px; color:#4e6d5b; font-size:8px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.a-overview-legend > div { margin:6px 0; display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:5px; color:#314c3d; font-size:8px; }
.a-overview-legend > div > i { width:8px; height:8px; border-radius:50%; }
.a-overview-legend > div strong { color:#173428; font-size:8px; }
.a-overview-legend > small { display:block; margin-top:9px; color:#6a7c71; font-size:7px; line-height:1.35; }
.a-no-impact { color:#6a7c71; font-size:8px; }
.a-overview-target { margin:11px 0; padding:16px 18px; border-radius:19px; background:#4a3d35; color:white; box-shadow:0 7px 17px rgba(42,57,46,.15); }
.a-overview-target-head { display:flex; align-items:end; justify-content:space-between; gap:10px; }
.a-overview-target-head p { margin:0 0 2px; color:rgba(255,255,255,.58); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.a-overview-target-head strong { font-size:17px; }
.a-overview-target-head > span { color:#82eab6; font-size:9px; font-weight:800; }
.a-overview-target .a-target-track { height:9px; margin:12px 0 6px; }
.a-target-scale { display:flex; justify-content:space-between; gap:10px; color:rgba(255,255,255,.5); font-size:7px; }
.a-target-scale b { color:rgba(255,255,255,.72); font-weight:700; }
.a-overview-modes { box-shadow:0 7px 18px rgba(35,63,44,.08); }
.a-mode-row > div > span { display:flex; align-items:center; gap:5px; }
.a-mode-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; }
.a-mode-row .a-mode-track { display:block; height:7px; margin:5px 0 3px; overflow:hidden; border-radius:99px; background:#e1e9e3; }
.a-mode-row .a-mode-track b { display:block; height:100%; border-radius:inherit; }
.a-trip-card.compact .a-segment-step small { display:block; margin-top:2px; color:#65776c; font-size:6px; line-height:1; }
@media(max-width:380px) {
  .a-overview-hero { grid-template-columns:145px minmax(0,1fr); gap:10px; padding:15px; }
  .a-overview-circle { width:145px; height:145px; }
  .a-overview-donut::after { inset:23px; }
  .a-overview-center strong { font-size:17px; }
}
/* First-fold My Tree composition: tree gets the space, emissions card meets the nav. */
.a-tree-hero { min-height:calc(100svh - 170px); justify-content:flex-end; }
.a-tree-hero > img { width:min(335px,100%); height:clamp(320px,calc(100svh - 330px),470px); flex:0 0 auto; }
.a-tree-summary { flex:0 0 auto; margin-top:-34px; padding:16px 18px; }
.a-tree-summary strong { margin:5px 0 2px; font-size:29px; }
.a-tree-summary + * { margin-top:0; }
@supports(height:100dvh) {
  .a-tree-hero { min-height:calc(100dvh - 170px); }
  .a-tree-hero > img { height:clamp(320px,calc(100dvh - 330px),470px); }
}
/* Size the first fold against the prototype screen, not the outer browser. */
.a-tree-hero { min-height:calc(100% - 44px); }
.a-tree-hero > img { height:clamp(320px,48vh,430px); }
.a-overview-head { margin-bottom:16px; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.a-overview-head h1 { margin:0; }
.a-overview-toggle { flex:0 0 auto; padding:3px; display:grid; grid-template-columns:1fr 1fr; gap:3px; border-radius:13px; background:rgba(255,255,255,.42); }
.a-overview-toggle button { min-height:34px; border:0; border-radius:10px; padding:0 10px; background:transparent; color:#4f6d5c; font-size:9px; font-weight:800; }
.a-overview-toggle button.active { background:#4a3d35; color:white; box-shadow:0 5px 12px rgba(42,57,46,.15); }
.a-overview-target.distance { background:linear-gradient(135deg,#245a42,#367555); }
.a-overview-target.distance .a-target-track span { background:#9be1b8; }
.a-overview-target.distance .a-overview-target-head > span { color:#b9efce; }
@media(max-width:380px) {
  .a-overview-toggle button { padding:0 8px; }
}
/* Concepts A and B: static month landmarks plus expandable journey details. */
.a-month-marker{display:flex;align-items:center;gap:10px;margin:13px 2px 1px;color:#365948;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.a-month-marker i{height:1px;flex:1;background:#bdd0c1}.a-trip-head{display:block}.a-trip-main{display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) auto 18px;align-items:center;gap:9px;padding:0;border:0;background:transparent;color:inherit;text-align:left}.a-trip-date{display:grid;place-content:center;width:42px;height:42px;border-radius:12px;background:#e1ece3;text-align:center}.a-trip-date b{font-size:16px;line-height:1}.a-trip-date small{margin-top:3px;color:#587064;font-size:7px;font-weight:850;text-transform:uppercase}.a-trip-copy{min-width:0}.a-trip-copy strong,.a-trip-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.a-trip-copy strong{color:#10251b;font-size:13px}.a-trip-copy small{margin-top:3px;color:#607268;font-size:8px}.a-trip-emission{text-align:right;white-space:nowrap}.a-trip-emission b,.a-trip-emission small{display:block}.a-trip-emission b{color:#2f7a4f;font-size:12px;font-weight:850}.a-trip-emission small{margin-top:2px;color:#607268;font-size:7px}.a-trip-chevron{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e8f0ea;color:#416b51;font-size:13px;font-style:normal}.a-trip-card.expanded{border:1px solid rgba(47,122,79,.32);box-shadow:0 11px 23px rgba(35,63,44,.14)}.a-trip-detail-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:2px;padding:11px 0 0;border-top:1px solid #dfe8e1}.a-trip-detail-panel>div{padding:8px;border-radius:9px;background:#edf4ef}.a-trip-detail-panel span,.a-trip-detail-panel strong{display:block}.a-trip-detail-panel span{color:#607268;font-size:6px}.a-trip-detail-panel strong{margin-top:3px;color:#193428;font-size:8px}.a-trip-detail-panel button{grid-column:1/-1;padding:10px;border:0;border-radius:10px;background:#1d4d35;color:#fff;font-size:9px;font-weight:850}.a-trip-card.compact .a-trip-main{grid-template-columns:37px minmax(0,1fr) auto;gap:8px}.a-trip-card.compact .a-trip-date{width:37px;height:37px;border-radius:10px}.a-trip-card.compact .a-trip-date b{font-size:14px}.a-trip-card.compact .a-trip-copy strong{font-size:12px}.a-trip-card.compact .a-trip-emission b{font-size:11px}
/* Concept A/B tracked journey: detect, review and amend a segmented route. */
.a-tracking-page{min-height:100%;padding:25px 23px 128px;background:linear-gradient(155deg,#f5faf5 0%,#fbfcf8 46%,#e4f0e5 100%)}
.a-tracking-intro>span,.a-track-how>span,.a-track-review-head>div>span{color:#49735a;font-size:9px;font-weight:900;letter-spacing:.13em}.a-tracking-intro h1,.a-track-review-head h1{margin:7px 0 6px;color:#143323;font-size:32px;letter-spacing:-.05em}.a-tracking-intro p,.a-track-review-head p{margin:0;color:#64786b;font-size:13px;line-height:1.45}
.a-track-preview{position:relative;display:grid;grid-template-columns:102px minmax(0,1fr);align-items:center;gap:15px;min-height:154px;margin:26px 0 18px;padding:18px;border:1px solid #d9e6da;border-radius:25px;background:linear-gradient(145deg,#173d2b,#276247);box-shadow:0 15px 30px rgba(26,65,44,.2);overflow:hidden}.a-track-preview::after{content:"";position:absolute;width:150px;height:150px;right:-67px;bottom:-70px;border:28px solid rgba(178,227,178,.12);border-radius:50%}.a-track-preview-orbit{position:relative;display:grid;place-items:center;width:88px;height:88px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(255,255,255,.11)}.a-track-preview-orbit::before,.a-track-preview-orbit i{content:"";position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:50%}.a-track-preview-orbit::before{inset:11px}.a-track-preview-orbit i{inset:24px}.a-track-preview-orbit span{position:relative;color:#d6f5bd;font-size:38px;font-weight:700}.a-track-preview>div:last-child{position:relative;z-index:1}.a-track-preview span,.a-track-preview strong,.a-track-preview p{display:block}.a-track-preview span{color:#c8e9bd;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.09em}.a-track-preview strong{margin-top:5px;color:#fff;font-size:17px;line-height:1.15}.a-track-preview p{margin:7px 0 0;color:rgba(255,255,255,.72);font-size:10px;line-height:1.4}
.a-track-how{display:grid;gap:9px;padding:17px 15px;border:1px solid #dbe8dd;border-radius:19px;background:rgba(255,255,255,.68)}.a-track-how>span{margin-bottom:2px}.a-track-how div{display:flex;align-items:center;gap:10px}.a-track-how b{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#d9eadb;color:#23543a;font-size:9px}.a-track-how p{margin:0;color:#4e6656;font-size:11px}.a-track-start-actions{display:grid;gap:10px;margin-top:24px}.a-track-start-actions button{min-height:48px;border:0;border-radius:14px;background:transparent;color:#315542;font-size:11px;font-weight:850}.a-track-start-actions .a-track-start{background:#1e5439;color:#fff;box-shadow:0 11px 22px rgba(27,72,48,.21);font-size:13px}.a-track-start span{margin-right:7px;color:#d5f3c1;font-size:19px;vertical-align:-2px}
.a-tracking-active{background:#123725}.a-tracking-live{display:flex;min-height:100%;padding:19px 19px 26px;flex-direction:column;background:radial-gradient(circle at 20% 18%,rgba(154,220,149,.24),transparent 30%),linear-gradient(160deg,#123725,#0a2118)}.a-track-live-head{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;color:#fff}.a-track-live-head button{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.09);color:#fff;font-size:22px}.a-track-live-head span{display:block;color:#b7dbad;font-size:8px;font-weight:850;letter-spacing:.12em}.a-track-live-head h1{margin:3px 0 0;font-size:20px;letter-spacing:-.04em}.a-track-live-head>b{padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.1);font-size:10px}.a-track-map{position:relative;min-height:315px;margin:22px 0 0;border:1px solid rgba(209,241,204,.2);border-radius:26px;background:linear-gradient(140deg,rgba(222,244,210,.12),rgba(255,255,255,.02));overflow:hidden}.a-track-map::before,.a-track-map::after{content:"";position:absolute;border:1px solid rgba(209,241,204,.13);border-radius:44%}.a-track-map::before{width:270px;height:270px;top:-110px;right:-100px}.a-track-map::after{width:230px;height:230px;bottom:-130px;left:-90px}.a-track-line{position:absolute;z-index:1;top:61px;left:18%;width:59%;height:169px;border:4px solid #c8ecaf;border-left:0;border-bottom:0;border-radius:0 100px 0 0;transform:rotate(31deg);filter:drop-shadow(0 0 7px rgba(200,236,175,.75))}.a-track-stop{position:absolute;z-index:2;display:block;padding:6px 8px;border-radius:7px;background:#e5f6d2;color:#173b29;font-size:9px;font-weight:850;box-shadow:0 5px 12px rgba(0,0,0,.16)}.a-track-stop::before{content:"";position:absolute;width:10px;height:10px;left:50%;bottom:-7px;border:3px solid #e5f6d2;border-radius:50%;background:#245c3f;transform:translateX(-50%)}.a-track-stop.home{top:44px;left:12%}.a-track-stop.station{top:142px;left:44%}.a-track-stop.campus{right:10%;bottom:48px}.a-track-pulse{position:absolute;z-index:3;top:170px;left:48%;width:30px;height:30px;border:8px solid rgba(228,249,198,.24);border-radius:50%;animation:a-track-pulse 1.9s infinite}.a-track-pulse i{display:block;width:14px;height:14px;border-radius:50%;background:#e5f6d2;box-shadow:0 0 0 3px #245c3f}@keyframes a-track-pulse{50%{transform:scale(1.27);opacity:.55}}
.a-track-live-card{position:relative;z-index:4;margin:-35px 7px 0;padding:17px;border:1px solid rgba(255,255,255,.78);border-radius:21px;background:#f8fcf6;box-shadow:0 16px 28px rgba(0,0,0,.2)}.a-track-live-card>div{padding-right:42px}.a-track-live-card span,.a-track-live-card strong,.a-track-live-card small{display:block}.a-track-live-card span{color:#65816e;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.a-track-live-card strong{margin-top:4px;color:#173b29;font-size:16px}.a-track-live-card small{margin-top:4px;color:#5c7163;font-size:9px;line-height:1.35}.a-track-live-card>b{position:absolute;top:18px;right:17px;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#d9efce;color:#25563b;font-size:10px}.a-track-live-card .a-segment-chain{margin-top:14px;padding-top:12px;border-top:1px solid #dce9dc}.a-track-review-button{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:auto;padding:15px 16px;border:0;border-radius:16px;background:#d9efc8;color:#173b29;font-size:12px;font-weight:850;box-shadow:0 12px 23px rgba(0,0,0,.16)}.a-track-review-button b{font-size:11px}
.a-tracking-review{background:linear-gradient(160deg,#f8fcf6,#e7f1e5)}.a-track-review-head{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}.a-track-review-head>button{width:34px;height:34px;border:1px solid #d1e0d3;border-radius:50%;background:#fff;color:#335941;font-size:20px}.a-track-review-head h1{font-size:29px}.a-review-summary{display:flex;justify-content:space-between;align-items:center;gap:13px;margin:24px 0 13px;padding:15px;border:1px solid #d6e5d7;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(38,72,48,.08)}.a-review-summary span,.a-review-summary strong,.a-review-summary small{display:block}.a-review-summary span{color:#64806b;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.a-review-summary strong{margin-top:4px;color:#173b29;font-size:14px}.a-review-summary small{margin-top:5px;color:#617567;font-size:10px}.a-review-summary>b{display:grid;place-items:center;min-width:47px;height:47px;border-radius:50%;background:#def1d6;color:#2f6a45;font-size:13px}.a-review-summary>b small{margin:0;color:#4f785c;font-size:7px}.a-review-route{padding:17px;border:1px solid #d6e5d7;border-radius:20px;background:#fff}.a-review-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:11px}.a-review-section-head span{color:#64806b;font-size:8px;font-weight:850;letter-spacing:.09em}.a-review-section-head h2{margin:4px 0 0;color:#173b29;font-size:18px;letter-spacing:-.03em}.a-review-section-head>b{color:#2b7249;font-size:13px}.a-review-note{margin:12px 4px 19px;color:#5d7263;font-size:10px;line-height:1.45}.a-review-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px}.a-review-actions button{min-height:43px;border:1px solid #cbdccc;border-radius:12px;background:#fff;color:#315842;font-size:10px;font-weight:850}.a-review-actions .primary{grid-column:1/-1;border:0;background:#1d5137;color:#fff;box-shadow:0 9px 18px rgba(29,81,55,.18)}
/* Stronger route-match signal for Concepts A and B. */
.a-track-live-card>div:first-child{padding-right:55px}.a-live-match{position:absolute;top:15px;right:15px;display:grid;place-content:center;width:45px;height:45px;border-radius:50%;background:radial-gradient(circle,#f8fcf6 58%,transparent 60%),conic-gradient(#5ea677 0 92%,#dceadd 92% 100%);text-align:center}.a-live-match strong{margin:0;color:#1c5739;font-size:10px;line-height:1}.a-live-match small{margin:2px 0 0;color:#54725f;font-size:6px;font-weight:850;line-height:1;text-transform:uppercase}.a-review-summary em{display:flex;align-items:center;gap:5px;margin-top:9px;color:#397151;font-size:8px;font-style:normal;font-weight:850}.a-review-summary em i{width:6px;height:6px;border-radius:50%;background:#72b36d;box-shadow:0 0 0 3px #e5f3e4}.a-match-score{position:relative;display:grid;place-items:center;flex:0 0 70px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#fff 61%,transparent 63%),conic-gradient(#2e8051 0 92%,#dcebdc 92% 100%);box-shadow:inset 0 0 0 1px #d6e7d6}.a-match-score::after{content:"";position:absolute;inset:7px;border:1px solid rgba(49,117,73,.12);border-radius:50%}.a-match-score>div{position:relative;z-index:1;text-align:center}.a-match-score strong{margin:0;color:#1d5638;font-size:17px;line-height:1}.a-match-score small{margin:3px 0 0;color:#557462;font-size:6px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.05em}
/* Keep the active tracking action clear of the persistent bottom navigation. */
.a-tracking-live{padding-bottom:104px}

/* Contextual return control for the shared Concept A/B segmented editor. */
.a-manual-header{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:10px}.a-manual-back{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.36);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:23px;line-height:1}
/* Keep Concept A a direct, baseline-derived evolution: one app canvas throughout. */
.prototype-concept-a .white-page,.a-tracking-active,.a-tracking-page,.a-tracking-review,.a-tracking-live{background:#9bb59d}.a-track-live-head{color:#10251b}.a-track-live-head button{border-color:rgba(16,37,27,.24);background:rgba(255,255,255,.38);color:#10251b}.a-track-live-head span{color:#365948}.a-track-live-head>b{background:rgba(255,255,255,.48);color:#173428}.a-track-map{background:linear-gradient(140deg,#315d43,#1d4933);border-color:rgba(255,255,255,.34)}.a-track-map::before,.a-track-map::after{border-color:rgba(209,241,204,.2)}
/* The percentage and its label share a single, centered badge axis. */
.a-live-match{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;text-align:center}.a-live-match strong,.a-live-match small{width:100%;text-align:center}
/* Optical correction for the percentage glyphs inside the shared badge. */
.a-live-match strong,.a-live-match small{transform:translateX(1px)}

/* The match badge must not inherit the live-card copy inset. */
.a-track-live-card>.a-live-match{padding-right:0}