/* CLOUD — styles for the sign-in gate (cloud/gate-ui.js), the sidebar account block and property pulldown
   (cloud/gate.js) and read-only mode. Uses the cockpit's tokens only; no new colour literals. */

/* ---------- gate: full-screen front door ---------- */
body[data-gate="on"] .shell{visibility:hidden}
#gate{position:fixed;inset:0;z-index:60;overflow:auto;background:var(--bg)}
.gate{min-height:100vh;display:grid;grid-template-columns:minmax(300px,420px) 1fr}
.gate-brand{
  background:linear-gradient(170deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  color:var(--white);
  padding:var(--space-12) var(--space-10);
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);
}
.gate-mark{color:color-mix(in srgb,var(--white) 85%,var(--g1));display:flex}
.gate-company{
  font-size:var(--text-xs);font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--white) 70%,transparent);
}
.gate-product{font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1.1;margin:0}
.gate-tag{font-size:var(--text-lg);color:color-mix(in srgb,var(--white) 82%,transparent);margin:0 0 var(--space-4);line-height:1.4}
.gate-points{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-3)}
.gate-points li{
  position:relative;padding-left:22px;font-size:var(--text-sm);line-height:1.5;
  color:color-mix(in srgb,var(--white) 78%,transparent);
}
.gate-points li::before{
  content:'';position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--g1),color-mix(in srgb,var(--g1) 50%,var(--white)));
}
.gate-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-10);gap:var(--space-4)}
.gate-card{
  width:min(100%,460px);background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:var(--space-8);display:grid;gap:var(--space-4);
}
.gate-card.wide{width:min(100%,640px)}
.gate-k{font-size:var(--text-xs);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.gate-card h2{margin:0;font-size:26px;font-weight:900;letter-spacing:-.015em;color:var(--navy);line-height:1.15}
.gate-sub{margin:0;color:var(--muted);font-size:var(--text-sm);line-height:1.55}
.gate-fld{margin-top:var(--space-1)}
.gate-fld input{font-size:var(--text-base);padding:11px 12px}
.gate-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}
.gate-actions .btn{padding:11px 24px;font-size:var(--text-base)}
.gate-fine{margin:0;font-size:var(--text-xs);color:var(--faint);line-height:1.5}
.gate .lnk{
  background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:var(--text-sm);font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.gate .lnk:hover{color:var(--navy)}
.gate-msg{border:1px solid;border-radius:var(--radius);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);line-height:1.5}
.gate-msg.warn{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)}
.gate-msg.ok{background:var(--green-bg);border-color:var(--green-bd);color:var(--green)}
.gate-who{font-size:var(--text-xs);color:var(--muted)}
.gate-who .lnk{font-size:var(--text-xs)}

/* two-factor enrolment */
.gate-enrol{display:grid;grid-template-columns:200px 1fr;gap:var(--space-5);align-items:start}
.gate-qr{border:2px solid var(--line);border-radius:var(--radius);padding:8px;background:var(--white);display:flex}
.gate-qr img{display:block;width:180px;height:180px}
.gate-steps{margin:0;padding-left:20px;display:grid;gap:var(--space-3);font-size:var(--text-sm);line-height:1.5;color:var(--text)}
.gate-secret{
  display:block;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.08em;word-break:break-all;user-select:all;
}

/* corporation chooser */
.gate-tenants{display:grid;gap:var(--space-3)}
.gate-tenant{
  display:grid;gap:3px;text-align:left;padding:var(--space-4) var(--space-5);border:2px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);font:inherit;cursor:pointer;color:var(--text);transition:border-color .15s,background .15s;
}
.gate-tenant:hover,.gate-tenant:focus-visible{
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--white));outline:0;
}
.gate-tenant-name{font-weight:900;color:var(--navy);font-size:var(--text-base)}
.gate-tenant-meta{font-size:var(--text-xs);color:var(--muted)}

/* waiting */
.gate-wait{justify-items:center;text-align:center}
.gate-wait h2{font-size:var(--text-lg);color:var(--muted);font-weight:700}
.gate-spinner{
  width:34px;height:34px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent);
  animation:gate-spin .9s linear infinite;
}
@keyframes gate-spin{to{transform:rotate(360deg)}}

/* ---------- sidebar: property pulldown and account block ---------- */
.side-account{
  padding:var(--space-4) var(--space-3) 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.45;
  display:grid;gap:4px;margin-top:var(--space-4);
}
.side-prop{display:grid;gap:4px;margin-bottom:var(--space-3)}
.side-prop select{
  width:100%;font:inherit;font-weight:700;font-size:13px;color:var(--navy);padding:8px 10px;border-radius:10px;
  border:2px solid var(--line);background:var(--surface);
}
.side-prop select:focus{outline:0;border-color:var(--accent)}
.acct-name{font-weight:800;color:var(--navy);font-size:13.5px}
.acct-mail{font-size:11.5px;color:var(--faint);word-break:break-all}
.acct-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 6px}
.acct-save{font-size:11px;font-weight:700;color:var(--faint)}
.acct-save[data-state="saved"]{color:var(--green)}
.acct-save[data-state="pending"],.acct-save[data-state="saving"]{color:var(--amber)}
.acct-save[data-state="error"]{color:var(--red)}
.side-account .side-link{margin-top:2px}

/* ---------- read-only members: no Administer tools ---------- */
body[data-access="read"] .nav-item[data-tab="setup"],
body[data-access="read"] .nav-item[data-tab="statements"],
body[data-access="read"] .nav-item[data-tab="settings"],
body[data-access="read"] .nav-item[data-tab="people"]{display:none}
body[data-access="read"] .nav-k:has(+ .nav-item[data-tab="setup"]){display:none}

/* three-column form rows on the People page */
.fgrid.three{grid-template-columns:repeat(3,1fr)}