/* US build: reference-style Home / My plants / More tabs (locale/en/tabs.js). Sizes from the reference recording, 440 pt canvas. */
.app:has(.rt-head), .app:has(.rt-segs), .app:has(.rt-mh) { background: #F4F4F4; }
#appBody:has(.rt-head), #appBody:has(.rt-mh) { background: #F4F4F4; }
.app-body:has(.rt-head), .app-body:has(.rt-segs), .app-body:has(.rt-mh) { font-family: var(--sf); color: #111; padding-bottom: 28px; }
.rt-head { background: #F4F4F4; padding: calc(var(--sa) + 14px) 18px 4px; }
.rt-row { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.rt-loc { border: 0; background: none; padding: 0; font: 500 19px var(--sf); color: #111; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rt-caret { font-size: 13px; transform: translateY(1px); }
.rt-wx { display: flex; flex-direction: row-reverse; align-items: center; gap: 9px; font: 400 17px var(--sf); color: #8D8D8D; }
.rt-wx .ic { width: 26px; height: 26px; border-radius: 50%; background: #FDB813; color: #FDB813; stroke: #F5A400; box-shadow: inset 0 0 0 3px #FDC93A; }
.rt-search { margin-top: 10px; height: 46px; border: 1.6px solid #23A86A; border-radius: 23px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; color: #8D8D8D; }
.rt-search .ic { font-size: 18px; color: #8D8D8D; flex: none; }
.rt-search input { width: 130px; border: 0; outline: 0; background: none; font: 400 17px var(--sf); color: #111; }
.rt-search input:focus, .rt-search input:not(:placeholder-shown) { width: 220px; }
.rt-quick { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rt-quick button { height: 100px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font: 400 14.5px var(--sf); color: #222; cursor: pointer; }
.rt-qi { font-size: 32px; display: grid; place-items: center; }
.rt-qi .ic { stroke-width: 2.3; }
.rt-qi.g { color: #17A35F; } .rt-qi.o { color: #F39A1E; } .rt-qi.t { color: #2BB3C9; }
.rt-sec { margin-top: 26px; }
.rt-sec + .rt-sec { padding-top: 26px; border-top: 10px solid #EAEAEA; margin-top: 18px; }
.rt-head + #searchOut + .rt-sec { margin-top: 30px; }
.rt-sh { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; margin-bottom: 16px; }
.rt-sh h2 { margin: 0; font: 700 21px var(--sf); letter-spacing: -0.01em; color: #111; }
.rt-sh h2 u { color: #17A35F; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rt-dots { color: #8D8D8D; font-size: 13px; letter-spacing: 2px; }
.rt-hs { display: flex; gap: 12px; overflow-x: auto; padding: 0 18px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.rt-hs::-webkit-scrollbar { display: none; }
.rt-hs > * { scroll-snap-align: start; }
.rt-tr { flex: none; width: 204px; border: 0; padding: 0; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.07); text-align: left; cursor: pointer; }
.rt-tr img { display: block; width: 100%; height: 120px; object-fit: cover; }
.rt-tr b { display: block; padding: 21px 16px 22px; font: 400 19px var(--sf); color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-books { display: grid; grid-auto-flow: column; grid-template-rows: 152px 152px; grid-template-columns: 202px; grid-auto-columns: 102px; gap: 12px; overflow-x: auto; padding: 0 18px 6px; scrollbar-width: none; }
.rt-books::-webkit-scrollbar { display: none; }
.rt-book { position: relative; border: 0; padding: 0; border-radius: 4px 9px 9px 4px; overflow: hidden; background: #DECB9C; box-shadow: inset 6px 0 0 rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.12); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.rt-book.big { grid-row: span 2; grid-column: 1; }
.rt-bt { margin-top: 12px; text-align: center; font: 300 17px/20px var(--sf); color: #6F6043; }
.rt-book.big .rt-bt { margin-top: 26px; font-size: 41px; line-height: 47px; }
.rt-bc { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: italic 600 10px var(--sf); color: #6F6043; }
.rt-bc::before, .rt-bc::after { content: ''; width: 16px; height: 1px; background: #8B7A55; }
.rt-book.big .rt-bc { margin-top: 18px; font-size: 18px; gap: 12px; }
.rt-book.big .rt-bc::before, .rt-book.big .rt-bc::after { width: 50px; }
.rt-book img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 66px; object-fit: cover; }
.rt-book.big img { height: 150px; }
.rt-pc { flex: none; width: 170px; height: 218px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.07); padding: 18px 18px 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; }
.rt-ring { position: relative; width: 134px; height: 134px; display: grid; place-items: center; margin: 0 auto; }
.rt-ring img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; }
.rt-ring i { position: absolute; width: 24px; height: 24px; border: 3.5px solid #D8D8D8; }
.rt-ring i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.rt-ring i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.rt-ring i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.rt-ring i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.rt-pc b { margin-top: 18px; font: 400 21px var(--sf); color: #111; }
.rt-kh { flex: none; width: 240px; border: 0; padding: 0; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.07); text-align: left; cursor: pointer; }
.rt-kh img { display: block; width: 100%; height: 138px; object-fit: cover; }
.rt-kh b { display: block; padding: 22px 18px 24px; font: 400 19.5px var(--sf); color: #111; }
.rt-topic { flex: none; width: 268px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.07); padding: 14px; display: flex; gap: 12px; text-align: left; cursor: pointer; }
.rt-topic img { width: 78px; height: 96px; border-radius: 4px; object-fit: cover; flex: none; }
.rt-topic span { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.rt-topic b { font: 400 16.5px/21px var(--sf); color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rt-topic small { margin-top: 8px; font: 400 13px var(--sf); color: #8D8D8D; }
.rt-tags { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 16px 18px 4px; }
.rt-tags button { border: 0; border-radius: 4px; background: #E9E9E9; padding: 6px 10px; font: 400 13px var(--sf); color: #555; cursor: pointer; }
.rt-foot { margin-top: 26px; padding: 26px 18px 10px; border-top: 10px solid #EAEAEA; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rt-foot span { font: 400 16px var(--sf); color: #8D8D8D; }
.rt-foot a { font: 500 13px var(--sf); color: #17A35F; }
/* My plants */
.rt-segs { display: flex; justify-content: center; gap: 46px; background: #fff; padding: calc(var(--sa) + 16px) 0 0; }
.rt-segs button { position: relative; border: 0; background: none; padding: 0 2px 14px; font: 500 17px var(--sf); color: #8D8D8D; cursor: pointer; }
.rt-segs button.on { color: #17A35F; }
.rt-segs button.on::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #17A35F; }
.rt-mp { padding: 12px 16px 0; background: #F4F4F4; min-height: calc(100% - 46px); display: flex; flex-direction: column; }
.rt-srow { display: flex; align-items: center; gap: 10px; }
.rt-s2 { flex: 1; height: 38px; border-radius: 19px; background: #E9E9E9; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: #8D8D8D; }
.rt-s2 input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px var(--sf); color: #111; }
.rt-ib { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: #E9E9E9; color: #444; display: grid; place-items: center; font-size: 17px; letter-spacing: 1px; cursor: pointer; text-decoration: none; }
.rt-finder { margin-top: 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 16px; display: flex; gap: 14px; align-items: flex-start; text-align: left; cursor: pointer; }
.rt-fi { width: 40px; height: 40px; border-radius: 50%; background: #17A35F; color: #fff; display: grid; place-items: center; font-size: 22px; flex: none; }
.rt-finder b { display: block; font: 700 16px var(--sf); color: #111; }
.rt-finder small { display: block; margin-top: 3px; font: 400 13px var(--sf); color: #6D6D6D; }
.rt-finder em { display: block; margin-top: 8px; font: normal 600 13.5px var(--sf); color: #17A35F; }
.rt-alert { margin-top: 12px; display: flex; gap: 10px; align-items: center; background: #FFF4E5; border-radius: 12px; padding: 12px 14px; color: #B45309; font: 400 13px var(--sf); }
.rt-alert b { display: block; font: 700 14.5px var(--sf); color: #8A3B07; }
.rt-list { margin-top: 12px; }
.rt-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 30px 10px; }
.rt-empty-art { width: 120px; height: 110px; }
.rt-empty b { margin-top: 18px; font: 700 18px var(--sf); color: #111; }
.rt-empty p { margin: 8px 0 0; font: 400 14px/19px var(--sf); color: #6D6D6D; }
.rt-empty .rt-add { margin-top: 26px; }
.rt-add { align-self: center; margin: 24px 0 18px; height: 46px; padding: 0 30px; border: 0; border-radius: 23px; background: #17A35F; color: #fff; font: 600 16px var(--sf); display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* More */
.rt-mh { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sa) + 18px) 18px 4px; }
.rt-mh h1 { margin: 0; font: 700 29px var(--sf); letter-spacing: -0.02em; }
.rt-books-b { margin: 14px 18px 0; width: calc(100% - 36px); height: 98px; border: 0; border-radius: 10px; background: linear-gradient(90deg, #E9D9A9, #F1E5C1); display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 16px; overflow: hidden; text-align: left; cursor: pointer; }
.rt-books-b small { display: block; font: 700 14px var(--sf); color: #7A6123; }
.rt-books-b b { display: block; margin-top: 6px; font: 300 22px var(--sf); color: #7A6123; }
.rt-books-b img { height: 98px; width: 150px; object-fit: cover; object-position: right; }
.rt-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 18px; }
.rt-tool { height: 106px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font: 400 13px/15px var(--sf); color: #222; text-align: center; cursor: pointer; padding: 0 6px; }
.rt-ti { font-size: 32px; display: grid; place-items: center; }
.rt-ti .ic { stroke-width: 2.3; }
.rt-ti.g { color: #17A35F; } .rt-ti.o { color: #F39A1E; } .rt-ti.b { color: #1E88E5; } .rt-ti.y { color: #F5A400; } .rt-ti.r { color: #E5484D; } .rt-ti.t { color: #2BB3C9; }
.rt-ids { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px; }
.rt-id { position: relative; height: 112px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 14px 14px 0; text-align: left; overflow: hidden; cursor: pointer; }
.rt-id b { display: block; font: 400 17px var(--sf); color: #111; }
.rt-id small { display: block; margin-top: 4px; font: 400 11.5px var(--sf); color: #8D8D8D; }
.rt-id img { position: absolute; right: 6px; bottom: 4px; width: 66px; height: 66px; object-fit: contain; mix-blend-mode: multiply; }
#rtChat .chat { margin: 0 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-radius: 12px; }
.rt-sec > .list { margin: 0 18px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
/* city picker */
.rt-cities h2 { margin: 6px 0 4px; font: 700 19px var(--sf); text-align: center; }
.rt-cities p { margin: 0 0 12px; text-align: center; color: #6D6D6D; font-size: 14px; }
.rt-clist { max-height: 50vh; overflow-y: auto; }
.rt-clist button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; border-top: 1px solid #EEE; background: none; padding: 12px 6px; text-align: left; cursor: pointer; }
.rt-clist button span { font: 600 15.5px var(--sf); color: #111; }
.rt-clist button small { font: 400 12.5px var(--sf); color: #8D8D8D; }
/* Diagnose tab (app.js markup): same status-bar space as the other tabs */
.app-body > .page-h:first-child { padding-top: calc(var(--sa) + 14px); }
/* Plant profile: "In garden" outline button (px.css .pp-foot .btn paints every footer button green, text was green on green) */
.pp-foot .btn.btn-outline { background: #fff; color: var(--pg, #00A862); border: 1.6px solid var(--pg, #00A862); }