/* Face: "Inventory App | Deirdre" - from Michael's mock-up: light-to-dark green gradient, two-line wide-spaced script title, dark-green buttons,
   mint sign-in card with paw prints. Labels and typed text are kept dark for readability. Flowers/art can be added later (see README). */
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");
:root{
 --bg:#f1f8ee;--card:#fff;--ink:#1c2e0c;--mute:#4b5d3a;--line:#a9c79a;--accent:#2d6206;--accent-ink:#fff;
 --disp:#2d6206;--disp-bg:#dcefd5;--stor:#4a4a30;--stor-bg:#ebecdc;--danger:#a4231a;--head:#2d6206;
 --pg-glow:#4f7a1a;--pg1:#75d37f;--pg2:#3f6108;--pg3:#3b5403;
 --nav:#2d6206;--nav-ink:#fff;--nav-line:#e6f4de;--nav-on:#fff;--nav-on-ink:#2d6206;
 --main-bg:#f4faf1;--login-bg:#b2dab8;--login-ink:#1f3a0a;
 --h1-ink:#fff;--h1-font:"Pinyon Script","Edwardian Script ITC","Brush Script MT",cursive;--h1-case:none;--h1-weight:400;--h1-space:.2em;--h1-size:2rem;--star-show:none;
 --h1-shadow:0 .05rem .3rem rgba(15,45,0,.6);--shade:rgba(10,30,0,.35);
}
h1{line-height:1.05;padding-top:.2rem}
h1 .t1{display:inline-block;font-size:min(7.4vw,1.9rem);letter-spacing:.3em}
h1 .t2{display:inline-block;font-size:min(15vw,4.1rem);letter-spacing:.2em;line-height:1.05}
/* signed-out screen: the mint card sits straight on the gradient, as in the mock-up */
main:has(.login){background:transparent;box-shadow:none;padding:.4rem 0}
.login{position:relative;min-height:22rem;background-color:#b2dab8;border:.1rem solid #98c9a0;border-top:.1rem solid #98c9a0;border-radius:.8rem;padding:1.6rem 1.4rem 5.6rem;
 background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cg%20transform='rotate(8%2050%2050)'%20fill='%233b5403'%3E%3Cpath%20d='M50%2050c-14%200-26%2012-26%2024%200%209%207%2014%2015%2014%205%200%207-2%2011-2s6%202%2011%202c8%200%2015-5%2015-14%200-12-12-24-26-24z'/%3E%3Cellipse%20cx='21'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(-22%2021%2046)'/%3E%3Cellipse%20cx='38'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(-8%2038%2026)'/%3E%3Cellipse%20cx='62'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(8%2062%2026)'/%3E%3Cellipse%20cx='79'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(22%2079%2046)'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cg%20transform='rotate(-14%2050%2050)'%20fill='%233b5403'%3E%3Cpath%20d='M50%2050c-14%200-26%2012-26%2024%200%209%207%2014%2015%2014%205%200%207-2%2011-2s6%202%2011%202c8%200%2015-5%2015-14%200-12-12-24-26-24z'/%3E%3Cellipse%20cx='21'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(-22%2021%2046)'/%3E%3Cellipse%20cx='38'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(-8%2038%2026)'/%3E%3Cellipse%20cx='62'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(8%2062%2026)'/%3E%3Cellipse%20cx='79'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(22%2079%2046)'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cg%20transform='rotate(-24%2050%2050)'%20fill='%233b5403'%3E%3Cpath%20d='M50%2050c-14%200-26%2012-26%2024%200%209%207%2014%2015%2014%205%200%207-2%2011-2s6%202%2011%202c8%200%2015-5%2015-14%200-12-12-24-26-24z'/%3E%3Cellipse%20cx='21'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(-22%2021%2046)'/%3E%3Cellipse%20cx='38'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(-8%2038%2026)'/%3E%3Cellipse%20cx='62'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(8%2062%2026)'/%3E%3Cellipse%20cx='79'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(22%2079%2046)'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cg%20transform='rotate(6%2050%2050)'%20fill='%233b5403'%3E%3Cpath%20d='M50%2050c-14%200-26%2012-26%2024%200%209%207%2014%2015%2014%205%200%207-2%2011-2s6%202%2011%202c8%200%2015-5%2015-14%200-12-12-24-26-24z'/%3E%3Cellipse%20cx='21'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(-22%2021%2046)'/%3E%3Cellipse%20cx='38'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(-8%2038%2026)'/%3E%3Cellipse%20cx='62'%20cy='26'%20rx='9'%20ry='12.5'%20transform='rotate(8%2062%2026)'/%3E%3Cellipse%20cx='79'%20cy='46'%20rx='8'%20ry='11'%20transform='rotate(22%2079%2046)'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;
 background-size:3.1rem,3.1rem,3.1rem,3.1rem;background-position:69% 1.3rem,95% .7rem,left 6% bottom 1rem,left 50% bottom .6rem}
.login h2{font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;text-transform:uppercase;letter-spacing:.28em;font-weight:800;font-size:1.5rem;color:#1f3a0a;margin:0 0 1.2rem}
.login label{text-transform:uppercase;letter-spacing:.25em;font-weight:800;font-size:.9rem;color:#1f3a0a}
.login input{background:#4fc43f;border:.13rem solid #fff;border-radius:1rem;color:#0e2305;min-height:3.4rem;font-weight:700}
.login .btn.primary{background:#278f1d;border:.13rem solid #fff;border-radius:1rem;color:#fff;text-transform:uppercase;letter-spacing:.3em;font-weight:800;min-height:3.6rem;margin-top:1.2rem}
.login .err{color:#7a0f1d}
.hbtn:focus-visible,.navgrid button:focus-visible{outline-color:#ffe36b}

/* One sunflower over the card's top-right corner (art/sunflower-head.webp; original watercolor art supplied by Michael, cut out and feathered).
   It replaces the two top paws; the two bottom paws stay. */
.login{overflow:visible;background-position:-20rem 0,-20rem 0,left 6% bottom 1rem,left 50% bottom .6rem}
.login::before{content:"";position:absolute;right:-1.1rem;top:-3.2rem;width:7.4rem;height:7.4rem;background:url(art/sunflower-head.webp) no-repeat center/contain;pointer-events:none;z-index:2}