/* The ohelloo Work phone app, offered on every Work dashboard (js/work-app.js, WORK.md "Get the phone app"). Work's own
   look: white, a clean outline, purple, the waving-hand icon. Nothing here pushes the page down. */

/* A computer: one line at the foot of the menu, above their name, always there. */
.rail .ga-spot{display:none}
@media (min-width:900px){
  .rail .ga-spot{display:block;margin-top:auto;padding:0 0 10px}
  .rail .offer:not([hidden])+.ga-spot{margin-top:0}
  .rail .ga-spot+.who{margin-top:0}
}
.ga-rail{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.ga-rail:hover{border-color:var(--box-hover);background:var(--soft)}
.ga-rail svg{width:18px;height:18px;flex:none;stroke:var(--accent2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ga-rail span{white-space:nowrap}
.ga-rail i{margin-left:auto;font-style:normal;font-size:16px;line-height:1;color:var(--faint)}

/* A phone: a small bar floating above the tabs on Home. */
#gaBar{position:fixed;left:10px;right:10px;bottom:calc(var(--tab) + 10px + env(safe-area-inset-bottom,0px));z-index:19}
.ga-bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-hi)}
.ga-bar img{border-radius:8px;flex:none}
.ga-bar span{flex:1;min-width:0;line-height:1.25}
.ga-bar span b{display:block;font-size:13.5px}
.ga-bar span small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-bar .btn{flex:none;padding:6px 16px}
.ga-bar .ga-x{position:static;flex:none}
body.ga-on .main{padding-bottom:calc(var(--tab) + 92px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){#gaBar{display:none!important}body.ga-on .main{padding-bottom:28px}}

/* The panel: a sheet from the bottom on a phone, a box in the middle on a computer. */
.ga-panel{position:fixed;inset:0;z-index:60}
.ga-dim{position:absolute;inset:0;background:rgba(26,18,37,.45)}
.ga-box{position:absolute;left:0;right:0;bottom:0;max-height:90vh;overflow:auto;background:#fff;border-radius:18px 18px 0 0;padding:22px 18px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-hi)}
@media (min-width:900px){.ga-box{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:520px;border-radius:18px;padding:26px 26px 24px}}
.ga-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;background:none;color:var(--faint);font-size:20px;line-height:1;border-radius:8px;cursor:pointer}
.ga-x:hover{background:var(--soft2);color:var(--ink)}

/* What's in it (the panel, and Settings → The phone app). */
.ga-top{display:flex;align-items:flex-start;gap:14px;padding-right:24px}
.ga-ic{flex:none;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.ga-top h2{margin:2px 0 0;font-size:19px;letter-spacing:-.01em}
.ga-top p{margin:4px 0 0;font-size:14px;color:var(--text)}
.ga-scan{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:center;margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:12px}
.ga-qr{display:block;width:140px;height:140px;border-radius:8px;background:var(--soft)}
.ga-qr svg{display:block;width:100%;height:100%}
.ga-scan b{font-size:14.5px}
.ga-scan p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.ga-stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ga-badge{display:flex;flex-direction:column;justify-content:center;min-width:136px;padding:6px 14px;border-radius:12px;background:var(--ink);color:#fff;line-height:1.15;text-decoration:none}
.ga-badge:hover{text-decoration:none;background:#2C2138}
.ga-badge small{font-size:10.5px;opacity:.85}
.ga-badge b{font-size:16px;color:#fff}
.ga-badge.soon{background:#fff;border:1px dashed var(--box);color:var(--muted)}
.ga-badge.soon b{color:var(--muted)}
.ga-home,.ga-early{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--soft)}
.ga-home b,.ga-early b{font-size:14px}
.ga-home p,.ga-early p{margin:3px 0 0;font-size:13px;color:var(--text)}
.ga-k{display:inline-block;padding:0 5px;border:1px solid var(--box);border-radius:5px;background:#fff;font-size:12px;line-height:18px}
.ga-ask{display:flex;gap:8px;margin-top:10px}
.ga-ask input{height:44px!important}
.ga-ask .btn{min-height:44px}
.ga-get{display:flex;width:100%;margin-top:18px}
.ga-note{margin:10px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:420px){.ga-badge{min-width:0;flex:1}
  /* A phone: the code above its words, not squeezing them into a narrow column (styling pass, Oct 30). */
  .ga-scan{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:12px}}

/* The iPhone app in TestFlight: three steps (js/work-app.js tfStepsHtml; Omar picked "A, the checklist", Oct 30 2026).
   Every step stays on screen; the one they're on has the purple outline and the button, done steps go green. */
.ga-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ga-step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.ga-step b{display:block;font-size:14.5px;line-height:1.35}
.ga-step small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.ga-step small b{display:inline;font-size:inherit;color:var(--ink)}
.ga-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft2);color:var(--accent);font-size:13px;font-weight:700}
.ga-n svg,.ga-ok svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ga-step.now{border:1.5px solid var(--accent);box-shadow:0 0 0 3px var(--soft2)}
.ga-step.done{background:#F7FBF9;border-color:#CFE7DA}
.ga-step.done .ga-n{background:var(--ok);color:#fff}
.ga-step:not(.done):not(.now){opacity:.7}
.ga-go{display:flex;width:100%;justify-content:center;margin-top:10px;min-height:44px}
.ga-have{display:block;width:100%;margin-top:6px;padding:8px;border:0;background:none;color:var(--accent);font:600 13px var(--sans);cursor:pointer;border-radius:8px}
.ga-have:hover{background:var(--soft)}
.ga-watch,.ga-ok{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:9px 12px;border-radius:12px;font-size:13px}
.ga-watch{background:var(--soft);color:var(--muted)}
.ga-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);animation:ga-pulse 1.6s ease-in-out infinite}
@keyframes ga-pulse{50%{box-shadow:0 0 0 6px var(--gold-soft)}}
@media (prefers-reduced-motion:reduce){.ga-dot{animation:none}}
.ga-ok{background:var(--ok-soft);color:var(--ok);font-weight:600}
/* A computer: the code beside the steps (they're for the phone, so no buttons here). */
.ga-tf{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;margin-top:16px}
.ga-tf .ga-qr{width:150px;height:150px;padding:6px;border:1px solid var(--line);background:#fff}
.ga-tf .ga-steps{margin-top:0}
@media (max-width:520px){.ga-tf{grid-template-columns:minmax(0,1fr);justify-items:center}.ga-tf-steps{width:100%}}