/* Upgrade 3: tools hub + shared upgrade-3 chrome (account button, auth mode, nav) */
.tl-head { text-align: center; margin: 8px auto 18px; max-width: 640px; }
.tl-title { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 6px; }
.tl-sub { margin: 0 auto; }
.tl-group { margin: 22px 0 6px; }
.tl-gh { font-size: 14px; font-weight: 500; color: var(--ink-3); margin: 0 4px 10px; letter-spacing: .02em; }
.tl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tl-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 16px; min-height: 148px; color: var(--ink); text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, background .25s ease; overflow: hidden; }
.tl-tile:hover, .tl-tile:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tl-tile:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.tl-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); color: var(--mint); }
.tl-tile[data-tile=zakat] .tl-ic, .tl-tile[data-tile=products] .tl-ic, .tl-tile[data-tile=making] .tl-ic { color: var(--gold);
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--gold) 34%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.tl-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl-t { font-weight: 600; font-size: 15px; }
.tl-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.tl-live { margin-top: auto; font-size: 12px; color: var(--mint); min-height: 1em; }
@media (max-width: 1000px) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .tl-tile { padding: 14px 12px; min-height: 136px; } .tl-d { font-size: 12px; } }

/* account button in the top bar */
.acct-btn { display: inline-flex; align-items: center; gap: 6px; }
.acct-btn .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: linear-gradient(135deg, var(--gold), #B8893B); color: #1a1406; }
.acct-btn[data-guest] .av { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.acct-btn[data-guest] .av svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 520px) { .acct-btn .lbl { display: none; } }

/* full-screen auth pages: no app chrome */
body.auth-mode .topbar, body.auth-mode .tabbar, body.auth-mode .fab, body.auth-mode .demo-banner, body.auth-mode .foot,
body.auth-mode .globe-layer, body.auth-mode .assistant { display: none !important; }
body.auth-mode .layout { padding-top: 0; }

/* the desktop pill nav has seven links now, plus the account button: between the tablet and the
   wide-laptop widths the nav gets its own second row, so nothing scrolls sideways or is cut off */
/* The docked assistant (desktop) is a sticky panel under the sticky top bar (styles.css: top 72px,
   one viewport tall). landing.css gives every .glow-top frame position: relative, which undid
   that: the open panel scrolled away with the page and sat 72 px below the content column.
   The phone keeps its own layout (max-width: 900px in styles.css). */
@media (min-width: 901px) { .brand { white-space: nowrap; } .assistant.glow-top { position: sticky; } }
@media (min-width: 901px) and (max-width: 1240px) {
  .topbar { grid-template-columns: auto 1fr; row-gap: 8px; }
  .pillnav { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .assistant { top: 124px; height: calc(100vh - 144px); } /* sticks under the two-row bar */
}
@media (prefers-reduced-motion: reduce) { .tl-tile { transition: none; } .tl-tile:hover { transform: none; } }

/* phone widths: keep the top bar inside the screen (status text hides, the coloured dot stays) */
@media (max-width: 440px) {
  .topbar { gap: 6px; }
  .top-actions { gap: 4px; min-width: 0; }
  .top-actions .status-pill b { display: none; }
  .top-actions .btn.sm { padding-inline: 8px; }
}