/* Vistrux Team — only what Vistrux OS's app.css does not already cover:
   the sign-in screen, checklists, the vault, and a phone layout. */

[hidden]{ display:none!important; }
.brand-logo{ display:block; width:132px; height:auto; filter:brightness(0) invert(1); }
.rail-foot{ flex-direction:column; align-items:flex-start; gap:6px; }
.rail-foot .who{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; color:rgba(255,255,255,.7); font-size:11px; }
.foot-links{ display:flex; gap:12px; flex-wrap:wrap; }
.linkbtn{ background:none; border:0; color:rgba(255,255,255,.7); cursor:pointer; font-size:10.5px; padding:0; }
.linkbtn:hover{ color:#fff; text-decoration:underline; }
.view-inner.enter{ animation:vt-rise .22s ease-out both; }
@keyframes vt-rise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- sign-in ---------- */
.login{ min-height:100vh; height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; overflow-y:auto; }
.login-card{ width:100%; max-width:410px; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--shadow); padding:34px 30px 28px; }
.login-card .logo{ width:150px; display:block; margin-bottom:6px; }
.login-card .eyebrow{ display:block; margin-bottom:22px; }
.login-card h2{ font-family:var(--f-head); font-weight:600; font-size:19px; margin:0 0 6px; color:var(--teal); }
.login-card p{ color:var(--muted); margin:0 0 16px; font-size:13px; }
.login-card .inp{ width:100%; margin-bottom:10px; }
.login-card .btn{ width:100%; justify-content:center; }
.login-or{ display:flex; align-items:center; gap:10px; margin:20px 0 14px; color:var(--muted); font-size:11.5px; }
.login-or::before,.login-or::after{ content:""; flex:1; border-top:1px solid var(--line); }
#gBtn{ min-height:44px; display:flex; justify-content:center; }
.login-msg{ margin-top:12px; font-size:12.5px; }
.login-foot{ margin-top:22px; font-size:11px; color:var(--muted); }

/* ---------- checklists ---------- */
.prog{ height:6px; border-radius:3px; background:var(--line-soft); overflow:hidden; }
.prog > i{ display:block; height:100%; background:var(--teal); border-radius:3px; transition:width .3s; }
.ck{ display:flex; gap:12px; align-items:flex-start; padding:12px 18px; border-top:1px solid var(--line-soft); }
.ck:first-child{ border-top:0; }
.ck-mark{ flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--sage); margin-top:1px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; }
.ck.done .ck-mark{ background:var(--teal); border-color:var(--teal); }
.ck-body{ flex:1; min-width:0; }
.ck-label{ font-weight:500; }
.ck-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.ck-act{ flex:none; display:flex; gap:6px; align-items:center; }
.ck-val{ display:flex; gap:6px; margin-top:8px; }
.ck-val .inp{ flex:1; min-width:0; }
.policy{ max-height:52vh; overflow-y:auto; padding:2px 4px 6px; }
.policy h1{ display:none; }
.policy h2{ font-family:var(--f-head); font-size:14px; color:var(--teal); margin:18px 0 6px; }
.policy p,.policy li{ font-size:13px; }
.policy ul{ padding-left:20px; margin:6px 0; }

/* ---------- the deed ---------- */
.deed{ font-family:Georgia,'Times New Roman',serif; font-size:13.5px; line-height:1.65; max-height:60vh; overflow-y:auto; padding-right:8px; }
.deed h1{ font-family:var(--f-head); font-size:18px; color:var(--teal); margin:0 0 6px; }
.deed p{ margin:0 0 10px; }
.deed-tbl{ border-collapse:collapse; width:100%; font-family:var(--f-body); font-size:12.5px; margin:6px 0 14px; }
.deed-tbl th,.deed-tbl td{ border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.deed-sig{ border-left:3px solid var(--teal); padding-left:10px; font-family:var(--f-body); font-size:12.5px; }
.deed-sig.pending{ border-left-color:var(--sand); color:var(--muted); }
.ck-locked{ opacity:.55; }

/* ---------- people ---------- */
.who-row{ cursor:pointer; }
.who-row:hover td{ background:var(--sand-tint); }
.perm-row{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line-soft); }
.perm-row:first-child{ border-top:0; }
.perm-row input{ margin-top:3px; }
.perm-mod{ font-family:var(--f-head); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); margin:14px 0 2px; }
.alert-row{ display:flex; gap:12px; align-items:center; padding:12px 18px; border-top:1px solid var(--line-soft); }
.alert-row:first-child{ border-top:0; }
.alert-row .dot{ flex:none; }
.lvl-risk{ background:var(--risk); } .lvl-warn{ background:var(--warn); } .lvl-ok{ background:var(--ok); }
.vault-note{ display:flex; gap:10px; align-items:flex-start; }
.mono{ font-family:ui-monospace,Consolas,monospace; font-size:12px; }

/* ---------- phones ---------- */
@media (max-width:820px){
  body{ overflow:auto; }
  .app{ display:block; height:auto; }
  .rail{ height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; }
  .brand{ padding:12px 16px; }
  .brand-logo{ width:96px; }
  .brand-sub{ display:none; }
  .nav{ order:3; width:100%; display:flex; overflow-x:auto; padding:0 8px 8px; gap:2px; scrollbar-width:none; }
  .nav .nav-group{ display:none; }
  .nav-item{ white-space:nowrap; width:auto; }
  .rail-foot{ margin-left:auto; border-top:0; padding:10px 16px; align-items:flex-end; }
  .rail-foot .who{ display:none; }
  .main{ height:auto; }
  .view{ overflow:visible; padding:18px 16px 60px; }
  .tabs{ overflow-x:auto; flex-wrap:nowrap; }
  .tab{ white-space:nowrap; }
  .card-body.flush{ overflow-x:auto; }
  .editor-grid{ grid-template-columns:1fr; }
  .ck{ flex-wrap:wrap; }
  .ck-act{ width:100%; padding-left:32px; }
}