/* app.carmieworld.com. On a computer: one wide frosted panel over the blurred homepage town, Nono and the name on the
   left, the sign in on the right (Nov 14: no phone shaped frame, a landscape panel instead). On a phone: the whole
   screen. Day or night follows the visitor's clock, as on the homepage (19:00 to 06:00 is night). */
@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Smythe;src:url('/assets/fonts/smythe-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--top:#3CC1F0;--mid:#1691D5;--low:#0B5E9B;--ink:#FFFFFF;--soft:rgba(255,255,255,.8);--glass:rgba(255,255,255,.14);--line:rgba(255,255,255,.3);
 --cocoa:#3A2A22;--navy:#0D3557;--sans:Figtree,'Trebuchet MS',system-ui,sans-serif;--display:Smythe,Georgia,serif}
.night{--top:#145A93;--mid:#0C3E72;--low:#062449;--glass:rgba(255,255,255,.1)}
/* By day the sky is bright, so the form side gets a deep blue veil and the small text is fully white: body text
   stays at 4.5:1 or more against the lightest part of the panel (WCAG AA), titles well above 3:1. Fields and the
   glass buttons are tinted darker instead of lighter, so their white text keeps that contrast too. */
:root:not(.night){--soft:#FFFFFF;--glass:rgba(4,30,60,.24);--veil:rgba(6,36,73,.34)}
*{box-sizing:border-box}
/* margin:auto (not place-items:center) keeps the top of a tall panel reachable: it scrolls instead of being cut off */
body{margin:0;min-height:100svh;display:grid;padding:32px;background:var(--low);color:var(--ink);font:500 16px/1.4 var(--sans);-webkit-font-smoothing:antialiased}
.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}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #FFE3A0;outline-offset:3px}

.bg{position:fixed;inset:0;z-index:-1;background:url('/assets/bg-day.jpg') 50% 100%/cover no-repeat;transform:scale(1.04)}
.night .bg{background-image:url('/assets/bg-night.jpg')}
.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(10,60,110,.05),rgba(6,36,73,.28))}

/* the panel: sky colored glass, wider than tall */
.shell{position:relative;margin:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);width:min(960px,100%);min-height:min(560px,calc(100svh - 64px));
 border-radius:32px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--top) 88%,transparent),color-mix(in srgb,var(--low) 92%,transparent));
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px rgba(6,30,60,.4)}
.side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 36px;text-align:center;
 background:radial-gradient(120% 90% at 50% 40%,rgba(255,255,255,.18),transparent 70%);border-right:1px solid rgba(255,255,255,.18)}
.avatar{width:120px;height:120px;image-rendering:pixelated;filter:drop-shadow(0 10px 22px rgba(0,30,60,.35))}
.word{font:400 44px/1 var(--display);letter-spacing:.06em}
.tag{margin:0;max-width:16em;color:var(--soft);font-size:17px}
.main{display:flex;flex-direction:column;justify-content:center;gap:0;padding:56px 56px 32px;background:var(--veil,transparent)}
/* by day the name side gets a lighter veil and the line under the name is set large (19 px bold), where 3:1 is enough */
:root:not(.night) .side{background:radial-gradient(120% 90% at 50% 40%,rgba(255,255,255,.12),transparent 70%),rgba(6,36,73,.22)}
:root:not(.night) .tag{color:#FFFFFF;font:700 19px/1.35 var(--sans)}
:root:not(.night) .ask{background:linear-gradient(135deg,#1479B4,var(--low))}

.back{position:absolute;z-index:1;top:18px;left:18px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
 background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .15s}
.back:hover{background:rgba(255,255,255,.26)}

.view{display:flex;flex-direction:column;gap:16px}
.title{margin:0 0 4px;font:700 26px/1.15 var(--sans)}
.stack{display:flex;flex-direction:column;gap:12px;margin:0}
.field{width:100%;height:52px;padding:0 16px;border:0;border-radius:14px;background:rgba(255,255,255,.17);color:var(--ink);font:500 16px var(--sans);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.field::placeholder{color:rgba(255,255,255,.72)}
:root:not(.night) .field{background:rgba(4,30,60,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
:root:not(.night) .field::placeholder{color:rgba(255,255,255,.86)}
.field:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:2px}
.code{height:60px;font:700 26px var(--sans);letter-spacing:.32em;text-align:center}
.code::placeholder{font:500 17px var(--sans);letter-spacing:normal}
.go{height:52px;border:0;border-radius:999px;background:#FFFFFF;color:var(--navy);font:700 16px var(--sans);cursor:pointer;
 box-shadow:0 8px 20px rgba(0,30,60,.22);transition:transform .12s,opacity .2s}
.go:hover{transform:translateY(-1px)}.go:active{transform:translateY(1px)}
.go[disabled]{opacity:.6;cursor:default;transform:none}

.providers{display:flex;flex-direction:column;gap:10px}
.or{display:flex;align-items:center;gap:12px;margin:6px 0 2px;color:var(--soft);font-size:14px}
.or::before,.or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.28)}
.prov{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border:0;border-radius:999px;background:var(--glass);color:var(--ink);
 font:600 15px var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .15s,transform .12s}
.prov:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.prov svg{width:20px;height:20px;flex:none}
.prov[disabled]{opacity:.6;cursor:default;transform:none}

.sent,.who{margin:0;color:var(--soft);font-size:15px}
.sent b,.who b{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.sent .to{display:block;margin:2px 0}
.err{margin:0;padding:10px 12px;border-radius:12px;background:rgba(255,226,236,.95);color:#7A1F3D;font:600 14px/1.35 var(--sans)}
.row{display:flex;justify-content:space-between;gap:12px;margin:2px 0 0}
.link{padding:6px 2px;border:0;background:none;color:var(--ink);font:600 14px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link[disabled]{color:var(--soft);text-decoration:none;cursor:default}
.note{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.1);font-size:15px;line-height:1.5}
.ghost{align-self:flex-start;min-height:46px;padding:0 24px;border:0;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
 color:var(--ink);font:700 15px var(--sans);cursor:pointer}
.ok{margin:0;padding:10px 12px;border-radius:12px;background:rgba(222,255,236,.95);color:#14532D;font:600 14px/1.35 var(--sans)}

/* home: every way into the one account, then the ways to add */
[tabindex="-1"]:focus{outline:none}   /* titles and notes take focus only so screen readers read them */
.sub{margin:6px 0 -6px;color:var(--soft);font:700 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.ways{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.way{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 16px 8px 10px;border-radius:16px;background:rgba(255,255,255,.12);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
:root:not(.night) .way,:root:not(.night) .note{background:rgba(4,30,60,.2)}
.way-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--navy)}
.way-ico svg{width:19px;height:19px}
.way-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.way-text b{font:700 15px/1.25 var(--sans)}
.way-detail{color:var(--soft);font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.way-act{flex:none}
.adds{display:flex;flex-direction:column;gap:14px}
.add-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.add-list .prov{height:46px;padding:0 16px;font-size:14px}
.add-list .prov svg{width:18px;height:18px}

/* the "Disconnect Google?" question */
.ask{width:min(420px,calc(100% - 32px));padding:28px;border:0;border-radius:24px;color:var(--ink);font:500 16px/1.4 var(--sans);
 background:linear-gradient(135deg,var(--mid),var(--low));box-shadow:inset 0 0 0 1px var(--line),0 30px 80px rgba(6,30,60,.5)}
.ask::backdrop{background:rgba(6,30,60,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ask p{margin:10px 0 22px;color:var(--soft);font-size:15px;line-height:1.5}
.ask-row{display:flex;flex-wrap:wrap;gap:10px}
.ask-row .go{padding:0 26px}
.ask-row .ghost{align-self:auto;min-height:52px}
.foot{margin-top:28px;color:var(--soft);font-size:14px}
.foot a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.nojs{position:fixed;bottom:16px;left:16px;right:16px;margin:0;padding:12px;border-radius:12px;background:#fff;color:var(--cocoa);text-align:center}

/* phones and narrow windows: the whole screen, the name on top */
@media (max-width:760px){
 body{display:block;padding:0}
 .bg{display:none}
 .shell{display:flex;flex-direction:column;width:100%;min-height:100svh;border-radius:0;box-shadow:none;background:linear-gradient(var(--phone-top,var(--top)),var(--mid) 46%,var(--low));
  padding:max(20px,env(safe-area-inset-top)) 0 max(20px,env(safe-area-inset-bottom))}
 .side{padding:44px 24px 18px;border:0;background:none;gap:8px}
 .avatar{width:76px;height:76px}
 .word{font-size:32px}
 .tag{display:none}
 .main{flex:1;justify-content:flex-start;padding:10px 22px 0}
 .foot{margin-top:auto;padding:28px 0 4px;text-align:center}
 .ghost{align-self:center}
 .add-list{grid-template-columns:1fr}
 /* by day the whole phone screen is the panel: a deeper sky at the top so the title and text keep their contrast */
 :root:not(.night){--phone-top:#1479B4}
 :root:not(.night) .main,:root:not(.night) .side{background:none}
 :root:not(.night) .shell{background:linear-gradient(#1479B4,#0F6AA8 46%,var(--low))}
}