/* ============================================================
   PORTAL — page-specific rules only. Colors, spacing, radius,
   shadow, type, and every base component (.btn, login-wrap/card,
   header) come from assets/tokens.css, loaded first. See CLAUDE.md's
   design-system section before adding anything here that belongs in
   the shared foundation instead.
   ============================================================ */

.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.login-word{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.login-word .t{color:var(--wordmark-team)}
.login-word .p{color:var(--wordmark-pfaff)}

main{max-width:1100px;margin:0 auto;padding:var(--sp-6) var(--sp-4) var(--sp-12)}
main h1{font-size:var(--fs-h1);margin-bottom:var(--sp-4)}

/* ---- header right-slot controls ---- */
.icon-only{width:var(--tap);padding:0;justify-content:center}
.rm-toggle{display:none;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.rm-toggle input{width:18px;height:18px}
@media(min-width:640px){.rm-toggle{display:flex}}
.whoami{display:none;align-items:center;gap:8px}
@media(min-width:520px){.whoami{display:flex}}
.av{width:30px;height:30px;border-radius:var(--r-full);background:var(--teal);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}

/* ---- launcher tiles — single column first (mobile-first), grid from tablet width up ---- */
.tiles{display:flex;flex-direction:column;gap:var(--sp-3)}
@media(min-width:640px){
  .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-4)}
}
.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:var(--sp-4);display:flex;align-items:center;gap:var(--sp-4);
  text-decoration:none;color:var(--ink);transition:.14s;min-height:64px;
}
.tile:hover{border-color:var(--teal)}
.tile-icon{font-size:28px;width:48px;height:48px;flex:none;border-radius:var(--r-md);
  background:var(--panel-sunken);display:flex;align-items:center;justify-content:center}
.tile-name{font-weight:700;font-size:15px}
.tile.admin{border-style:dashed}