/* =====================================================================
   PIA Industries Shell - shared cross-domain "Workspace" chrome
   Loaded on every authenticated page across:
     piaindustries.com (hub), alphaattribute.com, hathornblock.com,
     opportunityislandfalls.com.
   Uses CSS custom properties from each site's styles.css when present,
   falls back to inline tokens so it can render on a bare page.
   ===================================================================== */

:root {
  --piai-shell-h: 56px;
  --piai-shell-bg: #0d1f33;
  --piai-shell-bg-2: #142840;
  --piai-shell-line: rgba(255,255,255,0.08);
  --piai-shell-text: #e8edf6;
  --piai-shell-muted: #9aa6bd;
  --piai-shell-gold: #c9a962;
  --piai-shell-gold-2: #dbc78a;
  --piai-shell-accent: #c47d5f;
  --piai-shell-radius: 12px;
  --piai-shell-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --piai-shell-z: 1000;
}

.piai-shell {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--piai-shell-h);
  z-index: var(--piai-shell-z);
  background: var(--piai-shell-bg);
  color: var(--piai-shell-text);
  border-bottom: 1px solid var(--piai-shell-line);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  display: none; /* hidden until session-me confirms auth */
}

.piai-shell.is-ready { display: block; }

.piai-shell__inner {
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Brand mark */
.piai-shell__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--piai-shell-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.piai-shell__brand img {
  width: 28px;
  height: 28px;
  display: block;
}
.piai-shell__brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--piai-shell-gold), var(--piai-shell-accent));
  color: #0d1f33;
  font-weight: 700;
  font-size: 13px;
}
.piai-shell__product {
  font-size: 14px;
  color: var(--piai-shell-muted);
}
.piai-shell__product strong { color: var(--piai-shell-text); font-weight: 600; }

.piai-shell__spacer { flex: 1 1 auto; }

/* Buttons */
.piai-shell__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--piai-shell-text);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  position: relative;
}
.piai-shell__btn:hover,
.piai-shell__btn:focus-visible {
  background: rgba(255,255,255,0.06);
  border-color: var(--piai-shell-line);
  outline: none;
}
.piai-shell__btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.08);
  border-color: var(--piai-shell-line);
}

.piai-shell__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2d5a8a, #1a3a5c);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  user-select: none;
}

/* Launcher icon (9 dots) */
.piai-shell__dots {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 3px;
}
.piai-shell__dots span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  display: block;
}

/* Popovers */
.piai-shell__pop {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--piai-shell-bg-2);
  border: 1px solid var(--piai-shell-line);
  border-radius: var(--piai-shell-radius);
  box-shadow: var(--piai-shell-shadow);
  min-width: 280px;
  padding: 8px;
  display: none;
  z-index: calc(var(--piai-shell-z) + 1);
}
.piai-shell__pop.is-open { display: block; }
.piai-shell__pop[data-anchor="right"] { right: 0; }
.piai-shell__pop[data-anchor="launcher"] { right: 56px; }

.piai-shell__pop-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--piai-shell-muted);
  padding: 8px 12px 4px;
}

.piai-shell__pop-divider {
  height: 1px;
  background: var(--piai-shell-line);
  margin: 6px 0;
}

.piai-shell__pop-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--piai-shell-text);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.piai-shell__pop-item:hover { background: rgba(255,255,255,0.07); }
.piai-shell__pop-item small {
  display: block;
  font-size: 12px;
  color: var(--piai-shell-muted);
  margin-top: 2px;
}
.piai-shell__pop-item-leader {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.piai-shell__pop-item-body { flex: 1 1 auto; min-width: 0; }
.piai-shell__pop-item-body > strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* App launcher grid */
.piai-shell__pop[data-anchor="launcher"] { width: 320px; }
.piai-shell__apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
}
.piai-shell__app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--piai-shell-text);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
}
.piai-shell__app-tile:hover { background: rgba(255,255,255,0.07); }
.piai-shell__app-tile span.piai-shell__app-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--piai-shell-gold), var(--piai-shell-accent));
  color: #0d1f33;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  overflow: visible;
}

/* Pine-tree silhouette icon, painted with the per-tile --piai-tile-tree
   color (default dark navy) via mask-image of the canonical PIAI logo. */
.piai-shell__app-icon.piai-shell__app-icon--tree::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: var(--piai-tile-tree, #0d1f33);
  -webkit-mask: url(/icons/piai_pinetree_logo_icon.png) center/contain no-repeat;
          mask: url(/icons/piai_pinetree_logo_icon.png) center/contain no-repeat;
  pointer-events: none;
}

/* Small badge in the lower-right corner that carries the function mark
   (map pin, dollar, target rings, etc.) so each tile is recognizable
   without leaving the pine-tree family. */
.piai-shell__app-icon-mark {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0d1f33;
  color: var(--piai-shell-gold, #c9a962);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1.5px var(--piai-shell-gold, #c9a962);
  pointer-events: none;
}
.piai-shell__app-icon-mark svg { width: 10px; height: 10px; display: block; }
.piai-shell__app-tile small {
  font-size: 11px;
  color: var(--piai-shell-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Account dropdown */
.piai-shell__pop[data-anchor="right"] { width: 280px; }
.piai-shell__user-card {
  padding: 14px 14px 12px;
}
.piai-shell__user-card .piai-shell__user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2d5a8a, #1a3a5c);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 600;
  margin: 0 auto 10px;
}
.piai-shell__user-card .piai-shell__user-name {
  font-weight: 600;
  text-align: center;
}
.piai-shell__user-card .piai-shell__user-email {
  font-size: 12px;
  color: var(--piai-shell-muted);
  text-align: center;
  word-break: break-all;
}
.piai-shell__user-card .piai-shell__user-role {
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--piai-shell-gold);
}

/* "Welcome back" rail (used on the hub home page) */
.piai-welcome {
  background: linear-gradient(135deg, #0d1f33, #1a3a5c);
  color: #fff;
  padding: 24px 0;
  display: none;
}
.piai-welcome.is-ready { display: block; }
.piai-welcome__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.piai-welcome__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  margin: 0;
}
.piai-welcome__sub {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  margin: 4px 0 0;
}
.piai-welcome__cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--piai-shell-gold), var(--piai-shell-accent));
  color: #0d1f33;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.piai-welcome__cta + .piai-welcome__cta {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}

/* App launcher panel on hub home (full-width grid below welcome) */
.piai-apps-section {
  padding: 32px 0 8px;
  display: none;
}
.piai-apps-section.is-ready { display: block; }
.piai-apps-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.piai-apps-section__heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--color-navy, #0d1f33);
}
.piai-apps-section__sub {
  color: var(--color-slate, #5a6b7d);
  margin: 0 0 18px;
  font-size: 14px;
}
.piai-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.piai-app-card {
  display: block;
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  color: var(--color-navy, #0d1f33);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  position: relative;
  overflow: hidden;
}
.piai-app-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(13, 31, 51, 0.10);
  border-color: var(--color-gold, #c9a962);
}
.piai-app-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-gold, #c9a962), var(--color-copper, #c47d5f));
  color: #0d1f33;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
  position: relative;
  overflow: visible;
}
.piai-app-card__icon.piai-app-card__icon--tree::before {
  content: "";
  position: absolute;
  inset: 6px;
  background-color: var(--piai-tile-tree, #0d1f33);
  -webkit-mask: url(/icons/piai_pinetree_logo_icon.png) center/contain no-repeat;
          mask: url(/icons/piai_pinetree_logo_icon.png) center/contain no-repeat;
  pointer-events: none;
}
.piai-app-card__icon .piai-shell__app-icon-mark {
  width: 18px; height: 18px;
}
.piai-app-card__icon .piai-shell__app-icon-mark svg { width: 11px; height: 11px; }
.piai-app-card__name {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 4px;
}
.piai-app-card__desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-slate, #5a6b7d);
  line-height: 1.5;
}

/* Mobile */
@media (max-width: 720px) {
  .piai-shell__product { display: none; }
  .piai-shell__pop[data-anchor="launcher"] { right: 12px; min-width: 280px; }
  .piai-shell__pop[data-anchor="right"] { right: 12px; }
}

/* When the shell is actually rendered (piai-shell.js adds .has-piai-shell
   to <html>), shift any fixed top-corner icons below the 56px sticky bar
   so they stop overlapping the shell. !important wins over per-page
   `top: 20px` rules sprinkled across the TIF dashboards / calculators /
   landing pages without us needing to chase down every inline <style>.
   The inline_offset (8/12px) preserves a small gap below the shell. */
.has-piai-shell .theme-toggle,
.has-piai-shell .user-profile-container,
.has-piai-shell .tnav-profile-container,
.has-piai-shell .top-nav-profile,
.has-piai-shell .top-nav-controls,
.has-piai-shell .top-bar-profile {
  top: calc(var(--piai-shell-h, 56px) + 12px) !important;
}

/* Inline-launcher mode: when piai-shell.js is configured to drop just the
   9-dot launcher into a host page's existing nav (set
   window.PIAI_SHELL_INLINE_LAUNCHER), the launcher wrap gets the class
   .piai-shell-inline-launcher. Tighten the button so it sits comfortably
   beside compact nav controls (e.g. the GIS toolbar's user-profile chip). */
.piai-shell-inline-launcher { display: inline-flex; align-items: center; }
.piai-shell-inline-launcher .piai-shell__btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #e8edf6;
}
.piai-shell-inline-launcher .piai-shell__pop[data-anchor="launcher"] {
  /* Switch to position: fixed so the host toolbar's overflow:hidden
     doesn't clip the popup. piai-shell.js updates top/right inline on
     each open to anchor the popup under the launcher button; these
     fallbacks just keep it visible if the JS hasn't run yet. */
  position: fixed !important;
  top: 56px;
  right: 12px;
  z-index: 2000;
}