/* Version 23, round 6 follow-up, loaded after r5.css and r5-23.css (both unchanged): a two-state text theme button, the IBM 8-bar
   before Dell (eight marks), and in dark mode each mark shows its own colours on a fine-pointer hover. */

/* ---------------------------------------------------------------- theme button: names the theme it switches to */
.v23 .tt{width:auto;min-width:44px;height:44px;padding:0 16px;font:600 15px/1 var(--sans);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--rule)}
.v23 .tt:hover{box-shadow:inset 0 0 0 1px var(--signal)}
/* the early theme script always sets data-theme, so the label is right from the first paint */
.v23 .tt-to-light,:root[data-theme=dark] .v23 .tt-to-dark{display:none}
:root[data-theme=dark] .v23 .tt-to-light{display:inline}

/* ---------------------------------------------------------------- career marks: eight */
/* IBM 8-bar, Carbon's h23 artwork drawn at its own 23px height (bars and gaps are tuned per published height); the geometry is
   inline, painted IBM blue here, and goes to the same light silhouette as the other marks on navy */
.v23 .lg-ibm svg{display:block;flex:none;width:auto;height:23px;aspect-ratio:58/23;max-width:100%;filter:var(--logo);opacity:var(--logo-o)}
.v23 .lg-ibm path{fill:#0f62fe}
/* phone: 3 + 3 + 2, IBM and Dell centred together on the last row. A 4 + 4 grid would shrink the first row: ServiceNow,
   Ironclad and LaunchDarkly are about 97 to 101px wide at full size, more than a quarter of a 320 to 400px container */
.v23 .logos li:nth-child(n){grid-column:span 4}
.v23 .logos li:nth-child(7){grid-column:3 / span 4}
.v23 .logos li:nth-child(8){grid-column:7 / span 4}
/* from a 520px container every mark fits a quarter at full size: 4 + 4 */
@container (min-width:520px){.v23 .logos li:nth-child(n){grid-column:span 3}}

/* dark mode only: a fine-pointer hover shows the mark in its own colours on a light chip. The chip is a box-shadow on the mark
   itself, so nothing moves; it is there because several wordmarks are near-black and would vanish on navy. Touch and coarse
   pointers keep the idle silhouettes (no sticky hover); Light mode shows every mark in colour all the time. */
@media (hover:hover) and (pointer:fine){
  :root[data-theme=dark] .v23 .logos li:hover>img,:root[data-theme=dark] .v23 .logos li:hover>svg{filter:none;opacity:1;background:#F6F8FB;
    box-shadow:0 0 0 6px #F6F8FB;border-radius:2px}
}
@media (hover:hover) and (pointer:fine) and (prefers-color-scheme:dark){
  :root:not([data-theme]) .v23 .logos li:hover>img,:root:not([data-theme]) .v23 .logos li:hover>svg{filter:none;opacity:1;background:#F6F8FB;
    box-shadow:0 0 0 6px #F6F8FB;border-radius:2px}
}
@media (prefers-reduced-motion:no-preference){.v23 .logos img,.v23 .logos svg{transition:filter .15s,opacity .15s,background-color .15s,box-shadow .15s}}

@media (min-width:900px){
  /* the button sits in the top padding, above the heading rather than beside it (44px tall from 16px; the heading starts at 72px) */
  .v23 .tt{top:16px}
  /* four rows of two, IBM beside Dell on the last */
  .v23 .sender .logos li:nth-child(n){grid-column:auto}
}