html,body{max-width:100%;overflow-x:hidden}
@media(max-width:650px){
.app-shell{width:100%;max-width:430px;overflow-x:hidden}
.content{width:100%;padding-left:16px!important;padding-right:16px!important}
.topbar{min-width:0}
.topbar-actions .peppy-avatar{right:16px!important;width:88px!important;height:88px!important}
.glance-card{min-width:0!important;padding-right:82px!important}
.glance-card:after{right:-9px!important;top:2px!important;width:82px!important;height:82px!important}
.eyebrow{font-size:10px!important}
.schedule-row{min-height:61px!important}
.schedule-time{font-size:11px!important}
.schedule-meta{font-size:10px!important}
.panel-heading{align-items:flex-start!important;flex-wrap:wrap!important}
.panel-actions{flex-shrink:1;gap:6px!important}
.protocol-card{display:block!important;min-width:0}
.protocol-items{max-width:none!important;margin-top:8px;overflow-wrap:anywhere;font-size:10px!important}
.compound-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.compound-card h3,.compound-card p,.card-footer{overflow-wrap:anywhere}
.calendar-panel{display:block!important;margin-top:15px!important;padding:12px!important;border-radius:10px!important;box-shadow:none!important}
.calendar-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:10px 0}
.calendar-mode{border:0;border-radius:7px;padding:8px;background:#f0f6f5;color:#788689;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.calendar-mode.active{background:#e3f7f2;color:#009c88}
.calendar-grid{overflow:visible!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important;margin-top:5px!important}
.calendar-day{min-width:0!important;min-height:77px!important;padding:6px!important;border-radius:7px!important}
.calendar-grid[data-mode="day"]{grid-template-columns:1fr!important}
.calendar-grid[data-mode="day"] .calendar-day{min-height:170px!important;padding:12px!important}
dialog{width:calc(100% - 20px)!important;max-height:calc(100dvh - 20px);overflow:auto}
}
@media(max-width:360px){
.sidebar{padding-left:14px!important;padding-right:14px!important}
.brand img{width:112px!important}
.content{padding-left:11px!important;padding-right:11px!important}
h1{font-size:22px!important}
.topbar-actions .peppy-avatar{right:12px!important;width:78px!important;height:78px!important}
.glance-card{padding-left:10px!important;padding-right:70px!important}
.glance-card:after{width:70px!important;height:70px!important}
.schedule-row{grid-template-columns:37px 12px minmax(0,1fr) 18px!important}
.calendar-day{min-height:67px!important}
.schedule-meta{font-size:9px!important;overflow-wrap:anywhere}
.form-grid{grid-template-columns:1fr!important}
}
@media(max-width:650px){
body{font-size:16px!important}
.eyebrow{font-size:11px!important}
.schedule-row{min-height:68px!important}
.schedule-time{font-size:12px!important}
.schedule-meta{font-size:11px!important}
.status-mark{width:24px!important;height:24px!important;font-size:14px!important}
.protocol-card h3{font-size:15px!important}
.protocol-card p,.protocol-items{font-size:11px!important}
.badge{font-size:9px!important}
.card-footer,.compound-card .text-button{font-size:9px!important}
.calendar-mode{font-size:12px!important;padding:9px!important}
.calendar-day{min-height:82px!important}
/* font-size only: 16px-or-less inputs make iOS zoom on focus, which is what
this guards. The padding half used to be here too and silently overrode
every themed field, so the theme owns padding now. */
input,select,textarea{font-size:15px!important}
.form-disclaimer{font-size:11px!important}
.reference-section,.compound-view{font-size:14px!important}
.analysis-intro,.analysis-finding p{font-size:12px!important}
}
@media(max-width:360px){
h1{font-size:24px!important}
.schedule-meta{font-size:10px!important}
}
@media(max-width:650px){
.calendar-hint{margin:0 0 7px;color:#748784;font-size:9px;line-height:1.3}
.calendar-grid[data-mode="week"]{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;overflow:visible!important;padding:0!important;gap:3px!important}
.calendar-grid[data-mode="week"] .calendar-day{min-height:102px!important;padding:5px!important}
.calendar-grid[data-mode="month"]{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important}
.calendar-grid[data-mode="month"] .calendar-day{min-height:50px!important;padding:4px!important}
.calendar-grid[data-mode="day"]+.calendar-hint{display:none}
}
.calendar-grid[data-mode="week"]{display:block!important;overflow:visible!important}
@media(max-width:650px){
.calendar-grid[data-mode="week"]{margin-top:5px!important;padding:0!important}
}
.saved-preparations{display:grid;gap:7px;padding-top:2px}
.saved-preparations-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.saved-preparations-heading .eyebrow{margin:0}
.saved-preparations-heading span{color:#7b898d;font-size:10px}
.saved-preparations-list{display:grid;gap:6px;max-height:180px;overflow:auto}
.saved-preparation{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 10px;border:1px solid #dcebe8;border-radius:10px;background:#fbfefd;color:#33464a;text-align:left;font:inherit;cursor:pointer}
.saved-preparation:hover{border-color:#75cfc2;background:#f0fbf8}
.saved-preparation span{min-width:0}
.saved-preparation strong,.saved-preparation small{display:block}
.saved-preparation strong{font-size:12px;font-weight:900}
.saved-preparation small{margin-top:1px;color:#718187;font-size:10px;white-space:nowrap}
.saved-preparation b{padding:4px 7px;border-radius:99px;background:#e2f8f2;color:#008f7c;font-size:10px}
.empty-preparations{margin:0;color:#758589;font-size:11px}
@media(max-width:650px){
.saved-preparation{padding:10px}
.saved-preparation strong{font-size:14px}
.saved-preparation small{font-size:11px}
.saved-preparations-heading span{font-size:10px}
}
.vial-inventory{display:grid;gap:7px}
.vial-inventory-list{display:grid;gap:6px;max-height:175px;overflow:auto}
.vial-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #d7eee9;border-radius:10px;background:#f7fcfb}
.vial-card strong,.vial-card small{display:block}
.vial-card strong{color:#23776d;font-size:12px}
.vial-card small{margin-top:1px;color:#718187;font-size:9px}
.vial-card>div:last-child{text-align:right}
.vial-card>div:last-child strong{color:#008f7c}
.protocol-items-form{display:grid;gap:10px}
.protocol-item-form{display:grid;gap:9px;margin:0;padding:12px;border:1px solid #dcece8;border-radius:12px;background:#f9fdfc}
.protocol-item-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#46706b;font-size:12px;font-weight:900}
.protocol-item-heading .text-button{font-size:10px}
.add-protocol-item{width:100%;color:#008f7c;border-color:#9edbd1;background:#f5fcfa;font-size:12px}
@media(max-width:650px){
.protocol-item-form{padding:11px;border-radius:10px}
.protocol-item-heading{font-size:14px}
.protocol-item-heading .text-button{font-size:12px}
.add-protocol-item{font-size:14px}
}
.protocol-progress{display:grid;gap:4px;margin-top:9px}
.protocol-progress>div{height:6px;overflow:hidden;border-radius:99px;background:#d9f1ec}
.protocol-progress>div span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#03a995,#56c6b7)}
.protocol-progress small{color:#63827e;font-size:9px;font-weight:800}
.protocol-items>strong{color:#3b7770;font-size:10px}
@media(max-width:650px){
.protocol-progress{margin-top:10px}
.protocol-progress>div{height:7px}
.protocol-progress small,.protocol-items>strong{font-size:11px}
}
.calendar-heading-actions{display:flex;align-items:center;gap:10px}
.calendar-nav{display:flex;gap:4px}
@media(max-width:650px){
.calendar-heading-actions{width:100%;justify-content:space-between}
.calendar-key{margin:0!important;font-size:11px!important}
}
@media(max-width:650px){
.week-agenda-event{grid-template-columns:49px minmax(0,1fr) auto}
}
.history-item.is-taken p:before,.history-item.is-skipped p:before,.history-item.is-missed p:before,.history-item.is-rescheduled p:before{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:5px;border-radius:50%;font-size:10px;font-weight:900}
.history-item.is-taken p:before{content:'✓';background:#ddf6ef;color:#007f72}
.history-item.is-skipped p:before,.history-item.is-missed p:before{content:'!';background:#fff0d8;color:#a66a1b}
.history-item.is-rescheduled p:before{content:'↪';background:#efebff;color:#7256c1}
@media(max-width:650px){
.history-item{display:block!important;padding:10px 0!important;font-size:13px!important}
.history-item time{display:block;margin-top:2px;font-size:11px!important}
}
.compound-favourite{position:absolute;top:10px;right:9px;display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid #bce8e0;border-radius:10px 11px 10px 12px;background:#effbf8;color:#68bfb3;box-shadow:0 2px 4px #0b786b12;cursor:pointer;transform:rotate(-3deg);transition:transform .16s ease,background .16s ease}
/* Same reason as .nav-link in peppy.css: a tapped element keeps :hover on a
touchscreen, so this left the last-saved card sitting tilted and enlarged. */
@media (hover:hover){.compound-favourite:hover{transform:rotate(3deg) scale(1.08)}}
.compound-heart-icon{width:19px;height:19px;overflow:visible}
.heart-shape{fill:#fff;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.heart-glint{fill:#f6bd47;stroke:#f6bd47;stroke-width:.4}
.compound-favourite.is-saved{border-color:#f3b8c3;background:#fff0f3;color:#e9829a}
.compound-favourite.is-saved .heart-shape{fill:currentColor}
@media(max-width:650px){
.compound-favourite{top:9px;right:8px;width:25px;height:25px;font-size:15px}
}
@media(max-width:650px){
}
.insight.calm{border:1px solid #d9eee9;background:#f7fcfb;color:#55736f}
.protocol-history{margin-top:10px;border-top:1px solid #dcece8}
.protocol-history summary{padding:10px 2px;color:#5c7774;font-size:11px;font-weight:900;cursor:pointer}
.protocol-history>div{display:grid;gap:8px}
.protocol-card.is-completed{opacity:.72;filter:saturate(.75)}
.protocol-card.is-completed .protocol-progress>div span{background:#9bb8b2}
@media(max-width:650px){
.protocol-history summary{padding:12px 2px;font-size:13px}
.protocol-history>div{gap:9px}
}
/* .protocol-action / .protocol-actions were the status pills on Home's cycle
card. The card opens the cycle now and those actions live on it, so nothing
carries either class - removed rather than left behind for a future reader to
wonder what still uses them. */
.profile-dialog-content{display:grid;gap:13px;padding:22px}
.profile-email{display:grid;gap:2px;padding:13px;border:1px solid #bfe8e1;border-radius:12px;background:#f1fbf8}
.profile-email span{color:#718187;font-size:10px}
.profile-email strong{color:#007f72;font-size:14px;overflow-wrap:anywhere}
.profile-name-form{display:grid;gap:8px}
.profile-name-form label{display:grid;gap:5px;font-weight:800;color:#007f72}
.profile-name-form input{width:100%}
.profile-name-form small{color:#718187;line-height:1.4}
.profile-name-tag{margin:0;padding:8px 10px;border-radius:10px;background:#f4f0ff;color:#705bb7;font-size:11px;font-weight:800}
@media(max-width:650px){
.profile-dialog-content{padding:18px}
.profile-email{padding:12px}
.profile-email strong{font-size:15px}
}
@media(max-width:650px){
.calendar-grid[data-mode="day"] .day-agenda{min-height:190px;padding:10px;border-radius:10px}
}
.app-view{display:none;animation:peppy-view-in .18s ease-out}
.app-view.active{display:block}
@keyframes peppy-view-in{from{opacity:.01;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* A swiped view arrives from the side the swipe came from, rather than the
small lift a tapped one gets - the gesture and the page agree on which way is
forward. Overrides peppy-view-in, which is on .app-view for every change.
It travels 34px rather than the width of the screen. Only one view is in the
document at a time, so a page sliding all the way in from the edge would drag
an empty gap behind it; a short move under a fade reads as the page arriving
without ever showing the nothing it came from.
Slightly slower than the tap animation and eased to settle rather than stop:
the swipe is a bigger movement and a transition that ends abruptly after it
feels clipped. The scale is barely there - it just stops the slide reading as
flat. */
@keyframes peppy-view-forward{
from{opacity:0;transform:translateX(34px) scale(.985)}
60%{opacity:1}
to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes peppy-view-back{
from{opacity:0;transform:translateX(-34px) scale(.985)}
60%{opacity:1}
to{opacity:1;transform:translateX(0) scale(1)}
}
.app-view.is-view-forward{animation:peppy-view-forward .3s cubic-bezier(.22,.68,.24,1) both}
.app-view.is-view-back{animation:peppy-view-back .3s cubic-bezier(.22,.68,.24,1) both}
@media(max-width:650px){
.app-view[data-app-view="calendar"] .calendar-panel{margin-top:0!important}
.app-view[data-app-view="compounds"] .library-section{margin-top:0!important;padding-top:0!important;border-top:0!important}
.app-view[data-app-view="analysis"]{padding-bottom:8px}
.compound-cards{grid-template-columns:1fr!important;gap:11px!important}
}
@media(max-width:650px){
}
@media(max-width:650px){
}
@media(max-width:650px){
}
@media(max-width:650px){
}
@media(max-width:650px){
}
@media(max-width:650px){
}
.compound-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;min-width:0!important}
@media(max-width:650px){
.compound-cards{grid-template-columns:1fr!important}
}
@media(max-width:650px){
}
@media(max-width:650px){
}
.compound-cards{display:block!important;column-count:3!important;column-gap:18px!important}
@media(max-width:880px){
.compound-cards{column-count:2!important}
}
@media(max-width:650px){
.compound-cards{display:block!important;column-count:1!important;column-gap:0!important}
}
.calendar-workspace{display:grid;gap:16px;margin:5px auto 24px;max-width:850px}
.calendar-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 155px;gap:14px;min-height:146px;padding:24px 27px;border:1px solid #bdebe1;border-radius:23px;overflow:hidden;background:linear-gradient(125deg,#e4faf4 0%,#fafffd 61%,#f2edff 100%);box-shadow:0 12px 28px #16866e12}
.calendar-hero:before{position:absolute;right:-53px;top:-66px;width:190px;height:190px;border:28px solid #fff0b9;border-radius:50%;content:"";opacity:.58}
.calendar-hero-copy{position:relative;z-index:2}
.calendar-hero h1{margin:2px 0 5px;color:#096f60;font-size:28px;line-height:1.08}
.calendar-hero-copy>p:last-child{max-width:385px;margin:0;color:#5e827a;font-size:13px}
.calendar-hero-art{position:absolute;z-index:1;right:132px;bottom:-19px;width:124px;height:124px;background:url('assets/peppy-mascot-v2.png') center/contain no-repeat;filter:drop-shadow(0 8px 7px #15887324)}
.calendar-hero-actions{position:relative;z-index:3;display:flex;grid-column:1/-1;align-items:center;gap:8px}
.calendar-today-button{border:1px solid #a7ded3;border-radius:11px;padding:9px 12px;background:#ffffffbf;color:#007f70;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.calendar-add-button{border-radius:11px;padding:10px 14px;font-size:12px}
.calendar-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.calendar-summary article{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid #e3efec;border-radius:15px;background:#fff;box-shadow:0 7px 17px #16866e0b}
.calendar-summary-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:12px;font-size:17px;font-weight:900}
.calendar-summary-icon.mint{background:#e4f9f3;color:#009b87}
.calendar-summary-icon.purple{background:#eeeaff;color:#7161ba}
.calendar-summary-icon.peach{background:#fff0e6;color:#d78752}
.calendar-summary strong{display:block;color:#194d47;font-size:21px;line-height:1}
.calendar-summary small{display:block;margin-top:3px;color:#78928d;font-size:10px;font-weight:800}
.calendar-panel{margin:0!important;padding:20px!important;border:1px solid #dbeee9!important;border-radius:20px!important;box-shadow:0 10px 26px #16866e0b}
.calendar-panel-heading{padding-bottom:11px;border-bottom:1px solid #edf4f2}
.calendar-panel-heading h2{color:#174d46;font-size:19px}
.calendar-modes{display:inline-flex;gap:4px;margin:15px 0 8px;padding:4px;border-radius:12px;background:#eff8f6}
.calendar-mode{border:0;border-radius:8px;padding:8px 15px;background:transparent;color:#718983;font:inherit;font-size:11px;font-weight:900;cursor:pointer}
.calendar-mode.active{background:#fff;color:#008d7a;box-shadow:0 3px 8px #0c695b16}
.calendar-hint{margin:0 0 12px!important;padding:8px 10px;border-radius:10px;background:#fff9ed;color:#9a7a41;font-size:10px!important}
.calendar-grid[data-mode="week"]{display:block!important;margin-top:0!important}
.calendar-grid[data-mode="month"]{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important;margin-top:2px!important}
.calendar-grid[data-mode="month"] .calendar-day{min-height:98px!important;border-radius:12px!important;background:#fcfffe}
.calendar-grid[data-mode="day"]{display:block!important;margin-top:2px!important}
@media(max-width:650px){
.calendar-workspace{gap:12px;margin:0 -1px 12px}
.calendar-hero{grid-template-columns:minmax(0,1fr);min-height:181px;padding:20px 17px;border-radius:19px}
.calendar-hero h1{max-width:220px;font-size:24px}
.calendar-hero-copy>p:last-child{max-width:220px;font-size:11px;line-height:1.4}
.calendar-hero-art{right:2px;bottom:20px;width:113px;height:113px}
.calendar-hero:before{right:-79px;top:-54px;width:180px;height:180px}
.calendar-hero-actions{align-self:end;grid-column:auto}
.calendar-today-button,.calendar-add-button{padding:9px 10px;font-size:11px}
.calendar-summary{gap:7px}
.calendar-summary article{gap:6px;min-width:0;padding:10px 8px;border-radius:12px}
.calendar-summary-icon{width:28px;height:28px;border-radius:9px;font-size:14px}
.calendar-summary strong{font-size:17px}
.calendar-summary small{font-size:8px;white-space:nowrap}
.calendar-panel{display:block!important;padding:13px!important;border-radius:16px!important}
.calendar-panel-heading{align-items:flex-start}
.calendar-panel-heading h2{font-size:16px}
.calendar-heading-actions{width:auto!important;gap:5px}
.calendar-key{display:none}
.calendar-modes{display:grid;width:100%;grid-template-columns:repeat(3,1fr);margin:12px 0 7px;padding:3px}
.calendar-mode{padding:8px 4px;font-size:11px}
.calendar-hint{margin-bottom:9px!important;font-size:9px!important}
.calendar-grid[data-mode="month"]{gap:3px!important}
.calendar-grid[data-mode="month"] .calendar-day{min-height:52px!important;padding:4px!important;border-radius:8px!important}
}
.calendar-grid[data-mode="month"]{display:block!important;margin-top:3px!important}
@media(max-width:650px){
.calendar-grid[data-mode="month"]{margin-top:2px!important}
}
@media(max-width:650px){
.month-days .calendar-day.is-open-day:after{right:-8px;bottom:-9px;width:24px;height:24px;border-width:5px}
}
@media(max-width:650px){
.week-day.is-open-day:after{right:-8px;bottom:-10px;width:23px;height:23px;border-width:5px}
}
@media(max-width:650px){
.month-days .calendar-event{border-radius:0!important}
}
.inventory-page{display:grid;gap:15px;max-width:760px;margin:5px auto 24px}
.inventory-page-intro{position:relative;display:flex;align-items:end;justify-content:space-between;gap:16px;padding:24px 27px;border:1px solid #bdebe1;border-radius:22px;overflow:hidden;background:linear-gradient(125deg,#e5faf4,#fafffd 61%,#f4efff)}
.inventory-page-intro:after{position:absolute;right:-26px;bottom:-45px;width:150px;height:150px;border:22px solid #fff0bc;border-radius:50%;content:"";opacity:.58}
.inventory-page-intro>div,.inventory-page-intro button{position:relative;z-index:1}
.inventory-page-intro h1{margin:2px 0 5px;color:#096f60;font-size:27px}
.inventory-guidance{display:flex;align-items:flex-start;gap:9px;margin:0;padding:11px 13px;border:1px solid #f2db9e;border-radius:13px;background:#fffaf0;color:#866b38;font-size:11px}
.inventory-guidance span{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:#fff0ca;color:#cb942d;font-weight:900}
.inventory-guidance p{margin:1px 0}
.inventory-page-list{display:grid;gap:10px}
.inventory-page-list .vial-card{padding:16px!important;border-radius:16px!important;box-shadow:0 7px 15px #16866e0a}
.inventory-page-list .vial-card>div:first-child strong{font-size:16px}
.inventory-page-list .vial-card>div:last-child{text-align:right}
.inventory-page-list .vial-card>div:last-child strong{font-size:17px}
.inventory-page-list .adjust-vial{margin-top:7px}
@media(max-width:650px){
.inventory-page{gap:12px;margin:0 0 12px}
.inventory-page-intro{align-items:flex-start;flex-direction:column;padding:20px 18px;border-radius:18px}
.inventory-page-intro h1{font-size:24px}
.inventory-page-intro .primary-button{font-size:11px}
.inventory-guidance{padding:10px;font-size:10px}
.inventory-page-list .vial-card{padding:13px!important;border-radius:13px!important}
.inventory-page-list .vial-card>div:first-child strong{font-size:14px}
.inventory-page-list .vial-card>div:last-child strong{font-size:15px}
}
.home-companion{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:13px;margin:15px 0;padding:12px 16px 12px 7px;border:1px solid #f1dfad;border-radius:17px;overflow:hidden;background:linear-gradient(110deg,#fff9eb,#fff,#f1faff)}
.home-companion:after{position:absolute;right:-21px;top:-30px;width:82px;height:82px;border:13px solid #e6f4ff;border-radius:50%;content:""}
.home-companion img{position:relative;z-index:1;width:100px;height:87px;object-fit:contain}
.home-companion div,.home-companion button{position:relative;z-index:1}
.home-companion h2{margin:1px 0 3px;color:#1c665c;font-size:16px}
.home-companion p:not(.eyebrow){margin:0;color:#6d8882;font-size:11px}
.home-companion .text-button{white-space:nowrap;font-size:11px}
.calendar-hero-art{background-image:url('assets/peppy-calendar-v1.png')!important}
@media(max-width:650px){
.home-companion{grid-template-columns:70px minmax(0,1fr);gap:7px;margin:13px 0;padding:9px 10px 9px 3px;border-radius:13px}
.home-companion img{width:67px;height:60px}
.home-companion h2{font-size:13px}
.home-companion p:not(.eyebrow){font-size:9px;line-height:1.35}
.home-companion .text-button{grid-column:2;justify-self:start;padding:0;font-size:9px}
.home-companion .eyebrow{font-size:7px}
.home-companion:after{width:54px;height:54px;border-width:9px}
}
.calculator-page{display:grid;gap:15px;max-width:760px;margin:5px auto 24px}
.calculator-page-intro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:12px;min-height:155px;padding:23px 25px;border:1px solid #d9cdf5;border-radius:22px;overflow:hidden;background:linear-gradient(125deg,#f1edff,#fff 60%,#e8faf5)}
.calculator-page-intro:after{position:absolute;right:-40px;bottom:-64px;width:190px;height:190px;border:28px solid #fff0b9;border-radius:50%;content:"";opacity:.55}
.calculator-page-intro>div,.calculator-page-intro img{position:relative;z-index:1}
.calculator-page-intro h1{margin:2px 0 5px;color:#5f4fa3;font-size:27px}
.calculator-page-intro img{justify-self:end;width:137px;height:137px;object-fit:contain}
.calculator-page-action{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;padding:18px;border:1px solid #d9eee9;border-radius:17px;background:#fff;box-shadow:0 8px 17px #16866e0b}
.calculator-page-action>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eeeaff;color:#7560bc;font-size:23px}
.calculator-page-action h2{margin:0 0 3px;color:#24584f;font-size:16px}
.calculator-page-action p{margin:0;color:#75908a;font-size:11px}
.calculator-page-action .primary-button{white-space:nowrap}
.calculator-page-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.calculator-page-notes article{display:flex;gap:9px;padding:12px;border:1px solid #e6efed;border-radius:14px;background:#fbfefd}
.calculator-page-notes article:nth-child(2){background:#fcfaff;border-color:#ebe4fb}
.calculator-page-notes article:nth-child(3){background:#fffaf1;border-color:#f4e6bb}
.calculator-page-notes span{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:8px;background:#dff6ef;color:#008f7b;font-size:11px;font-weight:900}
.calculator-page-notes strong{display:block;color:#35665e;font-size:11px}
.calculator-page-notes p{margin:2px 0 0;color:#79918c;font-size:10px;line-height:1.35}
@media(max-width:650px){
.calculator-page{gap:12px;margin:0 0 12px}
.calculator-page-intro{grid-template-columns:minmax(0,1fr) 105px;min-height:157px;padding:20px 17px;border-radius:18px}
.calculator-page-intro h1{max-width:210px;font-size:24px}
.calculator-page-intro img{width:105px;height:105px}
.calculator-page-action{grid-template-columns:35px minmax(0,1fr);gap:9px;padding:13px;border-radius:13px}
.calculator-page-action>span{width:35px;height:35px;border-radius:11px;font-size:18px}
.calculator-page-action h2{font-size:13px}
.calculator-page-action p{font-size:9px;line-height:1.35}
.calculator-page-action .primary-button{grid-column:2;justify-self:start;padding:8px 10px;font-size:10px}
.calculator-page-notes{grid-template-columns:1fr;gap:7px}
.calculator-page-notes article{padding:10px}
.calculator-page-notes p{font-size:9px}
}
/* The landing screen is defined once, in peppy-theme.css. It used to be defined
here as well; the two disagreed and this file lost on specificity, so its
rules only applied where the other happened to be silent. */
.auth-social-actions{display:flex;justify-content:center;gap:10px}
.social-auth-button{display:grid;place-items:center;width:46px;height:42px;padding:0!important;border-radius:12px!important;color:#26343c;cursor:pointer}
.social-auth-button:hover{border-color:#9ddfd5!important;background:#f4fffc}
.social-auth-button:disabled{border-color:#edf0f0!important;background:#f8f9f9!important;color:#b8c1c0!important;cursor:not-allowed;opacity:.75}
.social-auth-button svg{width:19px;height:19px}
/* Only shown after an unverified-account sign-in attempt. */
.auth-resend{align-self:flex-start;margin:-4px 0 2px;padding:0;color:#0a8f7c;font-weight:700;text-decoration:underline}
.auth-resend[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){
}
/* The markup class is `loading-app-icon-lg`; this rule used to say
`.loading-app-icon`, so it never matched and the img painted at its intrinsic
192px with square corners. Fixed on the CSS side rather than by renaming the
class, because the markup name is the one already baked into the synced
copies under www and under the android assets/public folders, and nothing
anywhere references the un-suffixed name.
64px is the size an Android launcher icon reads at. The source PNG is
full-bleed (corner alpha 255) so it needs the squircle radius itself: 18/64
is the same 28% ratio the 96px/27px design used. */
.auth-loading .loading-app-icon-lg{position:relative;z-index:1;width:64px;height:64px;border-radius:18px;filter:drop-shadow(0 14px 13px #197a6435);transform-origin:50% 100%;animation:peppy-app-icon-bounce 1.25s linear infinite}
.loading-vial,.auth-loading .loading-vial{display:none!important}
/* A ball with weight rather than a bob: it decelerates into the apex, hangs,
accelerates back down, squashes on landing (origin is the base, so the
contact point stays put), then takes a smaller second hop with the tilt
flipped. One short loop with no long choreographed path, so it reads
correctly even if the loading screen only shows for a few frames. Travel
tops out at 30px inside a `overflow:hidden` fixed container - it cannot
produce a scrollbar or reach the decorative ::before/::after rings. */
@keyframes peppy-app-icon-bounce{
0%{transform:translateY(0) rotate(0deg) scale(1.12,.88);animation-timing-function:cubic-bezier(.22,.85,.4,1)}
18%{transform:translateY(-20px) rotate(-4deg) scale(.95,1.06);animation-timing-function:cubic-bezier(.3,.7,.5,1)}
38%{transform:translateY(-30px) rotate(-5deg) scale(1,1);animation-timing-function:cubic-bezier(.5,0,.75,.3)}
60%{transform:translateY(-4px) rotate(-1deg) scale(.97,1.05);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
66%{transform:translateY(0) rotate(0deg) scale(1.12,.88);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
80%{transform:translateY(-9px) rotate(3deg) scale(.98,1.03);animation-timing-function:cubic-bezier(.55,0,.85,.35)}
92%{transform:translateY(0) rotate(1deg) scale(1.08,.92);animation-timing-function:cubic-bezier(.25,.8,.45,1)}
100%{transform:translateY(0) rotate(0deg) scale(1.12,.88)}
}
/* peppy-theme.css already stops every animation under body.peppy-no-motion, but
that class is only set once app.js has read preferences - which can be after
this screen has already painted. The media query is the one that matters
here; the class rule is repeated locally so the intent travels with the
animation. */
@media (prefers-reduced-motion: reduce){
.auth-loading .loading-app-icon-lg{animation:none;transform:none}
}
body.peppy-no-motion .auth-loading .loading-app-icon-lg{animation:none;transform:none}
@media(max-width:650px){
.topbar-actions .primary-button{display:none!important}
}
.auth-loading{position:fixed;z-index:50;inset:0;display:none;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 43%,#fff 0 16%,transparent 48%),linear-gradient(145deg,#effff9,#fcf9ff 55%,#fff9e9)}
.auth-loading::before,.auth-loading::after{position:absolute;border-radius:50%;content:""}
.auth-loading::before{width:260px;height:260px;border:24px solid #dbf6ed;opacity:.75;transform:translate(-110px,150px)}
.auth-loading::after{width:170px;height:170px;border:20px solid #eee7ff;opacity:.72;transform:translate(130px,-150px)}
.auth-loading[hidden]{display:none}
body.auth-pending .auth-loading{display:grid}
body.auth-pending .landing-screen,body.auth-pending .app-shell{display:none}
.loading-vial{position:relative;z-index:1;width:104px;height:142px;filter:drop-shadow(0 13px 11px #197a6430);animation:peppy-vial-turn 1.35s ease-in-out infinite}
.loading-vial-cap{position:absolute;z-index:3;left:27px;top:2px;width:50px;height:18px;border:3px solid #087e70;border-radius:10px 10px 5px 5px;background:repeating-linear-gradient(90deg,#0aa997 0 7px,#18c7b2 7px 12px);box-shadow:inset 0 -4px #057c70}
.loading-vial-neck{position:absolute;z-index:2;left:34px;top:18px;width:36px;height:18px;border:3px solid #087e70;border-top:0;border-radius:0 0 9px 9px;background:#d8fff7}
.loading-vial-glass{position:absolute;left:14px;top:31px;width:76px;height:99px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:3px solid #087e70;border-radius:15px 15px 22px 22px;background:linear-gradient(105deg,#f8fffd 0 20%,#c9fff2 21% 57%,#86eadd 58%);box-shadow:inset 9px 0 #ffffffa8,inset -7px -9px #49cdbd55}
.loading-vial-glass::before{position:absolute;content:"";left:9px;right:9px;bottom:10px;height:28px;border-radius:5px 5px 15px 15px;background:#0eb6a3aa}
.loading-vial-glass i,.loading-vial-glass b{position:relative;z-index:1;font-style:normal;color:#087e70;text-shadow:0 1px #fff}
.loading-vial-glass i{font-size:22px;line-height:18px}
.loading-vial-glass b{font-family:Nunito,sans-serif;font-size:12px;font-weight:900;letter-spacing:.08em}
.loading-vial-spark{position:absolute;z-index:4;color:#f5b43a;font-size:18px;animation:peppy-spark 1.35s ease-in-out infinite}
.loading-vial-spark-one{top:34px;left:-8px}
.loading-vial-spark-two{right:-6px;bottom:25px;animation-delay:.3s}
.auth-loading .loading-vial{transform-origin:50% 58%}
@keyframes peppy-vial-turn{0%,100%{transform:rotate(0deg) scale(1)}45%{transform:rotate(170deg) scale(.94)}55%{transform:rotate(190deg) scale(.94)}}
@keyframes peppy-spark{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:650px){
body:not(.showing-landing) .sidebar{display:none!important}
body:not(.showing-landing) .content{padding-top:12px!important}
}
.compound-tabs{position:relative!important;z-index:2!important;padding-right:116px!important}
@media(max-width:650px){
}
#compound-dialog{width:min(620px,calc(100% - 28px))!important;max-height:calc(100dvh - 28px)!important;overflow:auto!important;border:1px solid #d9f1eb!important;background:#fff!important;box-shadow:0 28px 75px #0a65594a!important}
#compound-dialog::backdrop{background:#165c5266!important;backdrop-filter:blur(3px)}
.compound-tabs{display:flex!important;gap:5px!important;margin:0!important;padding:12px 18px!important;border:0!important;background:#fff!important;box-shadow:0 5px 12px #16866e0a!important}
.compound-tab{flex:1!important;border:1px solid transparent!important;border-radius:999px!important;padding:7px 8px!important;color:#74918b!important;font-size:11px!important;white-space:nowrap!important}
.compound-tab.active{border:1px solid #bdebe0!important;background:#e9faf5!important;color:#007f70!important;box-shadow:none!important}
.compound-view{padding:19px 22px 23px!important}
.compound-view .eyebrow{margin:0 0 6px!important;color:#2a9d87!important;font-size:10px!important}
.compound-view[data-compound-view="research"] .eyebrow{color:#bd7d21!important}
.compound-view[data-compound-view="research"] ul{display:grid!important;gap:8px!important;margin:8px 0 0!important;padding-left:18px!important}
.compound-view[data-compound-view="research"] li{color:#6b716d!important;font-size:11px!important}
.compound-view[data-compound-view="research"] a{color:#008b76!important;font-weight:800!important}
@media(max-width:650px){
#compound-dialog{width:calc(100% - 18px)!important;max-height:calc(100dvh - 18px)!important}
.compound-tabs{padding-right:95px!important;gap:4px!important;overflow-x:auto!important;padding:10px 13px!important}
.compound-tab{flex:0 0 auto!important;padding:7px 10px!important;font-size:10px!important}
.compound-view{padding:17px!important}
}