/* ============================================================
   Modurel Identity — account & product portal (the "/" home)
   Layers on auth.css: every token, button and card style comes from
   there, so a brand override in `[data-brand="…"]` recolours this too.
   ============================================================ */

.bn-portal-body { display:flex; flex-direction:column; min-height:100vh; }

/* ---------------- top bar ---------------- */
.bn-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; border-bottom:1px solid var(--border-subtle);
  background:var(--surface); position:sticky; top:0; z-index:10;
}
.bn-topbar__brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.bn-topbar__brand:hover { text-decoration:none; }
.bn-topbar__brand span {
  font-family:var(--font-brand); font-size:18px; font-weight:600;
  letter-spacing:0.005em; color:var(--text-primary);
}
.bn-topbar__nav { display:flex; align-items:center; gap:10px; }
.bn-topbar__nav form { margin:0; }
.bn-topbar__user {
  font-size:var(--text-sm); color:var(--text-muted); max-width:22ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bn-btn--sm { height:34px; padding:0 12px; font-size:var(--text-sm); }

/* ---------------- page shell ---------------- */
.bn-portal { flex:1; width:100%; max-width:920px; margin:0 auto; padding:40px 24px 56px; }
.bn-portal__head { margin-bottom:32px; }
.bn-portal__head h1 {
  margin:0 0 8px; font-size:var(--text-4xl); line-height:1.15; font-weight:700;
  letter-spacing:-0.02em; color:var(--text-primary);
}
.bn-portal__head p { margin:0; font-size:var(--text-lg); color:var(--text-muted); max-width:60ch; }

.bn-section { margin-top:40px; }
.bn-section__head { margin-bottom:14px; }
.bn-section__head h2 {
  margin:0; font-size:var(--text-xl); font-weight:600; letter-spacing:-0.01em; color:var(--text-primary);
}
.bn-section__head p { margin:4px 0 0; font-size:var(--text-sm); color:var(--text-faint); }

/* ---------------- card grid ---------------- */
.bn-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }

.bn-tile {
  display:flex; align-items:flex-start; gap:12px; padding:16px;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface-raised); box-shadow:var(--edge-highlight);
  text-decoration:none; color:inherit;
  transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.bn-tile:hover {
  text-decoration:none; border-color:var(--border-strong);
  background:var(--surface-hover); transform:translateY(-1px);
}
.bn-tile__ic {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--accent-soft-bg); color:var(--accent-soft-fg); border:1px solid var(--border);
}
.bn-tile__ic img { border-radius:var(--radius-sm); }
.bn-tile > span:last-child { min-width:0; }   /* lets long descriptions wrap instead of overflowing */
.bn-tile__t { display:block; font-size:var(--text-md); font-weight:600; color:var(--text-primary); }
.bn-tile__s { display:block; font-size:var(--text-sm); color:var(--text-muted); margin-top:2px; }

/* ---------------- account summary ---------------- */
.bn-summary {
  display:flex; flex-wrap:wrap; gap:8px 28px; padding:16px;
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  background:var(--surface-sunken);
}
.bn-summary__item { display:flex; flex-direction:column; gap:2px; }
.bn-summary__k {
  font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:0.06em;
  font-family:var(--font-mono); color:var(--text-faint);
}
.bn-summary__v { font-size:var(--text-sm); color:var(--text-secondary); }
.bn-pill {
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px;
  border-radius:var(--radius-full); font-size:var(--text-2xs); font-weight:600;
}
.bn-pill--ok { background:var(--success-soft); color:var(--success-fg); }
.bn-pill--warn { background:var(--warning-soft); color:var(--warning-fg); }

/* ---------------- signed-out hero ---------------- */
.bn-hero { padding:48px 0 8px; text-align:center; }
.bn-hero__mark { margin-bottom:20px; }
.bn-hero h1 {
  margin:0 auto 12px; max-width:18ch; font-size:var(--text-5xl); line-height:1.05;
  font-weight:700; letter-spacing:-0.025em; color:var(--text-primary);
}
.bn-hero p { margin:0 auto 28px; max-width:56ch; font-size:var(--text-lg); color:var(--text-muted); }
.bn-hero__cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.bn-empty {
  padding:20px; text-align:center; font-size:var(--text-sm); color:var(--text-faint);
  border:1px dashed var(--border); border-radius:var(--radius-lg);
}

/* ---------------- footer ---------------- */
.bn-portal__foot {
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  padding:20px 24px 28px; border-top:1px solid var(--border-subtle);
  font-size:var(--text-xs); color:var(--text-faint);
}

@media (max-width:640px) {
  .bn-topbar { padding:12px 16px; }
  .bn-topbar__user { display:none; }
  .bn-portal { padding:28px 16px 40px; }
  .bn-hero h1 { font-size:var(--text-4xl); }
}