/* ============================================================
   Bodylogic Hub — shared stylesheet (single source of truth)
   Palette + the shared shell (nav, green bar, bottom nav, account
   menu) + common components. Change the brand HERE, everywhere
   updates. Linked by every Hub page.
   ============================================================ */
:root{
  /* surfaces & text */
  --bg:#f4f6f8; --card:#ffffff;
  --ink:#14181f; --ink2:#39424c; --muted:#69737e;
  --line:#d7dde4; --radius:12px;

  /* brand */
  --green:#2BA882; --green-dk:#1c8163; --green-soft:#e4f5ef;
  --maroon:#6a1f38; --maroon-dk:#511328;
  --gold:#e3982d;

  /* aliases so pages with their own var names resolve to the brand */
  --green-d:#1c8163;   /* Notebook used --green-d */
  --mut:#69737e;       /* Notebook used --mut */
  --open:#2BA882;      /* Notebook "open loop" accent */
  --done:#9ca3af;      /* Notebook "handled" grey */
}

/* ---------- shared shell: nav + green bar + bottom nav ---------- */
.hub-top{position:sticky;top:0;z-index:20;}

.hub-nav{background:#fff;border-bottom:1px solid var(--line);}
.hub-nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:9px 22px;line-height:1.25;}
.hub-logo{display:flex;flex:none;}
.hub-logo img{height:30px;width:auto;display:block;}

.hub-links{display:none;gap:2px;flex-wrap:wrap;margin-left:6px;}
.hub-links a{text-decoration:none;padding:7px 13px;border-radius:8px;font-size:.88rem;font-weight:700;white-space:nowrap;color:var(--ink2);transition:background .12s,color .12s;}
.hub-links a:hover{background:var(--green-soft);color:var(--green-dk);}
.hub-links a.active{background:var(--green);color:#fff;}
.hub-links a.admin{color:var(--maroon);}
.hub-links a.admin:hover{background:#f7e8ee;color:var(--maroon-dk);}
.hub-links a.admin.active{background:var(--maroon);color:#fff;}

.hub-account{margin-left:auto;position:relative;flex:none;}
.hub-avatar{width:32px;height:32px;border-radius:9px;background:var(--maroon);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;}
.hub-avatar:active{transform:scale(.94);}
.hub-menu{position:absolute;right:0;top:42px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(20,24,31,.16);min-width:184px;padding:6px;display:none;}
.hub-menu.open{display:block;animation:hub-pop .12s ease-out;}
@keyframes hub-pop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.hub-menu .who{padding:8px 12px 9px;border-bottom:1px solid var(--line);margin-bottom:5px;}
.hub-menu .who b{display:block;font-size:.92rem;color:var(--ink);}
.hub-menu .who small{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;}
.hub-menu a{display:block;text-decoration:none;color:var(--ink2);font-weight:700;font-size:.88rem;padding:9px 12px;border-radius:8px;}
.hub-menu a:hover{background:var(--bg);}
.hub-menu a.signout{color:var(--maroon);}

.hub-greenbar{background:var(--green);color:#fff;}
.hub-greenbar-inner{max-width:1180px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;gap:8px;font-size:.9rem;min-height:20px;line-height:1.25;}
.hub-greenbar-inner.center{justify-content:center;text-align:center;}
.hub-ptitle{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:.01em;line-height:1.25;}
/* home greeting bits ride the same green bar */
.hub-greenbar .greet{font-weight:800;}
.hub-greenbar .sep{opacity:.5;}
.hub-greenbar .date{opacity:.92;font-weight:600;}
.hub-greenbar .ticker{margin-left:auto;font-weight:600;opacity:.96;transition:opacity .25s;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:46%;}

.hub-botnav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding:7px 4px calc(7px + env(safe-area-inset-bottom));z-index:21;}
.hub-botnav a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:.68rem;padding:2px 0;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:700;}
.hub-botnav a .ic{font-size:1.2rem;line-height:1;}
.hub-botnav a.active{color:var(--green);}

@media(min-width:980px){
  .hub-links{display:flex;}
  .hub-botnav{display:none;}
}
/* phones: declutter the Home greeting bar — greeting only */
@media(max-width:979px){
  .hub-greenbar .sep,
  .hub-greenbar .date,
  .hub-greenbar .ticker{display:none;}
  .hub-greenbar .greet{font-size:1.02rem;}
}

/* ---------- shared components (for new/stub pages) ---------- */
.hub-page{max-width:760px;margin:0 auto;padding:18px 18px 120px;}
.hub-sec{display:flex;align-items:center;gap:9px;margin:22px 2px 11px;}
.hub-sec h2{font-size:.85rem;font-weight:800;margin:0;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);}
.hub-sec .bar{width:4px;height:15px;border-radius:2px;background:var(--green);}
.hub-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.hub-btn{display:block;width:100%;background:var(--green);color:#fff;border:none;border-radius:var(--radius);padding:15px;font-size:1.02rem;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;}
.hub-btn:hover{background:var(--green-dk);}
.hub-empty{padding:22px 18px;color:var(--muted);font-weight:600;text-align:center;}

/* launcher tiles (Home + stub pages) */
.hub-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;}
.hub-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 8px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.8rem;text-align:center;line-height:1.15;transition:transform .08s,border-color .15s;}
.hub-tile:hover{border-color:var(--green);}
.hub-tile:active{transform:scale(.96);}
.hub-tile .ti{font-size:1.5rem;line-height:1;}
.hub-tile.admin{border-color:#e7cdd6;}
.hub-tile.admin:hover{border-color:var(--maroon);}
.hub-tile.soon{opacity:.62;}

/* ---------- fun pass: tactile feel site-wide ---------- */
.hub-btn{transition:background .14s,transform .12s cubic-bezier(.2,1.4,.3,1);}
.hub-btn:active{transform:scale(.96);}
.hub-botnav a{transition:transform .12s ease,color .12s ease;}
.hub-botnav a:active{transform:scale(.9);}
/* logo is the Home button — make that obvious on hover */
.hub-logo{transition:opacity .14s ease,transform .12s ease;}
.hub-logo:hover{opacity:.66;}
.hub-logo:active{transform:scale(.93);}

/* account corner: first name beside the colored initials (2026-06-16) */
.hub-account{display:flex;align-items:center;gap:8px;}
.hub-trigger{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:0;}
.hub-trigger .hub-name{font-weight:700;font-size:.9rem;color:var(--ink2);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;}
.hub-trigger:active{transform:scale(.97);}

/* pin account to the right edge of the top bar */
.hub-nav{position:relative;}
.hub-account{position:absolute;right:24px;top:50%;transform:translateY(-50%);margin-left:0;}