/**
 * RTM Font Showcase — the specimen, the character map and its inspector.
 *
 * Every color and dimension comes from a custom property written by
 * Frontend\CssVars from the global palette, with the shipped default as the
 * var() fallback so an unset option degrades to the design rather than to
 * nothing.
 */

/* Visibility is the `hidden` attribute throughout, so the JS toggles one
   attribute instead of writing inline display values it would then have to
   remember. Declared explicitly because the rules below set `display` on
   these elements, which beats the user-agent stylesheet's [hidden]. */
.rtm-panel[hidden],
.rtm-glyph-set[hidden] {
    display: none;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

/*
 * Inline SVG icons draw with currentColor, so they are only ever as visible as
 * the colour they inherit. Every icon in the suite sits on one of our own
 * surfaces, so the colour is ours to state -- and stating it is what stops a
 * theme's button colour erasing them.
 */
.rtm-suite button svg {
    display: block;
    flex-shrink: 0;
    color: inherit;
}
.rtm-suite *, .rtm-suite *::before, .rtm-suite *::after { box-sizing: border-box; }

/*
 * Controls, defended against the theme around them.
 *
 * These are buttons, selects and ranges dropped into somebody else's page, and
 * a theme that styles `button` broadly -- pill radii, 1rem padding, uppercase
 * letter-spacing, a min-width -- reshapes every control in the toolbar. That
 * is what turned four 26px alignment icons into four stretched slabs. Stating
 * the ones that matter costs a handful of declarations and makes the specimen
 * look the same in every theme it is dropped into.
 */
.rtm-suite button {
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    min-width: 0;
    min-height: 0;
    text-decoration: none;
}

/* Stacked is the resting arrangement: it is what a theme-builder template
   produces from the separate widgets, and what the whole showcase falls back
   to when the strip's script never ran. The gap is then what separates the
   specimen, the character map and the spec sheet. */
.rtm-panel + .rtm-panel {
    margin-top: 44px;
}

/* ── The panel switcher ──────────────────────────────────────────────────────
   Everything here is behind `.rtm-tabbed`, which the strip's own inline script
   puts on the suite. Nothing below applies until it does, so a page whose
   JavaScript failed shows no strip and all three panels -- see
   templates/parts/tabs.php for why that decision is made in markup rather
   than in this file. */

.rtm-tabs {
    display: none;
}

/* The strip runs the width of the panel and the chosen tab is a pill inside
   it -- the arrangement the glyph filter rail already uses, and for the same
   reason: a segmented control has to say which segment you are in before it
   says anything else. */
.rtm-tabbed .rtm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    padding: 5px;
    background: var(--rtm-card-bg, #f4f4f5);
    border-radius: var(--rtm-stage-r, 16px);
}

/* Only one panel at a time, and the margin between them goes with the
   stacking it existed to space out. */
.rtm-tabbed .rtm-panel:not(.rtm-panel-active) {
    display: none;
}

.rtm-tabbed .rtm-panel + .rtm-panel {
    margin-top: 0;
}

/*
 * Scoped under `.rtm-suite`, like every other button in this file.
 *
 * These three shipped unscoped and a theme won the argument: `.rtm-tab` is one
 * class, and a theme styling `.woocommerce button` or `.entry-content button`
 * has two, so its colour landed on top and the strip greyed out again -- which
 * is what it was still doing after the contrast fix. Every other control here
 * carries the `.rtm-suite` prefix for exactly this reason.
 *
 * An explicit colour rather than opacity, too. Opacity fades whatever colour
 * wins, so a theme colour that was already pale came through paler still.
 */
.rtm-suite .rtm-tab {
    padding: 10px 22px;
    border: none;
    border-radius: calc(var(--rtm-stage-r, 16px) - 5px);
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rtm-tab-text, #52525b);
    cursor: pointer;
    transition: background .16s, color .16s;
}

.rtm-suite .rtm-tab:hover {
    color: var(--rtm-text, #18181b);
}

.rtm-suite .rtm-tab:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: -2px;
}

/* The same pair the glyph filter marks its chosen category with, because it
   is the same statement. A white pill on the near-white strip was the other
   half of the problem: two greys a shade apart, and nothing to tell you which
   tab you were reading. */
.rtm-suite .rtm-tab-active,
.rtm-suite .rtm-tab-active:hover {
    background: var(--rtm-ctrl-btn-bg, #18181b);
    color: var(--rtm-ctrl-btn-text, #ffffff);
}

@media (max-width: 480px) {
    .rtm-tabbed .rtm-tabs { gap: 2px; }
    .rtm-suite .rtm-tab { padding: 9px 12px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
    .rtm-suite .rtm-tab { transition: none; }
}
.rtm-suite {
    margin: 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--rtm-text, #18181b);
}

/* ══════════════════════════════════════════════════════════════════
   PREVIEW STAGE
══════════════════════════════════════════════════════════════════ */
.rtm-stage {
    position: relative;
    background: var(--rtm-stage-bg, #ffffff);
    color: var(--rtm-stage-text, #18181b);
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-stage-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    padding: var(--rtm-stage-p, 30px);
    transition: background .28s, color .28s, border-color .28s;
}
.rtm-sampler {
    font-family: "RTMFont", system-ui, serif;
    outline: none;
    word-break: break-word;
    cursor: text;
    transition: font-size .14s;

    /* Above the rules, which are painted into the same padding box. */
    position: relative;
}

/* ── Metric rules ────────────────────────────────────────────────────────── */

/*
 * The five horizontal rules behind the specimen: ascender, cap height, x
 * height, baseline and descender. Inset to the stage's padding box so the
 * lines run the full width of the surface rather than stopping at the text.
 */
.rtm-guides {
    position: absolute;
    inset: 0;

    /* The specimen underneath is editable and the rules sit on top of it;
       without this the caret cannot be placed by clicking. */
    pointer-events: none;

    /* A rule can fall outside the card: a face whose ascender exceeds its em
       square, drawn at a line height that does not leave room for it, puts the
       ascender above the stage entirely. Better to lose the line than to paint
       it across the toolbar, where it reads as a stray border. */
    overflow: hidden;
}

.rtm-guide {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    /* Centred on the line it marks, which is what `top` is set to. */
    transform: translateY(-50%);
    border-top: 1px dashed var(--rtm-guide-line, rgba(120, 120, 130, .38));
    font-size: var(--rtm-guide-fs, 9px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rtm-guide-text, rgba(120, 120, 130, .85));
}

/* The zero the other four are measured from, so it is drawn as a fact rather
   than as a guide. */
.rtm-guide-baseline {
    border-top-style: solid;
    border-top-color: var(--rtm-guide-base, rgba(120, 120, 130, .7));
}

.rtm-guide-lbl,
.rtm-guide-val {
    /* Lifted clear of its own rule, and given the stage's colour behind it so
       the line does not strike through the words. */
    background: var(--rtm-stage-bg, #fff);
    padding: 0 4px;
    line-height: 1.6;
}

.rtm-guide-val {
    font-variant-numeric: tabular-nums;
    opacity: .7;
}
/* ══════════════════════════════════════════════════════════════════
   GLYPHS PANEL
══════════════════════════════════════════════════════════════════ */
.rtm-glyphs-wrap {
    background: var(--rtm-bg, #fff);
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    padding: 24px;
}
.rtm-glyphs-grid {
    display: grid;

    /* A column count rather than a minimum cell width. A character map is a
       grid of squares and a foundry has an opinion about how many fit across
       it; auto-fill decides that from a number nobody chose. The breakpoints
       below set the var itself, so the Elementor control -- which writes it at
       higher specificity per device -- overrides all three. */
    grid-template-columns: repeat(var(--rtm-glyph-cols, 12), minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1024px) { .rtm-glyphs-grid { --rtm-glyph-cols: 8; } }
@media (max-width: 600px)  { .rtm-glyphs-grid { --rtm-glyph-cols: 5; } }
.rtm-suite .rtm-glyph {
    border: 1px solid var(--rtm-glyph-brd, var(--rtm-border, #e4e4e7));
    border-radius: 8px;
    padding: 12px 4px 7px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--rtm-glyph-bg, var(--rtm-card-bg, #fafafa));
    cursor: default;
    transition: border-color .14s, transform .14s;
}
.rtm-suite .rtm-glyph:hover { border-color: var(--rtm-glyph-brd-h, var(--rtm-accent, #18181b)); transform: translateY(-2px); }
.rtm-glyph-char { font-family: "RTMFont", serif; font-size: 22px; color: var(--rtm-glyph-char, var(--rtm-text, #18181b)); line-height: 1; }
.rtm-glyph-code { font-size: 7px; font-family: monospace; color: var(--rtm-glyph-code, #a1a1aa); letter-spacing: .02em; }

/* ══════════════════════════════════════════════════════════════════
   DETAILS PANEL
══════════════════════════════════════════════════════════════════ */
.rtm-details-wrap {
    background: var(--rtm-spec-bg, var(--rtm-bg, #fff));
    border: 1px solid var(--rtm-spec-border, var(--rtm-border, #e4e4e7));
    border-radius: var(--rtm-stage-r, 16px);
    padding: 28px;
}
/* The product's description, above the rows. Set at reading size rather than
   at the 13px the spec values use: this is the one thing on the panel that is
   read as sentences, and the rule under it is what keeps it from running into
   the datasheet. */
.rtm-details-desc {
    font-size: 14px; line-height: 1.7;
    color: var(--rtm-text, #18181b); opacity: .85;
    border-bottom: 1px solid var(--rtm-border, #e4e4e7);
    padding-bottom: 20px; margin-bottom: 20px;
}

/* wpautop wraps the paragraphs, and a bare `p` in a theme arrives with a top
   margin that would push the prose off its own top edge. The last one loses
   its bottom margin so the rule under the block sits where the padding put it
   rather than 1em below it. */
.rtm-details-desc p { margin: 0 0 1em; }
.rtm-details-desc p:last-child { margin-bottom: 0; }

/* Editor content is entitled to its own headings and lists, and they arrive
   at whatever size the theme sets them -- which on a product page is display
   size, and inside a spec panel is a shout. Brought back to the panel's own
   scale. */
.rtm-details-desc :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.2em 0 .4em;
    font-size: 15px;
    line-height: 1.4;
}

.rtm-details-desc :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.rtm-details-desc :is(ul, ol) {
    margin: 0 0 1em;
    padding-inline-start: 1.4em;
}

.rtm-details-desc li {
    margin: 0 0 .3em;
}
/* Spec rows: label left, value right, one rule between each. A datasheet
   reads down the left edge, so the labels stay in a column a customer can
   scan without reading the values. */
.rtm-spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rtm-spec-divider, var(--rtm-border, #e4e4e7));
}

.rtm-spec-lbl {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rtm-spec-label, #a1a1aa);
}

/*
 * `flex: 1` is what makes the alignment mean anything.
 *
 * The row is `justify-content: space-between`, so the value used to be a box
 * sized to its own text and shoved against the right edge -- and `text-align`
 * on a box that tight has nothing to align inside it. Given the rest of the
 * row to sit in, the three settings genuinely move the text: left brings it
 * back beside its label, right leaves it where it always was.
 *
 * Left is the shipped answer now. A datasheet is read down the values, and a
 * column ragged on its left because every value is a different length is a
 * column you cannot scan.
 */
.rtm-spec-val {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    text-align: var(--rtm-spec-align, left);
    color: var(--rtm-spec-value, var(--rtm-text, #18181b));
}
.rtm-fmt-note {
    font-size: 11px; font-style: italic;
    color: var(--rtm-spec-note, #71717a); margin: 6px 0 0;
}

/* ══════════════════════════════════════════════════════════════════
   STANDALONE PARTS (Elementor widgets)
   A suite holding one piece rather than all of them: no tab strip
   above it, so the panel it contains supplies its own top margin.
══════════════════════════════════════════════════════════════════ */
.rtm-suite-solo {
    margin: 0;
}

.rtm-suite-solo .rtm-panel {
    margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════
   SPECIMEN TOOLBAR
   One row above the stage, always visible. The controls used to hide
   behind a gear button, which meant a customer had to discover them
   before the specimen could do anything a static image cannot.
══════════════════════════════════════════════════════════════════ */
/*
 * Sized for the strip as it now ships -- three controls, not eleven.
 *
 * Every number below was tuned when this row held a name, three sliders, a
 * dropdown, four alignment buttons, OpenType, a dark toggle, a pencil and two
 * credit pills: at 9px labels and 110px tracks, that only just fitted on a
 * laptop. With three controls the same numbers read as fine print stranded at
 * the left edge of a very wide row, which is what they looked like.
 *
 * Wrapping still covers the other direction. A shop that switches all eleven
 * back on gets a taller row rather than a cramped one, and that is the right
 * trade -- a control you cannot read is worse than a row two lines deep.
 */
.rtm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
    margin-bottom: 26px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.rtm-toolbar-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--rtm-text, #18181b);
}

.rtm-tool {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rtm-tool-lbl {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--rtm-stage-label, #a1a1aa);
}

/* The readout is tabular so the row does not shuffle sideways as the
   number goes from 9px to 300px while a slider is being dragged. */
.rtm-tool-val {
    min-width: 48px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rtm-text, #18181b);
}

/* A share of the row rather than a fixed 110px, so three sliders on a wide
   screen use the space instead of huddling at one end of it. `flex` needs
   the parent to be a flex item that can grow, which `.rtm-tool` is. */
.rtm-tool-slider {
    flex: 1 1 220px;
    max-width: 340px;
}

.rtm-tool-slider input[type="range"] {
    flex: 1 1 auto;
    min-width: 90px;
    accent-color: var(--rtm-accent, #18181b);
}

.rtm-tool-select {
    padding: 5px 8px;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 6px;
    background: var(--rtm-bg, #fff);
    font-size: 12px;
    color: var(--rtm-text, #18181b);
}

/* ── The chevron ─────────────────────────────────────────────────────────────
 *
 * Ours, not the engine's.
 *
 * A native select's arrow cannot be moved. Blink sets the inline-end padding
 * itself to reserve the strip it paints the arrow in and overrides whatever
 * the author asked for, so the mark sits jammed against the border and no
 * amount of `padding-inline-end` shifts it. `appearance: none` takes that
 * strip back, and the chevron below is drawn where we say -- two borders on a
 * square turned 45°, the same way the admin box draws its own.
 *
 * On the wrapper rather than the select: a select cannot carry a pseudo
 * element. It is the last thing in every one of these wrappers, so the
 * wrapper's inline end is also the control's, and `pointer-events: none`
 * keeps the chevron from swallowing the click that opens the list.
 */
.rtm-suite .rtm-tool-picker {
    position: relative;
}

/*
 * Both scoped to the wrapper, and neither is decoration.
 *
 * `appearance: none` on a select with no chevron drawn over it is a dropdown
 * with nothing to say it is one, so the two belong to the same selector: a
 * `.rtm-tool-select` an add-on renders outside a picker keeps the engine's
 * arrow rather than losing every mark it had.
 *
 * The three-class selector is also what makes the padding stick. The samples
 * dropdown further down sets `padding` as a shorthand, which would reset an
 * inline-end declared at two classes whatever order they were written in.
 */
.rtm-suite .rtm-tool-picker .rtm-tool-select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 30px;
}

.rtm-suite .rtm-tool-picker::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: 13px;
    width: 7px;
    height: 7px;
    margin-top: -6px;

    /* Physical, not logical. The pair of borders is turned into a chevron by
       the rotation, and a chevron points down in every writing direction --
       `border-inline-end` would flip it to point down-left in RTL. */
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    pointer-events: none;

    /* The select's own text colour, not the wrapper's inherited one: the mark
       belongs to the control it stands in, and a shop that recolours the
       dropdown's type would otherwise leave its arrow behind. */
    color: var(--rtm-select-text, var(--rtm-text, #18181b));
}

/*
 * At full strength once the control is being used.
 *
 * The border goes to the accent on hover and on focus, and a chevron left at
 * 55% of a quiet grey beside it reads as switched off -- the one part of the
 * control that did not notice it was being pointed at. It takes the accent
 * too, at full opacity: the whole box lights up together.
 *
 * `:focus-within` rather than `:focus` because the thing focused is the
 * select and the pseudo element belongs to its wrapper. It is also what
 * covers the open list -- a select keeps focus while its options are down.
 */
.rtm-suite .rtm-tool-picker:hover::after,
.rtm-suite .rtm-tool-picker:focus-within::after {
    opacity: 1;
    color: var(--rtm-accent, #18181b);
}

/*
 * The picker for the shipped sample lines.
 *
 * `0 1 240px` against the field's `1 1 260px`: it may shrink when the row is
 * tight and never grows, so the slack in a wide toolbar goes to the field
 * where somebody is actually typing. The options are whole sentences, so the
 * closed select has to be allowed to cut one off -- `min-width: 0` is what
 * lets it, and without it the longest line sets the width of the control and
 * pushes everything after it off the row.
 */
.rtm-tool-samples {
    flex: 0 1 240px;
    min-width: 0;
}

.rtm-suite .rtm-select-samples {
    width: 100%;
    min-width: 0;

    /* The text field's own padding and leading, so the two controls beside
       each other are one height rather than nearly one. */
    padding: 7px 10px;
    border-radius: var(--rtm-icon-r, 8px);
    font-size: 12px;
    line-height: 1.5;

    /* A select truncates its own closed value in every engine that matters;
       these are here for the option list, which Firefox will otherwise let
       run as wide as the longest line in it. The rows themselves are cut to
       length in PHP -- see Toolbar::sample_label() -- because no stylesheet
       reaches inside the panel a native dropdown opens. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * The dropdowns get the text field's focus treatment, for its reasons.
 *
 * Clicking one is a click on a form control, and a theme's `select:focus`
 * halo swelled these the same way it swelled the field. One line, the one
 * already drawn, in the accent colour: the border a select has at rest is
 * also the whole of its focus state, so nothing about the control's size
 * changes when it is opened.
 *
 * An inset ring is what this is not. The engine draws a select's chevron in
 * the strip just inside the border, and a ring drawn there runs through it --
 * the arrow comes out looking cropped, and the two lines together read as a
 * border twice as thick as the one beside it on the text field.
 */
.rtm-suite .rtm-tool-select:hover {
    border-color: var(--rtm-accent, #18181b);
}

.rtm-suite .rtm-tool-select:focus,
.rtm-suite .rtm-tool-select:focus-visible {
    outline: none;
    border-color: var(--rtm-accent, #18181b);
    box-shadow: none;
}

/*
 * The field the specimen is typed into.
 *
 * It takes the row rather than a fixed width, and takes it from the far side:
 * `flex: 1 1 260px` against the sliders' `1 1 220px` means a wide toolbar
 * spends its slack here, which is right -- a slider longer than about 340px
 * is no easier to aim, and a text field is easier to read the longer it is.
 * Below its 260px basis it wraps to a line of its own, full width, instead of
 * squeezing the size readout off the end of the row.
 */
.rtm-tool-text {
    flex: 1 1 260px;
    min-width: 160px;
}

.rtm-suite .rtm-tool-input {
    width: 100%;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: var(--rtm-icon-r, 8px);
    background: var(--rtm-bg, #fff);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    color: var(--rtm-text, #18181b);

    /* Stated, not merely left out: a theme that transitions every input on
       the site would otherwise fade our border and our ring on every click.
       The states below differ by one colour and a ring drawn inside the box,
       and both should simply be there. */
    box-shadow: none;
    transition: none;
}

.rtm-suite .rtm-tool-input:hover {
    border-color: var(--rtm-accent, #18181b);
}

/*
 * One line, and it is the border the field already has.
 *
 * Three things used to happen when this field was clicked: our border went to
 * the accent, `:focus-visible` added a 2px outline a pixel outside it -- a
 * browser matches that on a mouse click in a text field, not only on a tab --
 * and whatever the theme sets on `input:focus` painted its own halo on top,
 * usually a transitioned box-shadow. The field appeared to swell.
 *
 * The border it already has is the whole indicator now, in the accent colour
 * -- one line, the same line, so nothing on the row moves and the field is
 * the same weight as the dropdown beside it. `outline: none` and
 * `box-shadow: none` stated at this specificity are what keep the browser's
 * ring and the theme's halo out of it. `:focus` and `:focus-visible` are
 * given the same treatment deliberately -- the distinction between them is
 * about who is shown the state, and here everybody is.
 */
.rtm-suite .rtm-tool-input:focus,
.rtm-suite .rtm-tool-input:focus-visible {
    outline: none;
    border-color: var(--rtm-accent, #18181b);
    box-shadow: none;
}

/*
 * Held at the far end of the row.
 *
 * With the text field above present this is already where the button lands:
 * that field grows into every spare pixel, so there is nothing left for Reset
 * to sit in but the right edge. The auto margin is for the other case -- a
 * placement that switched the field off, where without it Reset would huddle
 * against the last slider in the middle of an empty row.
 *
 * Auto margins on a wrapping flex row act within the line the element lands
 * on, which is the behaviour worth having: a toolbar that has wrapped puts
 * Reset at the right of whatever line it is on rather than dragging it back
 * up. `.rtm-toolbar-meta` asks for the same margin, and the two do not fight
 * -- flexbox shares free space between auto margins, so the pills and the
 * button land apart with the button last, which is the order they are in.
 */
.rtm-suite .rtm-tool-reset-all {
    margin-inline-start: auto;
    padding-inline: 12px;
}

.rtm-suite .rtm-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--rtm-text, #18181b);
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
}

/* Hover and active are set with the resting state, further down. */

.rtm-tool-icon {
    padding: 6px 8px;
}

/* Pushed to the far end of the row: these are facts about the typeface,
   not controls, and they should not sit among things that click. */
.rtm-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.rtm-pill {
    padding: 5px 12px;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 999px;
    font-size: 11px;
    color: #71717a;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   CHARACTER MAP
   A filter rail beside the sets, so "does it have accents" is one
   click rather than a scroll through everything.
══════════════════════════════════════════════════════════════════ */
/* What the panel is, and how much of it there is. Above the rail rather
   than inside it: the total describes the whole map, and a count sitting
   in a column of category counts reads as one more category. */
.rtm-glyph-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
}

/* The rule switched off. The padding goes with it -- it was the gap
   between the words and the line, and there is no line now. */
.rtm-glyph-head-bare {
    padding-bottom: 0;
    border-bottom: none;
}

/* Nothing left in it but the count. A row holding one pill does not need
   the 24px that separated a two-line heading from the map. */
.rtm-glyph-head:not(:has(.rtm-glyph-head-title)):not(:has(.rtm-glyph-head-sub)) {
    margin-bottom: 12px;
}

.rtm-glyph-head-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--rtm-text, #18181b);
}

.rtm-glyph-head-sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--rtm-stage-label, #71717a);
}

.rtm-glyph-total {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--rtm-card-bg, #f4f4f5);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rtm-text, #18181b);
}

.rtm-glyphs-wrap {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.rtm-glyph-count {
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .6;
}

.rtm-glyph-sets {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/*
 * The caption above each group -- "Uppercase 26", "Ligatures 9".
 *
 * `text-transform: uppercase` used to be forced here. It was a reasonable
 * small-caps label treatment everywhere except on this plugin, where the group
 * called Lowercase announced itself as LOWERCASE -- on a page whose entire
 * subject is letterforms, which makes it read as a bug rather than as a style.
 *
 * The tracking and weight stay, because those are what make it a label. The
 * case is left as the words were written, and the Set Heading typography
 * control can put the capitals back for a shop that wants them.
 */
.rtm-glyph-set-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--rtm-stage-label, #a1a1aa);
}

@media (max-width: 782px) {
    .rtm-glyphs-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .rtm-toolbar-meta {
        margin-inline-start: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════
   GLYPH INSPECTOR
   One character drawn at size, with the typeface's own vertical
   metrics ruled across it. A 22px cell in the map answers "is it in
   there"; this answers how the letter sits -- which is a comparison
   you can only make against the lines it was drawn to.
══════════════════════════════════════════════════════════════════ */

/* The suite ships its own, rather than trusting every theme to have
   defined it. Two hundred glyph cells each carry their character's
   Unicode name for a screen reader, and on a theme without this rule
   the character map would print all two hundred of them. */
.rtm-suite .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;
}

.rtm-inspector {
    margin: 0 0 24px;
    padding: 18px 20px 16px;
    background: var(--rtm-stage-bg, #fff);
    color: var(--rtm-stage-text, #18181b);
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-stage-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    transition: background .28s, color .28s, border-color .28s;
}

/* `hidden` alone loses to the display below on the elements inside it,
   and the panel is toggled by that attribute rather than by a class. */
.rtm-inspector[hidden] {
    display: none;
}

.rtm-insp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.rtm-insp-id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* The full Unicode name, which for some characters is a sentence.
   Wrapping it is better than truncating a name whose distinguishing
   half is at the end -- "Latin Small Letter N Preceded By Apostrophe"
   is only itself after the fourth word. */
.rtm-insp-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}

.rtm-insp-code {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .06em;
    opacity: .55;
}

.rtm-insp-tools {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.rtm-suite .rtm-insp-btn,
.rtm-suite .rtm-insp-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 7px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .13s, border-color .13s, opacity .13s;
}

.rtm-suite .rtm-insp-btn:hover {
    border-color: var(--rtm-accent, #18181b);
}

/* No padding, deliberately. The script sizes the viewBox from this
   element's own clientWidth/clientHeight so that one font unit maps to
   the same number of pixels in both directions -- which is what lets
   the HTML label rail line up with rules drawn in font units. Padding
   here would put the SVG's box and the rail's coordinates on two
   different origins. */
.rtm-insp-stage {
    position: relative;
    height: clamp(240px, 40vh, 420px);
    overflow: hidden;
}

.rtm-insp-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rtm-insp-glyph {
    fill: currentColor;
}

.rtm-insp-rule {
    stroke: var(--rtm-accent, #18181b);
    opacity: .55;
}

/* The baseline is not one measurement among five -- it is the zero the
   other four are stated against, so it is drawn as a line rather than
   as a dash. */
.rtm-insp-rule-base {
    stroke: currentColor;
    stroke-dasharray: none !important;
    opacity: .35;
}

.rtm-insp-rail {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rtm-insp-tick {
    position: absolute;
    inset-inline-end: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 4px 2px 8px;
    /* Centred on its rule, which is what `top` is set to. */
    transform: translateY(-50%);
    background: var(--rtm-stage-bg, #fff);
    white-space: nowrap;
}

.rtm-insp-tick[hidden] {
    display: none;
}

.rtm-insp-tick-lbl {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .5;
}

.rtm-insp-tick-val {
    font-family: monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--rtm-accent, #18181b);
}

.rtm-insp-note {
    margin: 12px 0 0;
    font-size: 10px;
    letter-spacing: .04em;
    line-height: 1.7;
    opacity: .5;
}

/* A glyph cell is a button now, so it arrives with the browser's own
   control styling to undo. */
.rtm-suite .rtm-glyph {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Without the inspector the cell is a `div`, not a button: nothing to open,
   so nothing to promise. The pointer goes with the promise. */
.rtm-suite div.rtm-glyph {
    cursor: default;
}

.rtm-glyph:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

.rtm-glyph.rtm-glyph-chosen {
    border-color: var(--rtm-glyph-on-brd, var(--rtm-accent, #18181b));
    background: var(--rtm-glyph-on-bg, var(--rtm-bg, #fff));
    box-shadow: inset 0 0 0 1px var(--rtm-glyph-on-brd, var(--rtm-accent, #18181b));
}

@media (max-width: 782px) {
    .rtm-insp-stage {
        height: clamp(200px, 34vh, 300px);
    }

    /* The rail overlaps the letter on a narrow screen, so the labels
       drop and only the numbers stay beside their rules. */
    .rtm-insp-tick-lbl {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   INSPECTOR PLACEMENT
   Above the character map, or beside it. Beside is worth having: the
   map is long, and an inspector that scrolls away is one you have to
   scroll back to after every glyph you click.
══════════════════════════════════════════════════════════════════ */
/* The card's track is a variable so the Glyph Set widget's Detail Panel
   Width can write it; the grid is `1fr` and takes whatever is left,
   which is why that control needs no second number beside it. */
.rtm-panel.rtm-insp-left,
.rtm-panel.rtm-insp-right {
    display: grid;
    grid-template-columns: var(--rtm-insp-col, minmax(260px, 34%)) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* The panel's heading is not one of the two columns: it names the whole map,
   card included, so it takes the row above them. Left to auto-placement it
   took the first cell itself and pushed the card into the second -- which
   put a card asked for on the left on the right, under a heading a third of
   the width of what it heads, with the grid stranded in a narrow column
   underneath and the rest of the row empty. */
.rtm-panel.rtm-insp-left > .rtm-glyph-head,
.rtm-panel.rtm-insp-right > .rtm-glyph-head {
    grid-column: 1 / -1;
}

/* Source order puts the inspector first, which is what a screen reader
   and a narrow screen both want. `order` moves it visually without
   moving it in the document. */
.rtm-panel.rtm-insp-right .rtm-inspector {
    order: 2;
}

.rtm-panel.rtm-insp-left .rtm-inspector,
.rtm-panel.rtm-insp-right .rtm-inspector {
    position: sticky;
    top: 20px;
    margin-bottom: 0;
}

/* Above the map, pinned.
 *
 * This arrangement was dropped once because the card scrolled away after the
 * first row of glyphs, which made it useless exactly when the map was long
 * enough to need it. Sticky is what fixes that, and it is why the option is
 * back: the card holds the top of the screen while the grid runs underneath.
 *
 * The stage is shorter here than in the side panels. A band across the full
 * width does not need the height a column does, and a tall one pinned to the
 * top of a phone would leave nothing of the map to look at. */
.rtm-panel.rtm-insp-top .rtm-inspector {
    position: sticky;
    top: 20px;
    z-index: 2;
}

.rtm-panel.rtm-insp-top .rtm-insp-stage {
    height: clamp(150px, 24vh, 240px);
}
/* Beside the map the card is a column rather than a band, so the stage
   inside it is squarer and the labels have less room. */
.rtm-panel.rtm-insp-left .rtm-insp-stage,
.rtm-panel.rtm-insp-right .rtm-insp-stage {
    height: clamp(200px, 30vh, 300px);
}

/* Smaller, not gone. A bare 703 beside a dashed rule is a number without a
   claim; the label is the half that says what was measured. */
.rtm-panel.rtm-insp-left .rtm-insp-tick-lbl,
.rtm-panel.rtm-insp-right .rtm-insp-tick-lbl {
    font-size: 8px;
    letter-spacing: .04em;
}

/* The map's own rail and grid share what is left, so on a side layout
   the rail goes above its sets rather than stealing 190px of it. */
.rtm-panel.rtm-insp-left .rtm-glyphs-wrap,
.rtm-panel.rtm-insp-right .rtm-glyphs-wrap {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {
    /* One column, inspector back on top -- which is where the source
       order already has it, so the override is all that is needed. */
    .rtm-panel.rtm-insp-left,
    .rtm-panel.rtm-insp-right {
        display: block;
    }

    .rtm-panel.rtm-insp-left .rtm-inspector,
    .rtm-panel.rtm-insp-right .rtm-inspector {
        position: static;
        margin-bottom: 24px;
    }

}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.rtm-toolbar {
    background: var(--rtm-toolbar-bg, transparent);
    border: var(--rtm-toolbar-bw, 0) solid var(--rtm-toolbar-border, transparent);
    border-radius: var(--rtm-toolbar-r, 0);
    padding: var(--rtm-toolbar-p, 0);
}

/* ── Sliders ─────────────────────────────────────────────────────────────── */

/*
 * `accent-color` used to do all of this in one line, and it is genuinely the
 * right tool -- until somebody wants the filled part and the thumb to differ,
 * which is what a foundry asks for the moment it has a brand colour.
 *
 * The fill is a gradient stop rather than `::-moz-range-progress`, because
 * WebKit has no equivalent of that pseudo-element. `--rtm-fill` is a
 * percentage the script writes on every input event; with no script it sits at
 * its declared 0% and the track simply reads as empty rather than broken.
 */
.rtm-suite .rtm-tool-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;

    /* `width: 110px` used to live here and it beat the flex sizing above by
       specificity, which pinned every track to the same 110px however much
       room the row had. Auto lets the flex basis decide. */
    width: auto;
    height: var(--rtm-slider-h, 6px);
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--rtm-slider-fill, #18181b) 0 var(--rtm-fill, 0%),
        var(--rtm-slider-track, #e4e4e7) var(--rtm-fill, 0%) 100%
    );
    cursor: pointer;
    outline: none;
}

.rtm-suite .rtm-tool-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--rtm-slider-thumb-size, 16px);
    height: var(--rtm-slider-thumb-size, 16px);
    border-radius: 50%;
    background: var(--rtm-slider-thumb, #18181b);
    border: 2px solid var(--rtm-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.rtm-suite .rtm-tool-slider input[type="range"]::-moz-range-thumb {
    width: var(--rtm-slider-thumb-size, 16px);
    height: var(--rtm-slider-thumb-size, 16px);
    border-radius: 50%;
    background: var(--rtm-slider-thumb, #18181b);
    border: 2px solid var(--rtm-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
}

/* Firefox paints its own track over the element background. */
.rtm-suite .rtm-tool-slider input[type="range"]::-moz-range-track {
    background: transparent;
}

/* ── Transform dropdown ──────────────────────────────────────────────────── */

.rtm-suite .rtm-tool-select {
    background: var(--rtm-select-bg, var(--rtm-bg, #fff));

    /* Three writers, in the order they should win. The global design centre
       sets `--rtm-select-border`; a widget's Elementor border group writes a
       real `border-color` at a higher specificity and beats it, which is the
       right way round; and with neither, the core Border Color applies. The
       property was dropped once, on the grounds that nothing could write it --
       true while Elementor was the only writer, and no longer. */
    border-color: var(--rtm-select-border, var(--rtm-border, #e4e4e7));
    color: var(--rtm-select-text, var(--rtm-text, #18181b));

    /* As on the text field, and for the same reason: the focus states are a
       colour and a ring drawn inside the box, not something to fade into. */
    box-shadow: none;
    transition: none;
}/* ── Icon buttons ────────────────────────────────────────────────────────── *//*
 * One rule for the alignment icons, the OpenType button, the dark toggle and
 * the edit pencil. They are the same control wearing different glyphs, and
 * styling them apart is how three of the four end up looking like a mistake.
 *//*
 * No box at rest.
 *
 * Eight grey tiles across the top of a specimen compete with the one thing on
 * the page worth looking at. The controls are still controls -- they take a
 * background on hover and on the active state, which is where the affordance
 * is actually needed -- but a toolbar nobody is touching now reads as a line
 * of labels rather than as a strip of buttons.
 *//*
 * The `:focus` copies are not decoration -- they are what keeps this rule.
 *
 * Elementor's kit styles `button:hover, button:focus` as one rule at (0,2,1).
 * The hover half loses to the `:hover` rule below, which is (0,3,0); the focus
 * half had nothing to beat, so it outranked this (0,2,0) one and painted the
 * kit's accent across whichever control was last clicked -- and left it there,
 * because focus stays behind after the pointer has gone. Naming :focus here
 * lifts this to (0,3,0) without restating a single value, and the hover and
 * active rules that follow still win when they apply.
 */
.rtm-suite .rtm-tool-btn,
.rtm-suite .rtm-tool-btn:focus {
    min-width: var(--rtm-icon-size, 28px);
    height: var(--rtm-icon-size, 28px);
    border-radius: var(--rtm-icon-r, 6px);
    background: var(--rtm-icon-bg, transparent);
    color: var(--rtm-icon-fg, #52525b);

    /* Transparent rather than absent. The width is reserved either way, so a
       shop that sets a hover border gets one without the row of buttons
       shifting a pixel the moment a pointer crosses it. */
    border: 1px solid var(--rtm-icon-border, transparent);
}/*
 * No box in any state, so the colour has to carry both of them.
 *
 * Hover darkens toward the body text; active takes the accent. That is enough
 * to tell the two apart and enough to read "this one is on" at a glance, and
 * it holds the toolbar to one visual weight instead of letting a tile appear
 * under whichever control the pointer happens to be over.
 */
.rtm-suite .rtm-tool-btn:hover {
    background: var(--rtm-icon-bg-h, transparent);
    color: var(--rtm-icon-fg-h, var(--rtm-text, #18181b));
    border-color: var(--rtm-icon-border-h, transparent);
}/* Keyboard focus still has to be visible. Suppressing the kit's focus fill
   removed the only thing marking it, and `:focus-visible` puts a ring back
   for the visitors who need one without showing it to everybody who clicks. */
.rtm-suite .rtm-tool-btn:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

/* ── Credit badges ───────────────────────────────────────────────────────── */

.rtm-suite .rtm-pill {
    background: var(--rtm-badge-bg, transparent);

    /* Same three writers as the transform dropdown above, same order: the
       design centre's property, beaten by a widget's Elementor border group,
       falling back to the core Border Color. */
    border: 1px solid var(--rtm-badge-border, var(--rtm-border, #e4e4e7));
    color: var(--rtm-badge-text, var(--rtm-stage-label, #a1a1aa));

    /* Declared here rather than left to the hover rules, which are generated
       by Elementor only when somebody actually sets a hover colour -- there
       would be nothing to put a transition on until then. */
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

/* ── Category tabs ───────────────────────────────────────────────────────── */

/*
 * The counter beside each label -- "26", "165". A token of its own because it
 * is a different kind of thing from the label it sits next to: one names the
 * group, the other measures it, and a foundry usually wants the measurement
 * quieter.
 */
.rtm-suite .rtm-glyph-count {
    background: var(--rtm-count-bg, transparent);
    color: var(--rtm-count-text, inherit);
    border-radius: var(--rtm-count-r, 4px);
}

[dir="rtl"] .rtm-suite .rtm-tool-slider input[type="range"] {
  background: linear-gradient(
        to left,
        var(--rtm-slider-fill, #18181b) 0 var(--rtm-fill, 0%),
        var(--rtm-slider-track, #e4e4e7) var(--rtm-fill, 0%) 100%
    );
}