* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  background:#fbfcfb; color:#234b40;
  font-family:'Trebuchet MS','Verdana',sans-serif;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
.app {
  flex:1; display:flex; flex-direction:column; width:100%;
  padding: max(22px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}
.stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.top { text-align:center; margin-top:22px; }
.top .wm { font-family:'Trebuchet MS',sans-serif; font-weight:bold; font-size:20px; color:#234b40; margin-top:2px; }
.logo { width:200px; max-width:64%; }
.head { font-family:'Trebuchet MS',sans-serif; font-weight:bold; font-size:26px; color:#234b40; line-height:1.1; }
.sub { font-size:14.5px; color:#4a6b60; margin-top:5px; line-height:1.5; }
.glbl { display:block; font-size:13px; font-weight:bold; color:#3d5a51; margin:0 0 6px 2px; font-family:'Trebuchet MS',sans-serif; }
.gin { width:100%; padding:13px 14px; border:1px solid #dbe2dd; border-radius:12px; font-size:15px; background:#fff; color:#234b40; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; }
.gin::placeholder { color:#b3c1bb; }
.gin:focus { border-color:#5c968a; outline:none; box-shadow:0 0 0 3px rgba(92,150,138,.16); }
.hint { font-size:12px; color:#93a8a0; margin:6px 0 0 2px; line-height:1.45; }
.gsec { font-family:'Trebuchet MS',sans-serif; font-weight:bold; font-size:15px; color:#234b40; margin:22px 0 2px; }
.cta { display:block; width:100%; background:#5c968a; color:#fff; border:none; border-radius:14px; padding:16px;
       font-family:'Trebuchet MS',sans-serif; font-weight:bold; font-size:16px; cursor:pointer; text-align:center; text-decoration:none; transition:background .15s; }
.cta:hover { background:#53897e; }
.cta:active { transform:scale(.99); }
.muted { text-align:center; font-size:14px; color:#93a8a0; }
.link { color:#5c968a; font-weight:bold; cursor:pointer; text-decoration:none; }
.link:hover { text-decoration:underline; }
.grow { flex:1; }
.pill { display:inline-block; background:#e7f0ec; color:#3d7a68; font-family:'Trebuchet MS',sans-serif; font-weight:bold; font-size:12px; padding:4px 11px; border-radius:999px; }
.pwwrap { position:relative; }
.pwtoggle { position:absolute; right:13px; top:13px; font-size:13px; font-weight:bold; color:#93a8a0; cursor:pointer; font-family:'Trebuchet MS',sans-serif; }

.caret { font-weight:normal; }
.wink { display:none; margin-left:8px; opacity:0; transform:scale(.5); transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.6,.5,1); }
.wink.show { display:inline-block; vertical-align:-4px; }
.wink.on { opacity:1; transform:scale(1); }
.wink.on .ro { animation:wko 3.3s ease-in-out .7s infinite; }
.wink.on .rw { animation:wkc 3.3s ease-in-out .7s infinite; }
.wink.on .mlift { animation:mlift 3.3s ease-in-out .7s infinite; transform-origin:center; transform-box:fill-box; }
.wink.on .fb { animation:fbounce 3.3s ease-in-out .7s infinite; transform-origin:center; transform-box:fill-box; }
@keyframes wko { 0%,80%,100%{opacity:1} 84%{opacity:0} 91%{opacity:0} 94%{opacity:1} }
@keyframes wkc { 0%,81%,100%{opacity:0} 85%{opacity:1} 91%{opacity:1} 94%{opacity:0} }
@keyframes mlift { 0%,80%,100%{transform:translateY(0)} 87%{transform:translateY(-4px)} 93%{transform:translateY(0)} }
@keyframes fbounce { 0%,79%,100%{transform:translateY(0)} 87%{transform:translateY(-2px)} 94%{transform:translateY(0)} }
.l1 { margin-top:56px; min-height:38px; font-family:'Trebuchet MS','Verdana',sans-serif; font-weight:bold; font-size:32px; line-height:1; color:#234b40; }
.l2 { margin-top:14px; min-height:26px; font-size:16px; line-height:1.55; color:#4a6b60; max-width:260px;
      font-family:-apple-system,'Segoe UI',Roboto,sans-serif; }
.actions { display:flex; flex-direction:column; gap:14px; }

.toast { position:fixed; left:50%; bottom:38px; transform:translateX(-50%) translateY(16px);
  background:#234b40; color:#fff; padding:12px 20px; border-radius:12px;
  font-family:-apple-system,'Segoe UI',Roboto,sans-serif; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:20; max-width:88vw; }
/* .show restores pointer events so an Undo link is genuinely tappable
   (ratecard rule 14; the fix lives HERE now, not re-copied per page) */
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* Laptop / desktop: one uniform, roomy centred card on EVERY screen
   (Gerhard, 2 Jul: the app is worked on real PCs/laptops, so desktop gets
   proper size everywhere; phone layouts are untouched). */
@media (min-width:700px) {
  body { display:block; }
  .app {
    width:min(760px, calc(100vw - 48px)); margin:40px auto; min-height:auto;
    border:1px solid #e7eae7; border-radius:28px;
    box-shadow:0 14px 44px rgba(35,75,64,.08);
    padding:44px 52px 36px;
  }
  .app.tall { min-height:560px; }
}

/* ---- shared app-shell nav (4 Jul): tabs pinned TOP on desktop, BOTTOM on the
   phone, always there on scroll. Opt in per page with <body class="hasnav">
   plus the <nav class="gnav"> markup. Pages without the class are untouched. */
.gnav{position:fixed; z-index:35; background:#fff; display:flex;}
.gnav .brand{display:flex; align-items:center; gap:9px; margin-right:auto;}
.gnav .brand .wm{font-family:'Trebuchet MS',sans-serif; font-weight:bold; font-size:18px; color:#234b40;}
.gtab{border:none; background:none; cursor:pointer; color:#8a9d95; text-decoration:none; font-family:'Trebuchet MS',sans-serif; font-weight:bold; display:flex; align-items:center; justify-content:center;}
.gtab .tlbl{white-space:nowrap;}
.gtab svg{stroke:currentColor; fill:none;}
.gtab.on{color:#5c968a;}
@media (min-width:700px){
  .gnav{top:0; left:0; right:0; height:68px; align-items:center; gap:5px; padding:0 30px; border-bottom:1px solid #e7eae7; box-shadow:0 2px 14px rgba(35,75,64,.05);}
  .gnav .brand svg{width:34px; height:auto;}
  .gnav .brand .wm{font-size:20px;}
  .gtab{font-size:15.5px; padding:11px 20px; border-radius:12px;}
  .gtab .ico{display:none;}
  .gtab:hover{color:#234b40; background:#f2f6f3;}
  .gtab.on{color:#5c968a; background:#eef4ef;}
  body.hasnav{padding-top:68px;}
}
/* during registration (?setup=1) the two dual-purpose screens drop the bar */
html.setup .gnav{display:none;}

/* shared spoken-notes mic (new job / job card / clients) */
.notemicrow{display:flex; align-items:center; gap:9px; margin-top:8px; flex-wrap:wrap;}
.notemic{flex:none; border:1px solid #dbe2dd; background:#fff; color:#234b40; font-family:'Trebuchet MS',sans-serif; font-weight:bold; font-size:13px; padding:8px 14px; border-radius:11px; cursor:pointer;}
.notemic:hover{border-color:#5c968a;}
.notemic.rec{background:#b3564d; border-color:#b3564d; color:#fff;}
.notemicrow .hint{margin:0;}
@media (max-width:699px){
  .gnav{bottom:0; left:0; right:0; border-top:1px solid #e7eae7; box-shadow:0 -2px 18px rgba(35,75,64,.07); padding-bottom:env(safe-area-inset-bottom);}
  .gnav .brand{display:none;}
  .gtab{flex:1; flex-direction:column; gap:3px; padding:9px 0 8px; font-size:10.5px; border-radius:0;}
  .gtab .ico{display:block;}
  .gtab svg{width:22px; height:22px; stroke-width:2;}
  .gtab.on{color:#5c968a; background:none;}
  body.hasnav .app{padding-bottom:calc(78px + env(safe-area-inset-bottom));}
  body.hasnav .askfab{bottom:calc(84px + env(safe-area-inset-bottom));}
  body.hasnav .askpanel{bottom:calc(150px + env(safe-area-inset-bottom));}
}