/* Hallmark · component: review-center-head · genre: operate · theme: crm · pre-emit critique: P4 H4 E4 S4 R4 V3 */
/* REVIEW CENTER — the head both review pages open under (js/review-center.js).

   Eligibility Review (#prospectReviewScreen) and Client Site Review
   (#approvalsScreen) keep their own screens and modules; each draws this same
   head first, in Prowl's grammar (css/page-prowl.css): the mark, a hairline,
   and the two pages as the CRM's pills (.crm-tab — css/page-crm.css grants
   .rc-head the board's tokens, light and dark). The head's row is the bell's
   band and it stops short of the bell's corner (css/design-system.css, THE
   BELL'S LINE). It stays at the top while the page under it scrolls, the way
   Prowl's head does. Tokens only; nothing here moves. */

.rc-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  box-sizing: border-box;
  min-height: calc(var(--bell-top) + var(--bell-size) + 14px);
  padding: var(--bell-top) var(--bell-clear) 14px 24px;
  background: var(--crm-paper);
  border-bottom: 1px solid var(--crm-rule);
  font-family: var(--font-sans);
}
.rc-mark {
  flex: none; white-space: nowrap;
  font-family: var(--font-serif); font-size: 18px; font-weight: 600;
  line-height: 1; letter-spacing: -0.01em; color: var(--crm-head);
}
.rc-hair { flex: none; width: 1px; height: 22px; background: var(--crm-rule-firm); }
.rc-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* The CRM's pill (.crm-tab), drawn as a link to the page's address. */
.rc-tab {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box; padding: 0 11px;
  line-height: 1; white-space: nowrap; text-decoration: none;
}
.rc-tab[hidden] { display: none; }
/* The page you are on keeps its gold on hover (the CRM's hover would grey it). */
.rc-tab.crm-tab-active:hover { background: var(--crm-gold-faint); color: var(--crm-head); }
.rc-head .rc-tab:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; box-shadow: none; }

/* Tablets: the rail is 64px and the head keeps one row; a little less room
   on the left, as Prowl's. */
@media (min-width: 641px) and (max-width: 1080px) {
  .rc-head { padding-left: 20px; }
}

/* Phones: the shell's top bar carries the bell, so the head needs no room
   for it. The two pages share the row as two halves at a thumb's height
   (40px drawn, 44px to touch); the mark gives up its place to them — the nav
   still says "Review Center" to a screen reader, and each page's own title
   follows under it. */
@media (max-width: 640px) {
  .rc-head { min-height: 0; padding: 8px 12px; gap: 0; }
  .rc-mark, .rc-hair { display: none; }
  .rc-tabs { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  .rc-tab { position: relative; height: 40px; padding: 0 8px; font-size: 14px; }
  .rc-tab::after { content: ""; position: absolute; inset: -2px 0; }
}