/* ==========================================================================
   Office / Microsoft 365 registry reference

   Loaded only on pages running [office_registry_reference]. Borrows the site's
   existing visual language rather than introducing a second one: the white pill
   and its shadow come from the search bar, the hairline is the same #E3E6F0,
   and the type is Montserrat throughout.

   The badge palette encodes the editorial hierarchy on purpose. A setting that
   came out of a Microsoft support case gets the lime accent on dark navy and is
   the loudest thing in the entry; a setting restated from Microsoft's own
   documentation gets the quietest treatment on the page. That is the right way
   round for a reference whose value is the material you cannot find elsewhere.
   ========================================================================== */

.et-reg {
    --reg-ink: #1B1E3B;
    --reg-ink-soft: #515151;
    --reg-navy: #31347C;
    --reg-blue: #0072BC;
    --reg-violet: #3E1597;
    --reg-lime: #D6FF00;
    --reg-hair: #E3E6F0;
    --reg-wash: #F6F7FB;
    --reg-muted: #6B7189;
    --reg-deep: #03061A;

    font-family: "Montserrat", sans-serif;
    color: var(--reg-ink);

    /* The subject matter is registry paths, value names and URLs: long strings
       with no spaces and no break opportunity a browser will take on its own.
       A backslash is not a break opportunity, so
       HKCU\Software\Microsoft\Office\16.0\Outlook is one unbreakable word, and
       so is RestrictTeamsSignInToAccountsFromTenantList.

       Measured on an iPhone 15 (393px) before this rule: the document was
       774px wide, so the whole page scrolled sideways and every card looked
       like it had text running off its right edge. One h3 was 688px on its own.

       `anywhere` rather than `break-word` on purpose. Both break a word that
       would otherwise overflow, but only `anywhere` also shrinks the element's
       intrinsic min-content width, which is what lets flex and grid children
       actually narrow instead of forcing their container wide. `break-word`
       was already on .et-reg code below and did not prevent any of this.

       Inherited, so it reaches every descendant without a selector per part. */
    overflow-wrap: anywhere;
}

.et-reg *,
.et-reg *::before,
.et-reg *::after {
    box-sizing: border-box;
}

/* The component owns its own visually-hidden class rather than relying on the
   parent theme's .screen-reader-text. Inheriting it meant the checkbox labels
   rendered as visible text wherever this markup appeared outside a Twenty
   Seventeen page, which crushed the heading into a narrow column. */
.et-reg .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The toolbar is sticky, so an anchored entry would otherwise land underneath
   it. Keep a landing entry clear of it. */
.et-reg__key,
.et-reg__group {
    scroll-margin-top: 86px;
}

/* A class-level `display` beats the user-agent's [hidden] { display: none },
   so anything this stylesheet gives a display to must opt back out explicitly
   or the hidden attribute silently stops working. The tray is laid out with
   flex, which is how it came to be visible on load with nothing selected.
   The entries and groups are covered defensively: the filter hides them with
   the same attribute, and a display coming from the theme or the page builder
   would break it the same way. */
.et-reg [hidden],
.et-reg__tray[hidden],
.et-reg__key[hidden],
.et-reg__group[hidden] {
    display: none !important;
}

/* ----------------------------------------------------------------- toolbar */

.et-reg__toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0 16px;
    /* Opaque, because entries scroll underneath it. */
    background: #fff;
}

.et-reg__filter {
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
}

.et-reg__q {
    width: 100%;
    margin: 0;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--reg-ink);
    background: #fff;
    border: 1px solid var(--reg-hair);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(3, 6, 26, .12);
    transition: box-shadow .18s ease, border-color .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.et-reg__q::placeholder {
    color: var(--reg-muted);
}

.et-reg__q:focus {
    outline: none;
    border-color: var(--reg-navy);
    box-shadow: 0 10px 30px rgba(3, 6, 26, .18), 0 0 0 3px rgba(49, 52, 124, .16);
}

.et-reg__count {
    flex: 0 0 auto;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--reg-ink-soft);
}

/* ------------------------------------------------------------------- index */

.et-reg__index {
    margin: 0 0 40px;
    padding: 22px 24px;
    background: var(--reg-wash);
    border: 1px solid var(--reg-hair);
    border-radius: 14px;
}

.et-reg__index ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 4px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.et-reg__index li {
    margin: 0;
}

.et-reg__index a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--reg-navy);
    text-decoration: none;
    /* The theme paints link underlines with box-shadow, which looks wrong on a
       two-part flex row. */
    box-shadow: none;
    border-bottom: 1px solid transparent;
}

.et-reg__index a:hover,
.et-reg__index a:focus {
    color: var(--reg-blue);
    box-shadow: none;
    border-bottom-color: currentColor;
}

.et-reg__n {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 1px 7px;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    color: var(--reg-ink-soft);
    background: #fff;
    border: 1px solid var(--reg-hair);
    border-radius: 999px;
}

/* ------------------------------------------------------------------ groups */

.et-reg__group {
    margin: 0 0 52px;
}

.et-reg__group-title {
    margin: 0 0 6px;
    padding-bottom: 10px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--reg-navy);
    border-bottom: 2px solid var(--reg-hair);
    text-transform: none;
}

.et-reg__group-blurb {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--reg-ink-soft);
}

/* ------------------------------------------------------------------ entries */

.et-reg__key {
    margin: 0 0 26px;
    padding: 22px 24px 24px;
    background: #fff;
    border: 1px solid var(--reg-hair);
    border-left: 3px solid var(--reg-navy);
    border-radius: 4px 12px 12px 4px;
}

.et-reg__key:target {
    border-left-color: var(--reg-lime);
    box-shadow: 0 0 0 3px rgba(214, 255, 0, .35);
}

.et-reg__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.et-reg__pick {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 1.5em;
    margin: 0;
    cursor: pointer;
}

.et-reg__check {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--reg-navy);
    cursor: pointer;
}

.et-reg__title {
    flex: 1 1 auto;

    /* A flex item defaults to min-width:auto, which refuses to shrink below its
       content. With a 43-character value name as that content, the item stayed
       at its full width and pushed the card, and then the page, sideways.
       Wrapping alone does not fix it; the item has to be allowed to narrow. */
    min-width: 0;

    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.005em;
    text-transform: none;
}

.et-reg__title a {
    color: var(--reg-ink);
    text-decoration: none;
    box-shadow: none;
}

.et-reg__title a:hover,
.et-reg__title a:focus {
    color: var(--reg-blue);
    box-shadow: none;
}

/* ------------------------------------------------------------------ badges */

.et-reg__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 11px 0 0;
    padding-left: 29px;
}

.et-reg__badge {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    cursor: help;
}

.et-reg__badge--ms-support-escalation {
    color: var(--reg-lime);
    background: var(--reg-ink);
}

.et-reg__badge--author {
    color: #fff;
    background: var(--reg-navy);
}

.et-reg__badge--vendor-kb {
    color: #fff;
    background: var(--reg-blue);
}

.et-reg__badge--field {
    color: #fff;
    background: var(--reg-violet);
}

.et-reg__badge--community {
    color: var(--reg-ink-soft);
    background: var(--reg-wash);
    border: 1px solid var(--reg-hair);
}

/* Deliberately the quietest badge on the page. */
.et-reg__badge--docs {
    color: var(--reg-muted);
    background: transparent;
    border: 1px solid var(--reg-hair);
}

.et-reg__badge--undocumented {
    color: var(--reg-violet);
    background: transparent;
    border: 1px dashed currentColor;
}

.et-reg__symptom {
    margin: 14px 0 18px;
    padding-left: 29px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--reg-ink-soft);
}

/* -------------------------------------------------------------------- code */

.et-reg__code {
    margin: 0 0 20px;
}

.et-reg__snippet {
    margin: 0 0 10px;
    overflow: hidden;
    background: var(--reg-deep);
    border-radius: 10px;
}

.et-reg__snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .05);
}

.et-reg__snippet pre {
    margin: 0;
    padding: 14px;
    background: transparent;
    border: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #E8EBF5;
    /* Wrap rather than scroll: a reg add line is long by nature and a clipped
       command is worse than a wrapped one, especially on a phone. The hanging
       indent keeps a wrapped continuation visually subordinate. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding-left: 28px;
    text-indent: -14px;
    -moz-tab-size: 4;
    tab-size: 4;
}

.et-reg__snippet pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    background: transparent;
}

.et-reg__copy,
.et-reg__tray-copy,
.et-reg__tray-clear {
    padding: 5px 13px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--reg-ink);
    background: var(--reg-lime);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .12s ease, opacity .12s ease;
}

.et-reg__copy:hover,
.et-reg__tray-copy:hover,
.et-reg__tray-clear:hover {
    transform: translateY(-1px);
}

.et-reg__copy.is-copied,
.et-reg__tray-copy.is-copied {
    color: #fff;
    background: #2E7D32;
}

.et-reg__snippet--reg {
    background: var(--reg-wash);
    border: 1px solid var(--reg-hair);
}

.et-reg__snippet--reg summary {
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--reg-navy);
    cursor: pointer;
}

.et-reg__snippet--reg summary:hover {
    color: var(--reg-blue);
}

.et-reg__snippet--reg[open] summary {
    border-bottom: 1px solid var(--reg-hair);
}

.et-reg__snippet--reg .et-reg__snippet-head {
    color: var(--reg-ink-soft);
    background: transparent;
}

.et-reg__snippet--reg pre {
    color: var(--reg-ink);
}

/* ------------------------------------------------------------------- facts */

.et-reg__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 28px;
    margin: 0 0 16px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--reg-hair);
}

.et-reg__fact {
    padding: 0 0 13px;
}

.et-reg__facts dt {
    margin: 0 0 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--reg-muted);
}

.et-reg__facts dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--reg-ink);
}

.et-reg code {
    padding: 1px 5px;
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    font-size: .92em;
    word-break: break-word;
    color: var(--reg-violet);
    background: var(--reg-wash);
    border-radius: 3px;
}

/* The article's own prose, not the component, but it sits on the same page and
   quotes the same kind of string: Software\Policies\Microsoft\Office in a
   paragraph was still 307px wide and overflowed at 320px after the rules above.
   This stylesheet only loads on pages running [office_registry_reference], so
   the scope is exactly the pages whose prose is full of registry paths. */
.elementor-widget-container code {
    overflow-wrap: anywhere;
}

.et-reg__values {
    margin: 0;
    padding: 0;
    list-style: none;
}

.et-reg__values li {
    margin: 0 0 3px;
    font-size: 13.5px;
    line-height: 1.5;
}

.et-reg__values code {
    margin-right: 4px;
}

.et-reg__muted {
    display: inline-block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--reg-ink-soft);
}

/* ------------------------------------------------------------------- notes */

.et-reg__note {
    margin: 0 0 12px;
    padding: 11px 15px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 8px;
}

.et-reg__note strong {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.et-reg__note--caution {
    color: #6B4A00;
    background: #FFF8E1;
    border-left: 3px solid #E8A200;
}

.et-reg__note--breaks {
    color: #7A1F1F;
    background: #FDF1F1;
    border-left: 3px solid #C62828;
}

.et-reg__notes {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--reg-ink-soft);
}

.et-reg__sources {
    margin: 0;
    font-size: 12.5px;
    color: var(--reg-muted);
}

.et-reg__sources a {
    color: var(--reg-blue);
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 114, 188, .35);
}

.et-reg__sources a:hover,
.et-reg__sources a:focus {
    box-shadow: none;
    border-bottom-color: currentColor;
}

.et-reg__empty {
    padding: 30px 24px;
    font-size: 16px;
    text-align: center;
    color: var(--reg-ink-soft);
    background: var(--reg-wash);
    border: 1px dashed var(--reg-hair);
    border-radius: 12px;
}

/* -------------------------------------------------------------------- tray */

.et-reg {
    /* Room for the sticky tray so it never covers the final entry. */
    padding-bottom: 8px;
}

.et-reg__tray {
    position: sticky;
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 14px 20px;
    color: #fff;
    background: var(--reg-ink);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 26px rgba(3, 6, 26, .22);
}

.et-reg__tray-count {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.et-reg__tray-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.et-reg__tray-clear {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.et-reg__tray-out {
    flex: 1 1 100%;
    max-height: 240px;
    margin: 4px 0 0;
    padding: 12px 14px;
    overflow: auto;
    font-size: 12.5px;
    line-height: 1.6;
    color: #E8EBF5;
    background: rgba(0, 0, 0, .35);
    border: 0;
    border-radius: 8px;
    white-space: pre;
}

.et-reg__tray-out code {
    padding: 0;
    color: inherit;
    background: transparent;
}

/* ------------------------------------------------------------------ narrow */

@media screen and (max-width: 640px) {
    .et-reg__key {
        padding: 18px 16px 20px;
    }

    .et-reg__badges,
    .et-reg__symptom {
        padding-left: 0;
    }

    .et-reg__index {
        padding: 18px 16px;
    }

    .et-reg__group-title {
        font-size: 20px;
    }

    .et-reg__title {
        font-size: 17.5px;
    }
}

/* Honour a reduced-motion preference: the only motion here is decorative. */
@media (prefers-reduced-motion: reduce) {
    .et-reg__copy,
    .et-reg__tray-copy,
    .et-reg__tray-clear,
    .et-reg__q {
        transition: none;
    }

    .et-reg__copy:hover,
    .et-reg__tray-copy:hover,
    .et-reg__tray-clear:hover {
        transform: none;
    }
}

/* An entry that explains a behaviour rather than setting anything. */
.et-reg__nocmd {
    margin: 0 0 18px;
    padding: 11px 15px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--reg-ink-soft);
    background: var(--reg-wash);
    border: 1px dashed var(--reg-hair);
    border-radius: 8px;
}

/* ==========================================================================
   Theme bleed-through

   This component renders inside the post content, so the parent theme's
   content styles reach it. Two did real damage on the live page and neither
   showed up in an isolated preview:

   - Twenty Seventeen gives headings inside .entry-content a large left margin
     (95.5px as measured), which tore each entry's title away from its
     checkbox.
   - The theme's body colour won over the badge rules, painting #333 text on
     the dark badge backgrounds. "From a Microsoft support case" - the most
     important label on the page - was dark grey on dark navy.

   Everything here is scoped under .et-reg and exists only to win against the
   theme, so it is specificity rather than new design.
   ========================================================================== */

/* dev7.css carries
     .elementor-location-single .elementor-widget-theme-post-content :is(p, h1..h6, pre, ...)
   at specificity (0,2,1) - :is() takes the specificity of its most specific
   argument, and the element selectors supply the trailing 1. It applies the
   reading measure with auto side margins, which is right for prose and wrong
   here: it tore each title away from its checkbox and clamped the command
   blocks to 700px. These selectors are (0,3,0) or better so they win, rather
   than reaching for !important. */
.et-reg .et-reg__key .et-reg__title,
.et-reg .et-reg__group .et-reg__group-title,
.et-reg .et-reg__key p,
.et-reg .et-reg__key pre,
.et-reg .et-reg__key ul,
.et-reg .et-reg__key ol,
.et-reg .et-reg__key dl,
.et-reg .et-reg__key dd,
.et-reg .et-reg__key blockquote,
.et-reg .et-reg__key table,
.et-reg .et-reg__group .et-reg__group-blurb,
.et-reg .et-reg__tray .et-reg__tray-out,
.et-reg .et-reg__tray p,
.et-reg .et-reg__index ul,
.et-reg .et-reg__empty,
.et-reg .et-reg__toolbar p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.et-reg .et-reg__key .et-reg__title {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}

.et-reg .et-reg__group .et-reg__group-title {
    text-align: left;
}

/* The symptom and badges keep their deliberate indent under the title. */
.et-reg .et-reg__key p.et-reg__badges,
.et-reg .et-reg__key p.et-reg__symptom {
    padding-left: 29px;
}

@media screen and (max-width: 640px) {
    .et-reg .et-reg__key p.et-reg__badges,
    .et-reg .et-reg__key p.et-reg__symptom {
        padding-left: 0;
    }
}

.et-reg .et-reg__key .et-reg__badges .et-reg__badge--ms-support-escalation {
    color: var(--reg-lime);
    background: var(--reg-ink);
}

.et-reg .et-reg__key .et-reg__badges .et-reg__badge--author,
.et-reg .et-reg__key .et-reg__badges .et-reg__badge--vendor-kb,
.et-reg .et-reg__key .et-reg__badges .et-reg__badge--field {
    color: #fff;
}

.et-reg .et-reg__key .et-reg__badges .et-reg__badge--author    { background: var(--reg-navy); }
.et-reg .et-reg__key .et-reg__badges .et-reg__badge--vendor-kb { background: var(--reg-blue); }
.et-reg .et-reg__key .et-reg__badges .et-reg__badge--field     { background: var(--reg-violet); }

.et-reg .et-reg__key .et-reg__badges .et-reg__badge--community {
    color: var(--reg-ink-soft);
    background: var(--reg-wash);
}

.et-reg .et-reg__key .et-reg__badges .et-reg__badge--docs {
    color: var(--reg-muted);
    background: transparent;
}

.et-reg .et-reg__key .et-reg__badges .et-reg__badge--undocumented {
    color: var(--reg-violet);
    background: transparent;
}

/* The dark snippets must keep their own foreground too. */
.et-reg .et-reg__snippet pre,
.et-reg .et-reg__snippet pre code {
    color: #E8EBF5;
}

.et-reg .et-reg__snippet--reg pre,
.et-reg .et-reg__snippet--reg pre code {
    color: var(--reg-ink);
}

.et-reg .et-reg__tray-out,
.et-reg .et-reg__tray-out code,
.et-reg .et-reg__tray-count {
    color: #E8EBF5;
}


/* ==========================================================================
   Contrast

   Audited against the live page with a computed-style pass over every text
   node in the component, comparing each foreground against its real composited
   background. Four failures, three of them real:

   - The tray count came out at 1.28:1 - the theme's #333 body colour beating
     the tray's own white, dark grey on dark navy.
   - The muted grey was #8A90A6, which is 3.17:1 on white and fails AA for
     small text. It is now #6B7189 at 4.87:1, which covers the facts labels,
     the 'Microsoft documented' badge, the source line and the counts.
   - The snippet label sat at 55% white, legible but dim enough to read as
     dark-on-dark at a glance, so it is 72% now.

   Anything painted on a dark surface is restated here at (0,3,0) or better,
   because the theme's content colour reaches into this component and wins
   against a single class.
   ========================================================================== */

.et-reg .et-reg__tray .et-reg__tray-count,
.et-reg .et-reg__tray p,
.et-reg .et-reg__tray .et-reg__tray-out,
.et-reg .et-reg__tray .et-reg__tray-out code {
    color: #F2F4FA;
}

.et-reg .et-reg__tray .et-reg__tray-clear {
    color: #F2F4FA;
    background: rgba(255, 255, 255, .18);
}

.et-reg .et-reg__key .et-reg__snippet-head,
.et-reg .et-reg__key .et-reg__snippet-head span {
    color: rgba(255, 255, 255, .72);
}

/* The .reg disclosure sits on a light surface, so it keeps dark text. */
.et-reg .et-reg__key .et-reg__snippet--reg .et-reg__snippet-head,
.et-reg .et-reg__key .et-reg__snippet--reg .et-reg__snippet-head span {
    color: var(--reg-ink-soft);
}

.et-reg .et-reg__key .et-reg__facts dt,
.et-reg .et-reg__key .et-reg__sources,
.et-reg .et-reg__toolbar .et-reg__count,
.et-reg .et-reg__index .et-reg__n {
    color: var(--reg-muted);
}

.et-reg .et-reg__key .et-reg__badges .et-reg__badge--docs {
    color: var(--reg-muted);
}

.et-reg .et-reg__q::placeholder {
    color: var(--reg-muted);
    opacity: 1;
}


/* The toolbar's contents sat flush with the component edge at every width:
   the count's right edge and the container's right edge were the same pixel,
   which reads as clipped even though nothing overflows. Inset the row and
   widen the gap so the count has somewhere to breathe. The sticky white band
   keeps its full width; only the contents move. */
.et-reg .et-reg__toolbar {
    padding-left: 18px;
    padding-right: 18px;
    gap: 22px;
}

@media screen and (max-width: 640px) {
    .et-reg .et-reg__toolbar {
        padding-left: 2px;
        padding-right: 2px;
        gap: 12px;
    }
}


/* ==========================================================================
   Text on dark surfaces

   Elementor's inline kit stylesheet carries

       .post-template-default.single-post .post p    { color: #333 }
       .post-template-default.single-post .post span { color: #333 }

   at (0,3,1): three classes plus an element selector. The badge rules happen
   to win because they reach four classes, but the tray count and the snippet
   labels cannot, so they were painting #333 on dark navy at 1.28:1 and 1.46:1.

   Escalating specificity has already lost this race twice, and the next theme
   rule would win it again. Anything whose surface is dark is therefore
   declared !important: not as a shortcut, but because "this text sits on a
   dark background" is genuinely not negotiable by an ambient body colour.
   The scope is deliberately tiny and every selector is inside .et-reg.
   ========================================================================== */

.et-reg .et-reg__tray .et-reg__tray-count,
.et-reg .et-reg__tray .et-reg__tray-out,
.et-reg .et-reg__tray .et-reg__tray-out code,
.et-reg .et-reg__tray .et-reg__tray-clear {
    color: #F2F4FA !important;
}

.et-reg .et-reg__snippet .et-reg__snippet-head,
.et-reg .et-reg__snippet .et-reg__snippet-head span {
    color: rgba(255, 255, 255, .78) !important;
}

.et-reg .et-reg__snippet pre,
.et-reg .et-reg__snippet pre code {
    color: #E8EBF5 !important;
}

/* The .reg disclosure is a light surface, so it keeps dark text. */
.et-reg .et-reg__snippet--reg .et-reg__snippet-head,
.et-reg .et-reg__snippet--reg .et-reg__snippet-head span,
.et-reg .et-reg__snippet--reg summary {
    color: var(--reg-ink-soft) !important;
}

.et-reg .et-reg__snippet--reg pre,
.et-reg .et-reg__snippet--reg pre code {
    color: var(--reg-ink) !important;
}

.et-reg .et-reg__copy,
.et-reg .et-reg__tray .et-reg__tray-copy {
    color: var(--reg-ink) !important;
}

.et-reg .et-reg__copy.is-copied,
.et-reg .et-reg__tray .et-reg__tray-copy.is-copied {
    color: #fff !important;
}