/* ============================================================
   tglportal.com hub + the Admin Portal "no access" screen.

   Loaded only on those two screens (see index.php). Reuses app.css
   tokens (--bg, --text, --accent, ...) so both follow the portal
   palette without duplicating any of it.
   ============================================================ */

/* Scale tokens, scoped to these two screens so app.css is untouched.
   Four radius steps and three shadow steps replace values chosen one at a time.
   The warm ground is what separates a spa from a clinic: app.css sits on
   near-white (#fdfbfb), which reads clinical next to the cream the rest of the
   aesthetics trade uses. The rose accent stays — it is the clinic's own. */
body.hub-screen,
body.socmed-denied-screen {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  --sh-1: 0 1px 2px rgba(36, 26, 23, 0.06);
  --sh-2: 0 4px 12px rgba(36, 26, 23, 0.07);
  --sh-3: 0 12px 32px rgba(36, 26, 23, 0.10);

  --hub-ground: #faf7f2;
  --hub-line: #e6ddd4;
  --hub-ink: #241a17;
  --hub-muted: #7d6f68;

  background: var(--hub-ground);
}

/* ---------- Hub: split panel shell ----------
   Full-bleed to the viewport — the brand photo and the workspace list each
   own a full-height half of the screen, not a centered card floating on
   empty ground.

   app.css's .app-main caps at width:min(100%,1800px) with 22px/28px/54px
   padding and auto side-margins for every ordinary portal page — this is
   the one screen that must ignore that cap entirely, the same way
   body.portal-app already does for the signed-in app shell. Without this,
   the hub sits in a padded, centered column instead of filling the
   viewport, and the split card itself loses its intended "fill two full
   viewport-height panels" sizing. */
body.hub-screen .app-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* app.css's .app-main::before paints a fixed decorative circle near the top
   right on every ordinary portal page. app.css already hides it for
   landing/auth screens for the same reason (see its own comment); hub-screen
   is handled here instead, in this Hub-only stylesheet, so that core,
   portal-wide file doesn't need editing for a Hub-only concern. */
body.hub-screen .app-main::before {
  display: none;
}

.hub-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.hub-split {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-wrap: wrap;
}

/* ---------- Left: brand panel with photo backdrop ----------
   Matches the "B — Split Panel" design mockup exactly (colors, spacing,
   fonts, the drift animation on the photo). */
.hub-brand {
  flex: 1 1 420px;
  min-width: 320px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 72px 64px;
  box-sizing: border-box;
  color: #f5ede4;
  background: #1a1512;
}

/* Team-photo layer, placeholder for the eventual loop video. To swap in a
   real clip later: replace .hub-brand-media-bg's background-image with a
   <video autoplay muted loop playsinline> covering the same area — the
   overlay/grain layers stay exactly as they are on top. */
.hub-brand-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hub-brand-media-bg {
  position: absolute;
  inset: -4%;
  background-image: url('/assets/images/hub-team.jpg');
  background-size: cover;
  background-position: center 8%;
  background-repeat: no-repeat;
  animation: hubBrandDrift 22s ease-in-out infinite alternate;
}

@keyframes hubBrandDrift {
  0% { transform: scale(1.02) translate(0, 0); }
  50% { transform: scale(1.05) translate(-1%, 0.5%); }
  100% { transform: scale(1.02) translate(0.5%, -0.3%); }
}

.hub-brand-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 13, 10, 0.62) 0%, rgba(16, 13, 10, 0.84) 60%, rgba(16, 13, 10, 0.94) 100%);
}

.hub-brand-media-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1.4px);
  background-size: 3px 3px;
}

.hub-brand-content {
  position: relative;
  z-index: 1;
}

.hub-brand .hub-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #f5ede4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.hub-brand .hub-logo img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
}

.hub-brand .hub-logo .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.18);
  color: #f5ede4;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.hub-brand .hub-wordmark {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 1.15;
  max-width: 360px;
  color: #f5ede4;
}

.hub-brand .hub-tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  color: #c7b6a6;
}

/* ---------- Right: workspace list panel ---------- */
.hub-panel {
  flex: 1 1 420px;
  min-width: 320px;
  background: #faf6f1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 64px;
  box-sizing: border-box;
}

.hub-panel-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a68f7c;
  font-weight: 600;
  margin-bottom: 22px;
}

.hub-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hub-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid #ece1d6;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.hub-row:hover,
.hub-row:focus-visible {
  border-color: #c9866e;
  box-shadow: 0 14px 30px rgba(60, 40, 25, 0.10);
  transform: translateX(3px);
}

.hub-row:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.hub-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f3e8dc;
  color: #a8673f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hub-row-icon svg {
  width: 22px;
  height: 22px;
}

.hub-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hub-row-tag {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b08968;
  font-weight: 700;
  margin-bottom: 2px;
}

.hub-row-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: #231d19;
  line-height: 1.25;
}

.hub-row-desc {
  font-size: 12.5px;
  color: #766553;
  line-height: 1.5;
  margin-top: 2px;
}

.hub-row-arrow {
  color: #a8673f;
  flex-shrink: 0;
  display: flex;
}

/* One quiet line under the list. Somebody who picked the wrong tool and came
   back here should find out why, rather than guess. */
.hub-foot {
  margin: 28px 0 0;
  color: #a3927f;
  font-size: 12px;
  line-height: 1.6;
  max-width: 48ch;
}

.hub-copyright {
  margin: 10px 0 0;
  color: #c3b7a9;
  font-size: 11px;
}

@media (max-width: 720px) {
  .hub-brand,
  .hub-panel {
    padding: 48px 28px;
  }
}

/* ---------- Admin Portal: no access ---------- */
.socmed-denied-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    var(--hub-ground);
}

.socmed-denied-card {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 40px 30px 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hub-line);
  background: var(--panel-strong);
  box-shadow: var(--sh-3);
}

.socmed-denied-logo img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.socmed-denied-logo .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.socmed-denied-title {
  margin: 2px 0 0;
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--hub-ink);
  line-height: 1.3;
  text-wrap: balance;
}

.socmed-denied-body {
  margin: 0;
  color: var(--hub-muted);
  font-size: 0.93rem;
  line-height: 1.6;
  max-width: 38ch;
}

.socmed-denied-who {
  margin: 0;
  font-size: 0.82rem;
  color: var(--hub-muted);
}

.socmed-denied-who strong {
  color: var(--hub-ink);
  font-weight: 600;
}

.socmed-denied-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.socmed-denied-primary,
.socmed-denied-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.socmed-denied-primary {
  background: var(--accent-strong);
  border: 1px solid var(--accent-strong);
  color: #fff;
}

.socmed-denied-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.socmed-denied-secondary {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--hub-muted);
}

.socmed-denied-secondary:hover:not(:disabled) {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.socmed-denied-secondary:disabled {
  opacity: 0.55;
  cursor: default;
}

.socmed-denied-primary:focus-visible,
.socmed-denied-secondary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hub-row,
  .hub-brand-media-bg,
  .socmed-denied-primary,
  .socmed-denied-secondary {
    transition: none;
    animation: none;
  }
  .hub-row:hover,
  .hub-row:focus-visible {
    transform: none;
  }
}

/* app.css (Phase 520/523) reserves space above every page on touch devices
   (iPad/phone, <=1180px) for the portal's fixed topbar. The Hub has no
   topbar, so that space showed as an empty pink band above the photo. The
   doubled class lifts specificity over app.css's own !important rules,
   including its announcement-banner :has() variant. */
html body.hub-screen.hub-screen:not(.auth-screen) .app-main {
  padding-top: 0 !important;
}