/* ── Portal home (v3) ─────────────────────────────────────────────────────
   Calm, low-contrast launcher for admins who live in the portal all day:
   one neutral surface, one accent per portal used sparingly, no competing
   gradients. Scoped to #portalHomePage; new hx-* class names so none of the
   legacy .ph-* rules in style.css apply. JS hooks kept: data-portal-card,
   data-portal-access-note, the portalHome*Btn ids, #phHeroGreet and the
   .ph-portal-restricted class toggled by auth.js. */

#portalHomePage{
  --hx-surface:var(--dk-surface);
  --hx-surface-hover:#ffffff;
  --hx-border:var(--dk-border);
  --hx-text:var(--dk-text);
  --hx-muted:var(--dk-muted);
  --hx-faint:var(--dk-faint);
  --hx-chip:var(--dk-chip);
  --hx-shadow:var(--dk-shadow);
  --hx-shadow-hover:var(--dk-shadow-hover);
}
html[data-theme="dark"] #portalHomePage{
  --hx-surface:var(--dk-surface);
  --hx-surface-hover:rgba(36,48,68,.72);
  --hx-border:var(--dk-border);
  --hx-text:var(--dk-text);
  --hx-muted:var(--dk-muted);
  --hx-faint:var(--dk-faint);
  --hx-chip:var(--dk-chip);
  --hx-shadow:var(--dk-shadow);
  --hx-shadow-hover:var(--dk-shadow-hover);
}

/* Small screens: let the launcher scroll instead of clipping. */
#portalHomePage:not(.hidden){ overflow-y:auto; }

#portalHomePage .hx-home{
  width:100%;
  max-width:1180px;
  /* auto margins centre the launcher vertically in the flex shell */
  margin:auto;
  padding:24px 24px 6vh !important;
  color:var(--hx-text);
}

/* ── hero ── */
#portalHomePage .hx-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
#portalHomePage .hx-greet{
  font-size:15px;
  font-weight:600;
  color:var(--hx-muted);
  margin:0 0 6px;
}
#portalHomePage .hx-title{
  margin:0;
  font-size:clamp(22px,2.4vw,28px);
  font-weight:800;
  line-height:1.5;
  color:var(--hx-text);
}
#portalHomePage .hx-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#portalHomePage .hx-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 13px;
  border-radius:999px;
  background:var(--hx-surface);
  border:1px solid var(--hx-border);
  color:var(--hx-muted);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
#portalHomePage .hx-chip svg{ width:15px; height:15px; flex:0 0 auto; }
#portalHomePage .hx-chip-hint{ display:none; }
@media (hover:hover) and (pointer:fine){
  #portalHomePage .hx-chip-hint{ display:inline-flex; }
}

/* ── grid ── */
#portalHomePage .hx-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
@media (max-width:860px){
  #portalHomePage .hx-grid{ grid-template-columns:1fr; gap:12px; }
}

/* ── card ── */
#portalHomePage .hx-card{
  --tone:#4f46e5; --tone-soft:rgba(79,70,229,.10); --tone-line:rgba(79,70,229,.35);
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:132px;
  padding:22px 24px;
  border-radius:18px;
  background:var(--hx-surface);
  border:1px solid var(--hx-border);
  box-shadow:var(--hx-shadow);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  animation:hx-rise .32s ease both;
}
#portalHomePage .hx-card:nth-child(2){ animation-delay:.04s; }
#portalHomePage .hx-card:nth-child(3){ animation-delay:.08s; }
#portalHomePage .hx-card:nth-child(4){ animation-delay:.12s; }
@keyframes hx-rise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* thin accent on the reading-start edge */
#portalHomePage .hx-card::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:24px; bottom:24px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--tone);
  opacity:.85;
}
#portalHomePage .hx-card:hover,
#portalHomePage .hx-card:focus-within{
  transform:translateY(-2px);
  border-color:var(--tone-line);
  background:var(--hx-surface-hover);
  box-shadow:var(--hx-shadow-hover);
}

#portalHomePage .hx-card[data-tone="content"]{ --tone:#b45309; --tone-soft:rgba(217,119,6,.10); --tone-line:rgba(217,119,6,.38); }
#portalHomePage .hx-card[data-tone="sales"]{ --tone:#1d4ed8; --tone-soft:rgba(37,99,235,.09); --tone-line:rgba(37,99,235,.35); }
#portalHomePage .hx-card[data-tone="support"]{ --tone:#6d28d9; --tone-soft:rgba(124,58,237,.09); --tone-line:rgba(124,58,237,.35); }
#portalHomePage .hx-card[data-tone="management"]{ --tone:#047857; --tone-soft:rgba(5,150,105,.10); --tone-line:rgba(5,150,105,.38); }
html[data-theme="dark"] #portalHomePage .hx-card[data-tone="content"]{ --tone:#fbbf24; --tone-soft:rgba(251,191,36,.12); --tone-line:rgba(251,191,36,.35); }
html[data-theme="dark"] #portalHomePage .hx-card[data-tone="sales"]{ --tone:#60a5fa; --tone-soft:rgba(96,165,250,.12); --tone-line:rgba(96,165,250,.35); }
html[data-theme="dark"] #portalHomePage .hx-card[data-tone="support"]{ --tone:#a78bfa; --tone-soft:rgba(167,139,250,.12); --tone-line:rgba(167,139,250,.35); }
html[data-theme="dark"] #portalHomePage .hx-card[data-tone="management"]{ --tone:#34d399; --tone-soft:rgba(52,211,153,.12); --tone-line:rgba(52,211,153,.35); }

#portalHomePage .hx-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--tone-soft);
  color:var(--tone);
  flex:0 0 auto;
}
#portalHomePage .hx-icon svg{ width:25px; height:25px; }

#portalHomePage .hx-body{ min-width:0; }
#portalHomePage .hx-body h2{
  margin:0 0 4px;
  font-size:17px;
  font-weight:800;
  line-height:1.6;
  color:var(--hx-text);
}
#portalHomePage .hx-body p{
  margin:0;
  font-size:13.5px;
  line-height:1.9;
  color:var(--hx-muted);
}
#portalHomePage .hx-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
#portalHomePage .hx-tags span{
  padding:2px 10px;
  border-radius:999px;
  background:var(--hx-chip);
  color:var(--hx-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.9;
}

/* ── enter button ── */
#portalHomePage .hx-enter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:40px;
  margin:0;
  padding:0 14px 0 16px;
  border:0;
  border-radius:12px;
  min-width:84px;
  justify-content:center;
  background:var(--tone-soft);
  color:var(--tone);
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .18s ease, color .18s ease;
}
#portalHomePage .hx-enter svg{ width:16px; height:16px; transition:transform .18s ease; }
#portalHomePage .hx-card:hover .hx-enter,
#portalHomePage .hx-enter:focus-visible{
  background:var(--tone);
  color:#fff;
}
html[data-theme="dark"] #portalHomePage .hx-card:hover .hx-enter,
html[data-theme="dark"] #portalHomePage .hx-enter:focus-visible{ color:#0b1020; }
#portalHomePage .hx-card:hover .hx-enter svg{ transform:translateX(-3px); }
#portalHomePage .hx-enter:focus-visible{ outline:2px solid var(--tone); outline-offset:3px; }

/* keyboard shortcut hint */
#portalHomePage .hx-kbd{
  position:absolute;
  top:12px;
  inset-inline-end:14px;
  min-width:22px; height:22px;
  padding:0 6px;
  display:none;
  align-items:center; justify-content:center;
  border-radius:6px;
  border:1px solid var(--hx-border);
  background:var(--hx-chip);
  color:var(--hx-faint);
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
}
@media (hover:hover) and (pointer:fine){
  #portalHomePage .hx-kbd{ display:inline-flex; }
}

/* ── no access ── */
#portalHomePage .hx-access{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border-radius:10px;
  background:var(--hx-chip);
  color:var(--hx-muted);
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}
#portalHomePage .hx-access svg{ width:14px; height:14px; }
#portalHomePage .hx-card.ph-portal-restricted{
  cursor:default;
  box-shadow:none;
}
#portalHomePage .hx-card.ph-portal-restricted:hover{
  transform:none;
  border-color:var(--hx-border);
  background:var(--hx-surface);
}
#portalHomePage .hx-card.ph-portal-restricted .hx-icon,
#portalHomePage .hx-card.ph-portal-restricted .hx-body,
#portalHomePage .hx-card.ph-portal-restricted::before{
  opacity:.45;
  filter:saturate(.2);
}
#portalHomePage .hx-card.ph-portal-restricted .hx-enter,
#portalHomePage .hx-card.ph-portal-restricted .hx-kbd{ display:none; }

/* ── phones ── */
@media (max-width:560px){
  #portalHomePage .hx-home{ padding:14px 14px 24px !important; }
  #portalHomePage .hx-hero{ margin-bottom:16px; }
  #portalHomePage .hx-card{
    grid-template-columns:auto minmax(0,1fr);
    gap:14px;
    min-height:0;
    padding:16px;
  }
  #portalHomePage .hx-card::before{ top:18px; bottom:18px; }
  #portalHomePage .hx-icon{ width:44px; height:44px; border-radius:12px; }
  #portalHomePage .hx-icon svg{ width:22px; height:22px; }
  #portalHomePage .hx-body p{ font-size:13px; }
  #portalHomePage .hx-tags{ display:none; }
  #portalHomePage .hx-foot{ grid-column:1 / -1; }
  #portalHomePage .hx-enter{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  #portalHomePage .hx-card,
  #portalHomePage .hx-enter,
  #portalHomePage .hx-enter svg{ animation:none; transition:none; }
  #portalHomePage .hx-card:hover{ transform:none; }
}