/* ══════════════════════════════════════════════════════════════════
   555 AUDITOR PORTAL — shared FC-style top ribbon
   ══════════════════════════════════════════════════════════════════
   Thin white bar laid out as three columns: round back-arrow on the
   left, the "555 / AUDITOR PORTAL" wordmark centred, and the welcome
   text + language + sign-out pills on the right.

   Every value here is the FC portal's bar (Barcode_Counter's TopNav in
   its `book` layout), read off it and written out longhand: the same
   padding, the same slate palette, the same type sizes and tracking,
   the same Outfit. The two portals are meant to be indistinguishable
   apart from the caption, so anything changed on one belongs on the
   other in the same pass.

   The wordmark used to sit immediately after the back arrow, which
   read as a left-aligned logo rather than the name of the surface.
   A grid of 1fr auto 1fr centres it against the bar itself: the two
   side columns claim equal width, so the middle one lands on the true
   centre no matter that the pills are wider than the back arrow. When
   the bar is too narrow for that the side columns fall back to their
   own content width and the wordmark drifts off centre rather than
   overlapping anything — the one failure mode worth designing for.

   Loaded by audit_admin.html, audit_home.html and audit_nursery_select
   .html so the three surfaces read as one system. Deliberately does
   NOT use the older .header-* class names — those still exist on the
   pages as dead selectors so nothing else that touched them breaks,
   and can be trimmed on a later pass.
   ══════════════════════════════════════════════════════════════════ */

.fcr{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:8px;
  padding:10px 24px;
  background:#fff;
  border-bottom:1px solid #e2e8f0;
  /* Outfit, because that is what the FC bar is set in — DM Sans here made
     the same sizes read a shade wider and the two bars stopped matching. */
  font-family:'Outfit','DM Sans',system-ui,-apple-system,sans-serif;
  position:sticky;top:0;z-index:60;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05);
}

/* Round back-arrow. Was a plain-text "Main Page" pill on the old
   ribbon; here it takes the role and is the whole way back to the
   portal, so it needs to be an obvious tap target — 36px keeps a
   thumb happy without dominating the bar. */
.fcr-back{
  justify-self:start;
  width:36px;height:36px;
  border-radius:50%;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:#64748b;
  flex-shrink:0;
  transition:background .15s,border-color .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  font-family:inherit;
  padding:0;
}
.fcr-back:hover{background:#d1fae5;color:#047857}
.fcr-back:active{transform:scale(.96)}
.fcr-back svg{
  width:16px;height:16px;
  stroke:currentColor;fill:none;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}

/* Wordmark, three lines, in the FC portal's order: the 555 leads, the
   company name sits under it, and the green caption at the foot says
   which surface this is.

   It used to run the other way, with a small "MJM Nursery" above the
   555 — which read as a company page that happened to be branded 555,
   rather than as 555's auditor portal. The FC portal had already
   settled the question; this follows it, so the two read as one family
   of surfaces rather than two designs that share a number.

   The 555 is a heavy italic: it is a logotype here, not a heading, and
   the slant is the whole of its character. Outfit ships no italic, so
   the slant is the browser's own oblique — which is exactly what the FC
   bar renders, and the point here is to match it. */
.fcr-brand{min-width:0;justify-self:center;text-align:center;line-height:1}
.fcr-brand-name{
  font-size:34px;font-weight:900;font-style:italic;
  color:#065f46;letter-spacing:-.85px;line-height:1;
}
.fcr-brand-org{
  font-size:13px;font-weight:900;color:#1e293b;
  text-transform:uppercase;letter-spacing:1.82px;line-height:1;
  margin-top:4px;white-space:nowrap;
}
.fcr-brand-sub{
  font-size:10px;font-weight:900;color:#059669;
  text-transform:uppercase;letter-spacing:2.5px;line-height:1;margin-top:4px;
  white-space:nowrap;
}

/* The right-hand cluster is one grid cell, pushed to the far end and
   laid out as its own flex row. .fcr-spacer is no longer needed to do
   the pushing — the rule stays only so a page that still carries the
   old empty div does not gain a stray grid column. */
.fcr-right{
  justify-self:end;
  display:flex;align-items:center;gap:12px;
  min-width:0;
}
/* The empty left cell. It has no content and never had — it exists so the
   1fr either side of the mark are equal and the mark sits on the bar's
   real centre line. display:none would collapse the cell and take the
   centring with it. */
.fcr-spacer{display:block}

/* The way back to the module hub, in the right-hand cluster beside Sign
   Out — where the FC Manage page keeps its own, so "leave this page" is
   in one place on both. Styled as the same pill as Sign Out rather than
   the round arrow it used to be on the left. */
.fcr-portal{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;
  border-radius:999px;
  background:#f8fafc;border:1px solid #e2e8f0;
  color:#64748b;text-decoration:none;
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s;
}
.fcr-portal:hover{background:#ecfdf5;color:#059669;border-color:#a7f3d0}
.fcr-portal svg{
  width:14px;height:14px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}

.fcr-welcome{
  font-size:11px;font-weight:700;color:#64748b;white-space:nowrap;
}

/* Language + sign-out pills share one shape so they read as a pair. */
.fcr-lang,
.fcr-signout{
  height:33px;
  padding:0 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#64748b;
  font-size:10px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  font-family:inherit;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,border-color .15s,color .15s;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
}
.fcr-lang:hover{color:#047857;border-color:#6ee7b7}
.fcr-signout:hover{color:#ef4444}
.fcr-lang:active,.fcr-signout:active{transform:scale(.98)}

.fcr-globe{font-size:11px;line-height:1;letter-spacing:0}
/* On phones the sign-out word steps aside for a power glyph, exactly as the
   FC bar does — it is what buys the wordmark its centre. */
.fcr-signout-icon{display:none;font-size:13px;line-height:1;letter-spacing:0}

/* ── PHONE ──
   The bar has more items than a phone width can hold at their full
   size, so items step aside in the order they can be spared: welcome
   text (name known from context), then the sign-out pill's word, then
   the pills shrink.

   Losing the sign-out word matters more than saving a few pixels: it
   is what buys the wordmark its centre. At full width the right-hand
   cluster is far wider than the back arrow, and a grid can only centre
   the middle column while both side columns fit the same width — so
   on a phone the cluster has to come down to roughly the size of the
   arrow or the "555" quietly slides left. Icon-only keeps it there,
   and the button carries its name in aria-label and title instead.

   The caption survives all the way down now, where it used to be
   dropped below 380px; the space the sign-out word gave back pays
   for it, and "Auditor Portal" is the half that says what the bar
   is. */
/* The welcome name goes first, and it has to go earlier than the phone
   breakpoint now. The wordmark is wider than the old one, and centring
   it needs room for the right-hand cluster TWICE over — the two grid
   columns either side of it claim equal width. Measured: with the name
   showing that comes to 771px, so anything under about 820 was pushing
   the bar into a sideways scroll. Without it the same bar needs 584. */
/* The welcome name goes first, and it has to go a long way before the
   phone breakpoint: centring the wordmark needs room for the right-hand
   cluster TWICE over, since the two grid columns either side of it claim
   equal width.

   680 was measured when the way back was still the round arrow on the
   left. The Portal pill moved into this cluster afterwards and nothing
   re-measured: re-measured now, the bar needs 904px with the name showing
   and fits every width down to 320 without it. So 680 to 900 was a
   sideways scroll on every page carrying this ribbon — audit_admin.html
   and audit_report.html both, at exactly the width a tablet holds it. */
@media (max-width:900px){
  .fcr-welcome{display:none}
}

/* ── PHONE: the mark takes its own row ──
   Three pills on the right and a three-line mark do not fit one phone
   row. Measured on this bar at 412px: the mark is centred correctly and
   then runs 40px INTO the pills, and 72px into them at 320 — the grid
   centres the middle column but cannot stop nowrap lines overflowing it.
   Shrinking the caption to fit would mean dropping the words that say
   which portal this is, which is the one thing the caption is for.

   So the bar becomes two rows below 640: back-arrow slot and pills on
   the first, the mark centred across the full width on the second. It
   costs about 30px of sticky header and buys a mark that is legible and
   genuinely centred at every width down to 320. shared_ribbon.js stacks
   the FC Manage bar the same way in the same pass — the two bars are
   meant to be indistinguishable, and that page had the same collision
   from the other direction (its wider pill pair shoved the mark 107px
   left of centre). */
@media (max-width:640px){
  .fcr{gap:8px;padding:8px 12px;grid-template-columns:auto 1fr;row-gap:6px}
  .fcr-spacer{grid-area:1/1}
  .fcr-right{grid-area:1/2;justify-self:end}
  .fcr-brand{grid-area:2/1/3/3;justify-self:center}
  .fcr-right{gap:8px}
  .fcr-signout-label{display:none}
  .fcr-signout-icon{display:inline}
  .fcr-brand-name{font-size:27px}
  .fcr-brand-org{font-size:11px;letter-spacing:1.54px}
  .fcr-brand-sub{font-size:9px;letter-spacing:1.62px}
  .fcr-signout{padding:0 10px}
  .fcr-portal{padding:0 10px}
  .fcr-portal .fcr-portal-label{display:none}
}

@media (max-width:380px){
  .fcr-lang,.fcr-signout{padding:0 9px}
  .fcr-back{width:32px;height:32px}
}

/* Smallest phones still in the field (320px). The caption is the only
   thing left with slack, and at this width it runs into the pills — so
   it gives up the tracking that makes it look like a caption before it
   gives up being readable. */
@media (max-width:340px){
  .fcr-brand-sub{letter-spacing:1px}
}