/* THE HEADER CALLING CARD — #6808. Standard:
   /root/spotsheet-docs/HEADER-CALLING-CARD-STANDARD.md

   Loaded AFTER shell.css so the card owns its own responsive rule. Before
   #6808 the phone rule lived in three places and disagreed with itself: the
   desktop shell hid the wordmark below 768px, .ss-app.mobile hid it at EVERY
   width, and MobileProjectPicker had moved it into the topbar centre instead.
   One rule now, and it is here, next to the component it belongs to. */

.ss-hcc {
  display: flex;
  align-items: center;
  gap: 10px;              /* MARK -> WORDMARK. The standard's one gap. */
  min-width: 0;
}

/* The mark never shrinks. A crowded topbar collapses the wordmark (below), it
   does not squeeze the brand geometry — a 21px mark is a different mark. */
.ss-hcc-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Colour and type come from .ss-wordmark in shell.css + visual-policy.css and
   are NOT restated here: #CCDE49 is one of six authored uses of the reserved
   green (#6024/#6029) and the policy layer stays its single source. */
.ss-hcc-word { flex: 0 0 auto; }
.ss-hcc-build { flex: 0 0 auto; }

/* ONE responsive rule, every shell, every edition.
   >= 768  mark + wordmark + build pill, gap 10.
   <  768  mark only, gap 0. The mark stays 24x24.
   The .ss-app.mobile selectors are here to BEAT shell.css's
   `.ss-app.mobile .ss-topbar .ss-wordmark { display:none }`, which hid the
   wordmark on the native shell at every width. That is the divergence #6808
   exists to remove, so the card's rule has to win. */
@media (min-width: 768px) {
  .ss-app .ss-topbar .ss-hcc > .ss-hcc-word,
  .ss-app.mobile .ss-topbar .ss-hcc > .ss-hcc-word { display: block; }
  .ss-app .ss-topbar .ss-hcc > .ss-hcc-build,
  .ss-app.mobile .ss-topbar .ss-hcc > .ss-hcc-build { display: inline; }
}

@media (max-width: 767px) {
  .ss-hcc { gap: 0; }
  .ss-app .ss-topbar .ss-hcc > .ss-hcc-word,
  .ss-app.mobile .ss-topbar .ss-hcc > .ss-hcc-word,
  .ss-app .ss-topbar .ss-hcc > .ss-hcc-build,
  .ss-app.mobile .ss-topbar .ss-hcc > .ss-hcc-build { display: none; }
}