/* Shared site header — one header, three apps.
 *
 * Styles for the header that /shared/site-header.js draws (or, on the device
 * explorer's index.html, wires): logo, nav row, dropdown groups, help and
 * feedback icons, and the narrow-screen hamburger. Served at a stable URL for
 * the same reason as /shared/auth.css: Warning Letters and Recalls load it by
 * URL from the shared host, so there is exactly one copy. Load it AFTER the
 * page's own stylesheet.
 *
 * Uses the design tokens all three apps' stylesheets define identically on
 * :root (--accent, --text, --text-dim, --border, --bg-raised, --font-body,
 * --font-display, --app-header-h). A token rename is a three-app change.
 */

/* ── Header ── */
.header {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: var(--app-header-h);
  min-height: var(--app-header-h);
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header-brand svg { flex-shrink: 0; }
.header h1 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}
.header h1 span { color: var(--accent); font-weight: 700; }
.header nav { display: flex; gap: 20px; margin-left: auto; align-items: center; flex-shrink: 0; }
.header nav a {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: all 0.2s;
}
.header nav a:hover { color: var(--text); border-bottom-color: #E85036; text-decoration: none; }
.header nav #authSignInBtn {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  text-transform: none;
  letter-spacing: normal;
  border-bottom: none;
}
.header nav #authSignInBtn:hover { color: var(--accent); text-decoration: underline; border-bottom: none; }

/* ── Tab Bar (inside header) ── */
.right-tabs {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Header dropdowns: Analyze, Regulations, Warning Letters ──
   The row used to scroll sideways, which hid tabs on a laptop screen and
   would clip these menus; grouping makes it fit above 1200px, and below
   that the hamburger menu takes over and draws the groups expanded. */
.nav-group { position: relative; display: inline-flex; }
.nav-group[hidden] { display: none; }
.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.nav-group-btn:hover, .nav-group.open > .nav-group-btn { color: var(--text); }
.nav-group:has(.tab-btn.active) > .nav-group-btn,
.nav-group:has(.nav-group-menu > a.active) > .nav-group-btn {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-group-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  padding: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
}
.nav-group.open > .nav-group-menu { display: block; }
/* Invisible bridge over the 8px gap, so moving the pointer from the
   button down into a hover-opened menu never leaves the group. */
.nav-group-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-menu-right { left: auto; right: 0; }
.nav-group-menu > button,
.nav-group-menu > a {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 4px;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav-group-menu > [hidden] { display: none; }
.nav-group-menu > button:hover,
.nav-group-menu > a:hover { background: rgba(0,0,0,0.04); }
.nav-group-menu > .tab-btn.active,
.nav-group-menu > a.active {
  color: var(--accent);
  border-bottom: none;
  border-left-color: var(--accent);
  background: rgba(210,84,54,0.08);
}
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  background: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  border: none;
  border-radius: 50%;
}
.nav-icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--accent); }
a.nav-icon-btn { text-decoration: none; }
/* Tutorial (?) and feedback icons sit side by side at the same size. */
.nav-help { width: 30px; height: 30px; margin-left: 4px; }
/* Plain links in the tab row (e.g. /guidance): styled like a tab, but not
   a .tab-btn, so tab-manager.js does not treat them as in-app tabs. */
.right-tabs .tab-link {
  padding: 4px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  line-height: normal; /* match the <button> tabs, or the link sits higher */
}
.right-tabs .tab-link:hover { color: var(--accent); }
.right-tabs .tab-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-btn {
  padding: 4px 14px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  margin-left: auto;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
}
.tab-menu-btn:hover { background: rgba(0,0,0,0.05); }

/* Phones: logo, hamburger, help, feedback and the account button have
   to fit in ~375px, so tighten the gutters and the logo. The logo's
   height is set inline in every page's header, hence !important. */
@media (max-width: 480px) {
  .header { padding: 0 12px; gap: 12px; }
  .header-brand img { height: 26px !important; }
}

/* Six nav items plus the explorer's icons, credits badge and account need
   ~1,200px; narrower screens fall back to the hamburger menu (measured on
   staging at 1024px, where the inline row overflowed into the icons).
   site-header.js's hover query (min-width: 1201px) must match. */
@media (max-width: 1200px) {
  .tab-menu-btn { display: inline-flex; }
  .right-tabs {
    display: none;
    position: absolute;
    top: 52px;
    right: 8px;
    min-width: 200px;
    flex-direction: column;
    align-items: stretch;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 49;
  }
  .right-tabs.open { display: flex; }
  .right-tabs .tab-btn {
    text-align: left;
    padding: 10px 14px;
    border-bottom: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
  }
  .right-tabs .tab-btn:hover { background: rgba(0,0,0,0.04); }
  .right-tabs .tab-btn.active {
    border-bottom: none;
    border-left-color: var(--accent);
    background: rgba(210,84,54,0.08);
  }
  /* Inside the hamburger menu, groups are drawn expanded: the group
     button becomes a small section label above its items. */
  .right-tabs .nav-group { display: block; }
  .right-tabs .nav-group[hidden] { display: none; }
  .right-tabs .nav-group-btn {
    padding: 10px 14px 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: none;
    pointer-events: none;
  }
  .right-tabs .nav-group-btn .nav-caret { display: none; }
  .right-tabs .nav-group-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
  }
  .right-tabs .tab-link { padding: 10px 14px; }
  /* When hamburger takes margin-left:auto, nav no longer needs it */
  .header nav { margin-left: 0; }
}

/* ── Feedback header button ──
   Lives in the persistent app header rather than floating over page
   content: a fixed-position corner button looked fine on the search tab
   but sat directly on top of the PDF Viewer's chat "Send" button (and any
   other tab that docks its own controls to a screen corner). The header
   is common chrome across every tab, so this can never collide with a
   tab's own layout. Always visible on its own (not inside a menu):
   reporting problems is a critical path. */
.feedback-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.feedback-header-btn:hover { background: rgba(0,0,0,0.05); color: var(--accent); }