/* ===================================================================
   The Better MC lockup.

   Approved by Milo on 2026-08-21; the artwork, the tracking and the
   colour roles are pinned in
   .superpowers/sdd/2026-08-20-panel-redesign-b-shell/WORDMARK-SPEC.md
   and held by tests/test_bettermc_mark.py.

   Its own file, loaded only on the profiles that draw it, for two
   reasons. The first is that The Bloc must not change: static assets
   are cache-busted by content hash (app/assets.py), so adding a single
   rule to shell.css or public.css would change their ?v= and therefore
   change The Bloc's rendered bytes. The second is that a stylesheet
   whose markup is gated should be gated too - see base.html's head.

   Every colour is a :root token. --accent-secondary was scope-only
   once and the shell, which is inside no scope, computed it as black.
   Three of this mark's four sites are in the shell.
   =================================================================== */

/* One font-size drives the whole lockup: the glyph is 1em tall and the
   caps and the gap are proportions of it. The steps are the sizes the mark
   is actually rendered at - top bar (sm), sidebar and drawer (md), and the
   public header (xl).

   There was an --lg at 30px for the dashboard header. Plan C Task 5 took the
   brand row off that page entirely, so nothing passed `lg` any more and the
   rule matched no element on either profile - measured by rendering both
   profiles across fourteen routes and collecting the class attributes, not by
   reading the templates. It is deleted rather than kept "in case": a size with
   no call site is indistinguishable from a size whose call site was lost, and
   tests/test_bettermc_mark.py now fails if a size is passed without a rule. */
.bmc-mark {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    line-height: 1;
    font-size: 26px;
}
.bmc-mark--sm { font-size: 22px; }
.bmc-mark--md { font-size: 26px; }
/* The PRIMARY lockup, and the only step that carries the chip. 48px is the
   mockup's own figure, and it is not decoration: the chip is a fixed 9.5px, so
   the word has to be at primary size for the plate to sit NARROWER than it.
   Measured at lg/30px the chip came out 142px against a 135px word - wider,
   which is the proportion the port was stripped to fix. At 48px the word is
   216px and the ratio matches the approved drawing. */
.bmc-mark--xl { font-size: 48px; }

.bmc-mark-glyph {
    display: block;
    flex: none;
    height: 1em;
    width: auto;
}

.bmc-mark-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* A flex child defaults to min-width: auto, which refuses to shrink
       below its longest unbreakable run - and the caps are set
       white-space: nowrap. In the 260px sidebar that would push the
       shell wider rather than clip. */
    min-width: 0;
}

/* .30em, measured rather than picked: the sketch tracked at .34em and
   the caps came apart at sidebar size, which is where three of the four
   sites live. Rounding this to a nicer number undoes a measurement. */
.bmc-mark-caps {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: .56em;
    letter-spacing: .30em;
    text-transform: uppercase;
    line-height: 1.05;
    white-space: nowrap;
    color: var(--text);
}

/* The second word carries the light accent. Set live from the profile's
   display name, so a rename needs no redrawing - which is exactly what
   The Bloc's glyph-path wordmark could not do. */
.bmc-mark-tail { color: var(--bloc-300); }

/* Primary lockup only. It does NOT appear in the sidebar: the identity
   block states the connect address two lines below it, and saying it
   twice in two typefaces is worse than not styling it once. */
.bmc-mark-chip {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--bloc-500);
    color: var(--surface-950);
    font-family: 'Overpass Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .15em;
    /* Uppercased here and nowhere else. The address is one string in one
       place: app/profiles.py. A cased copy in the template or the view
       is a second spelling of the thing a family types into Minecraft. */
    text-transform: uppercase;
}

/* The primary lockup steps down on a phone. Measured, and it is not a
   nicety: at 48px the lockup is 308px wide and `white-space: nowrap` makes it
   unbreakable, so on a 320px screen the public header overflowed by 10px and
   the landing page grew a horizontal scrollbar. 40px puts it at 257px, which
   clears the narrowest viewport anyone still ships. The chip stays narrower
   than the word here too (142px against 181px) - that is the constraint that
   sets the floor, because the chip is a fixed 9.5px and does not shrink with
   the word. */
@media (max-width: 400px) {
    .bmc-mark--xl { font-size: 40px; }
}

/* The dashboard header's own step-down below 1024px lived here and is gone with
   it. `.bloc-header-left` still exists and still renders on /dashboard, but its
   only descendant is now `.bloc-statuspill` - measured on both profiles - so
   this rule could never match. Task 5 moved the brand to the shell, which
   carries its own sizes above. */