.remote-mode #app{min-height:100vh}
#gate{position:fixed;inset:0;z-index:1000;display:flex;background:#fff;overflow:auto;color:#17211e}
#gate[hidden]{display:none}
.gate-form-side{flex:1 1 50%;display:flex;align-items:flex-start;justify-content:center;padding:32px 24px}
.gate-card{width:100%;max-width:380px;display:grid;gap:8px;color:#17211e;margin:auto 0}
.gate-card h1{margin:0;font-size:1.6rem;line-height:1.2;letter-spacing:-.01em}
.gate-co-logo{display:block;width:170px;height:auto;margin:0 0 18px}
.gate-logo{display:block;width:180px;height:auto;margin:0 0 10px}
.gate-env{margin:0 0 14px;color:#5b6863;font-size:.9rem;line-height:1.45}
.gate-msg{margin:0 0 4px;padding:10px 12px;border-radius:10px;background:#fbf4e6;border:1px solid #d9c08f;font-size:.9rem}
.gate-card label{font-size:.875rem;font-weight:600;margin-top:6px;color:#33403a}
.gate-card input[type=email],.gate-card input[type=password],.gate-card input[type=text]{min-height:46px;font-size:16px;padding:0 14px;border:1px solid #d5dbd8;border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s}
.gate-card input:focus{border-color:#1b2a33;box-shadow:0 0 0 4px rgba(27,42,51,.12)}
.gate-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 4px;font-size:.875rem}
.gate-card label.gate-check{display:flex;align-items:center;gap:8px;margin:0;font-weight:500;color:#4b5a55;cursor:pointer}
.gate-check input{width:18px;height:18px;accent-color:#1b2a33}
.gate-link{background:none;border:0;padding:6px 0;font:inherit;font-weight:600;color:#1b2a33;cursor:pointer}
.gate-link:hover{text-decoration:underline}
.gate-card .btn.gate-signin{min-height:48px;border-radius:12px;background:#1b2a33;border-color:#1b2a33;color:#fff;font-size:1rem;margin-top:4px}
.gate-card .btn.gate-signin:hover{background:#2a3d48}
.gate-or{display:flex;align-items:center;gap:12px;margin:10px 0;color:#8a9690;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.gate-or span{flex:1;height:1px;background:#e2e6e4}
.gate-card .btn.gate-create{min-height:46px;border-radius:12px;background:#fff;border:1px solid #d5dbd8;color:#33403a}
.gate-card .btn.gate-create:hover{background:#f6f7f6}
.gate-hint{margin:6px 0 0;color:#6b7772;font-size:.85rem}
.gate-powered{display:flex;align-items:center;gap:6px;margin:28px 0 0;color:#8a9690;font-size:.75rem}
.gate-powered img{width:84px;height:auto;opacity:.85}
.gate-visual{display:none}
@media (min-width:1024px){
  .gate-visual{display:flex;flex:1 1 50%;position:sticky;top:0;min-height:100vh;flex-direction:column;justify-content:space-between;padding:48px 56px;overflow:hidden;color:#c9a35f;
    background:radial-gradient(120% 90% at 80% 10%,#22343f 0%,#141e24 55%,#0e1519 100%)}
  .gate-visual::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(201,163,95,.05) 0 2px,transparent 2px 22px);pointer-events:none}
  .gate-sb{width:150px;height:auto;position:relative;z-index:1}
  .gate-skyline{width:min(78%,520px);height:auto;align-self:center;opacity:.9;position:relative;z-index:1}
  .gate-quote{position:relative;z-index:1;max-width:460px}
  .gate-headline{margin:0;font-size:2.1rem;line-height:1.15;font-weight:700;color:#fff;letter-spacing:-.01em}
  .gate-sub{margin:12px 0 0;color:#a9b4b0;font-size:.95rem}
}
.gate-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.gate-actions .btn{min-height:44px;flex:1}
#remote-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 16px;background:#fdf1d8;border-bottom:1px solid #bda873;font-size:.8125rem}
#remote-banner span{flex:1 1 260px}
.remote-mode .view-switch,.remote-mode .proto-tag{display:none}
.remote-mode .worker-role-controls{display:none}
.gate-note{margin:0;padding:10px 12px;border-radius:8px;background:#e6f0ea;border:1px solid #6f9c85;font-size:.9rem}
.invite-dialog{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;background:rgba(25,38,34,.82)}
.invite-dialog select,.invite-dialog input[type=text]{min-height:44px;font-size:16px;padding:0 12px;border:1px solid #8a9690;border-radius:8px}
.invite-result{display:grid;gap:8px;margin-top:8px}
.remote-supervisor a[href="#money"],.remote-supervisor a[href="#leads"],.remote-supervisor a[href="#plan"],.remote-supervisor a[href="#settings"],.remote-supervisor a[href="#setup"],.remote-supervisor a[href="#purchasing"]{display:none}
/* invitation card: opening a team invite link (remote-tasks.js showInvite) */
.inv-page{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;background:#f5f6f5;min-height:100%}
.inv-card{margin:auto 0;width:100%;max-width:440px;background:#fff;border:1px solid #e2e6e4;border-radius:20px;padding:32px 28px;text-align:center;box-shadow:0 1px 3px rgba(20,30,36,.06);display:grid;gap:4px}
.inv-card h1{margin:0;font-size:1.3rem;line-height:1.3;color:#17211e;letter-spacing:-.01em}
.inv-avatars{display:flex;align-items:center;justify-content:center;margin:0 0 18px;position:relative}
.inv-person,.inv-tile{width:60px;height:60px;display:grid;place-items:center;box-shadow:0 0 0 4px #fff}
.inv-person{border-radius:50%;background:#c9a35f;color:#fff;font-weight:600;font-size:1.1rem}
.inv-tile{margin-left:-12px;border-radius:18px;background:#fff;border:1px solid #e2e6e4;overflow:hidden}
.inv-tile img{width:48px;height:auto}
.inv-tick{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#1b2a33;color:#b7e85a;font-size:12px;display:grid;place-items:center;box-shadow:0 0 0 3px #fff}
.inv-sub{margin:2px 0 0;color:#6b7772;font-size:.875rem}
.inv-summary{margin:20px 0 18px;padding:14px 16px;border:1px solid #e2e6e4;border-radius:14px;background:#f8f9f8;display:grid;gap:12px;text-align:left;font-size:.875rem}
.inv-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inv-line>span:first-child{color:#6b7772}
.inv-pill{padding:4px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #d5dbd8;font-size:.75rem;font-weight:600;color:#33403a}
.inv-stack{display:flex}
.inv-stack span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;background:#1b2a33;box-shadow:0 0 0 2px #f8f9f8}
.inv-stack span+span{margin-left:-8px}
.inv-stack span:nth-child(2){background:#2d5e48}
.inv-stack span.inv-more{background:#e2e6e4;color:#4b5a55;font-weight:600}
.inv-mail{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;color:#17211e;word-break:break-all;text-align:right}
.inv-card .btn.gate-signin{width:100%;min-height:50px;border-radius:12px;background:#1b2a33;border-color:#1b2a33;color:#fff;font-size:1rem}
.inv-card .btn.gate-signin:hover{background:#2a3d48}
.inv-decline{margin-top:6px;min-height:44px;border:0;border-radius:12px;background:none;font:inherit;font-weight:600;font-size:.9rem;color:#6b7772;cursor:pointer}
.inv-decline:hover{background:#f5f6f5;color:#17211e}
.inv-small{margin:14px 0 0;color:#8a9690;font-size:.75rem;line-height:1.5}
.inv-card .gate-powered{justify-content:center;margin-top:18px}
/* sign in without a password (remote-tasks.js showLinkCard) */
.link-card{text-align:left;max-width:400px}
.link-badge{width:52px;height:52px;border-radius:14px;border:1px solid #e2e6e4;background:#fff;display:grid;place-items:center;margin:0 0 18px;overflow:hidden}
.link-badge img{width:40px;height:auto}
.link-card .inv-sub{margin:4px 0 18px;line-height:1.5}
.link-form{display:grid;gap:10px}
.link-form input{min-height:48px;font-size:16px;padding:0 14px;border:1px solid #d5dbd8;border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s}
.link-form input:focus{border-color:#1b2a33;box-shadow:0 0 0 4px rgba(27,42,51,.12)}
.link-info{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:#f5f6f5;color:#5b6863;font-size:.8rem;line-height:1.55}
.link-card .btn.gate-create{width:100%;margin-top:16px;min-height:46px;border-radius:12px;background:#fff;border:1px solid #d5dbd8;color:#33403a}
.link-foot{margin:20px 0 0;text-align:center;color:#6b7772;font-size:.875rem}
.link-card .gate-msg{margin:0 0 12px}
.gate-card .gate-emaillink{justify-self:center;margin-top:2px;font-size:.875rem}
/* desktop: the menu bar is fixed at the top (76px); put the signed-in strip (Sign out, Reload, alerts) just under it instead of hidden behind it.
   Phones use their own numbers in mobile.css, which loads after this file. */
body:has(.workspace-header)>#remote-banner{margin-top:76px}
body:has(>#remote-banner) .project-centred-layout{padding-top:0}
/* live app: no "Design preview" label (that was for the sample version) */
.remote-mode .context-preview{display:none}
/* laptop and desktop top bar: the menu shrinks (and scrolls if it must) instead of pushing "New" and the account off the screen, and keeps room for the bell */
@media (min-width:641px){
  .remote-mode .workspace-header{padding-right:76px}
  .remote-mode .workspace-navigation{min-width:0;overflow-x:auto;scrollbar-width:none}
  .remote-mode .workspace-navigation::-webkit-scrollbar{display:none}
  .remote-mode .workspace-controls{flex-shrink:0}
  .remote-mode .workspace-controls .account-label{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  .remote-mode .nb-bell{top:16px;right:16px;width:44px;height:44px;font-size:18px;border-width:1.5px;box-shadow:none}
}
@media (min-width:641px) and (max-width:1440px){
  .remote-mode .workspace-brand{min-width:0}
  .remote-mode .workspace-brand small{display:none}
  .remote-mode .workspace-navigation>a{padding-left:8px;padding-right:8px}
  .remote-mode .workspace-controls .account-label{display:none}
}