/* Dashboard chrome shared by analysis_hub and paper-wise.

   Written fresh rather than extracted: before this task the two pages' headers
   shared almost nothing — one a centred flex block, the other a sticky bar —
   and unifying them is what this task is for. */

/* One line: mark · product name │ institute name. Saves ~14px of vertical on
   every page against a stacked lockup, which the two viewer pages need.
   Below 560px the divider and the institute name hide — the lockup does not
   fit a 360px viewport, and the institute name lives on the landing page. */
header {
  display: flex;
  align-items: center;
  gap: 13px;
  /* analysis_hub's body is a centred flex column, which shrink-wrapped this
     bar to its own content and left the teal rule floating mid-screen. The
     masthead spans the viewport on every page that uses it. */
  width: 100%;
  padding: 13px 20px;
  background: var(--surface-card);
  border-bottom: 2px solid var(--primary);
  /* A long table needs its header pinned; the hub does not scroll far enough
     to care. One masthead that behaves the same everywhere beats the
     difference. */
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-container { display: flex; align-items: center; gap: 13px; }

/* The up-one-level link and the lockup travel together. Moved here from
   paper-wise's inline block now that analysis_hub carries the same
   pair — one masthead, one rule for it. */
.logo-section { display: flex; align-items: center; gap: 16px; }

.back-btn {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  min-height: var(--tap-target);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.back-btn:hover {
  border-color: var(--primary);
  color: var(--primary-text);
  transform: translateY(-1px);
}

/* The Tamizhi mark is a filled red disc, so it carries its own shape and
   ground. The old teal tile behind it would have shown as a square ring in a
   second brand colour — the box now only reserves the space. */
.logo-box {
  width: 29px; height: 29px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
}

.logo-box img { width: 29px; height: 29px; display: block; }

.logo-text { display: flex; align-items: center; gap: 13px; }
.logo-text h1, .logo-text h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.logo-text p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

.masthead-divider {
  width: 1px;
  height: 19px;
  background: var(--border-strong);
}

.theme-toggle-btn {
  margin-left: auto;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: grid; place-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
}
.theme-toggle-btn:hover { border-color: var(--border-strong); background: var(--surface-sunken); }

/* The policy documents have to be reachable from every page, not only the
   landing page — a payment gateway checks for exactly that. Both dashboards
   carry the same row above their copyright line. */
.footer-policy {
  display: flex; flex-wrap: wrap; gap: 0 16px;
  justify-content: center;
  margin-bottom: 4px;
}
.footer-policy a {
  color: var(--text-muted); text-decoration: none;
  min-height: var(--tap-target);
  display: inline-flex; align-items: center;
}
.footer-policy a:hover { color: var(--primary-text); }

@media (max-width: 560px) {
  .masthead-divider, .logo-text p { display: none; }
  .logo-text h1, .logo-text h2 { font-size: 0.94rem; }
  header { padding: 11px 14px; gap: 10px; }
}

@media (max-width: 480px) {
  main { padding: 20px 16px; }
  .stat-value { font-size: 1.19rem; }
}

/* The share band under the three path cards. Row on a desktop, stacked on a
   phone — the copy and the destinations are one thought, and splitting them
   across a wide gap makes the buttons look unattached to anything.

   .share-links and .share-link themselves come from app.css, which this page
   already loads; only the container is hub business. */
.share-card {
  /* main is a centred flex column, so a block without an explicit width
     shrink-wraps to its content and sits narrower than the cards above it. */
  width: 100%;
  margin: 28px 0 0;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

/* Set as .ref-name, because that is what it sits beside. The share card is
   the last thing on the hub, directly under the row of reference tiles — Your
   bookmarks, Syllabus map, Exams covered — and each of those leads with a
   display-face line in teal at 1.02rem. This line was body face, dark ink and
   0.95rem, which read as a paragraph that had wandered into a row of cards.
   Same three values as .ref-name, so the bottom of the page is one family. */
.share-card p {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary-text);
  max-width: 46ch;
}

/* Matches .footer-policy a beside it. */
.footer-share {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--primary-text);
  cursor: pointer;
}

.footer-share:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}