/*
 * com_ottevents — member screens (spec 6.1). Phone-first at 375 x 812.
 *
 * Every surface is a card painted from the theme's matched triple
 * --ottcb-bg / --ottcb-text / --ottcb-accent (the fallbacks are the Dungeon
 * default), so it reads on all 12 themes. Selectors are prefixed
 * `#sp-component .ottevents` to out-specify Justice's
 * `#sp-component .card-body` rules (the media/com_ottwelcome pattern).
 *
 * Layout rules from the measurements (spec 6.1 M1-M10):
 *   cards full width, never side by side below 992 px;
 *   every control at least 44 px tall; button labels never wrap;
 *   rows wrap instead of scrolling sideways; time pairs split the row;
 *   no fixed bottom bar (Quick Exit, Ask OTT and the theme switcher own the
 *   bottom 56 px), and every page ends with 72 px of padding.
 *
 * @copyright (c) 2026 Off The Traxx
 */

#sp-component .ottevents {
    color: var(--ottcb-text, #c9b896);
    font-size: 14px;
    line-height: 1.7;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 72px;
    overflow-wrap: anywhere;
}

#sp-component .ottevents *,
#sp-component .ottevents *::before,
#sp-component .ottevents *::after {
    box-sizing: border-box;
}

#sp-component .ottevents .ottev-card {
    display: block;
    width: 100%;
    background: var(--ottcb-bg, #15110d) !important;
    color: var(--ottcb-text, #c9b896) !important;
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-radius: 10px;
    padding: 16px;
    margin: 0 0 12px;
}

#sp-component .ottevents p,
#sp-component .ottevents li,
#sp-component .ottevents span,
#sp-component .ottevents strong,
#sp-component .ottevents h1,
#sp-component .ottevents h2,
#sp-component .ottevents h3 {
    color: var(--ottcb-text, #c9b896) !important;
}

#sp-component .ottevents p {
    margin: 0 0 8px;
}

#sp-component .ottevents a {
    color: var(--ottcb-accent, #d49656) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#sp-component .ottevents .ottev-h1 {
    font-family: Cinzel, Georgia, serif;
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 8px;
}

#sp-component .ottevents .ottev-h2 {
    font-family: Cinzel, Georgia, serif;
    font-size: 19px;
    line-height: 1.3;
    margin: 20px 0 10px;
}

#sp-component .ottevents .ottev-h3 {
    font-family: Cinzel, Georgia, serif;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

#sp-component .ottevents .ottev-eyebrow,
#sp-component .ottevents .ottev-small,
#sp-component .ottevents .ottev-helper,
#sp-component .ottevents .ottev-note,
#sp-component .ottevents .ottev-footer,
#sp-component .ottevents .ottev-timeline,
#sp-component .ottevents .ottev-place-sub,
#sp-component .ottevents .ottev-card-meta,
#sp-component .ottevents .ottev-row-status,
#sp-component .ottevents .ottev-reminders {
    font-size: 13px;
}

#sp-component .ottevents .ottev-eyebrow {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 4px;
    opacity: 0.85;
}

#sp-component .ottevents .ottev-when {
    font-size: 15px;
}

#sp-component .ottevents .ottev-where-line,
#sp-component .ottevents .ottev-where-note,
#sp-component .ottevents .ottev-where-keep {
    display: block;
}

#sp-component .ottevents .ottev-past {
    opacity: 0.65;
}

#sp-component .ottevents .ottev-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- chips */
#sp-component .ottevents .ottev-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
}

#sp-component .ottevents .ottev-chip {
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    padding: 2px 8px;
    border: 1px solid var(--ottcb-accent, #d49656);
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons (R43) */
#sp-component .ottevents .ottev-form {
    display: inline-block;
    margin: 0;
}

#sp-component .ottevents .ottev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: Cinzel, Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid var(--ottcb-accent, #d49656);
}

#sp-component .ottevents .ottev-btn-primary {
    background: var(--ottcb-accent, #d49656) !important;
    color: var(--ottcb-bg, #15110d) !important;
}

#sp-component .ottevents .ottev-btn-secondary {
    background: transparent !important;
    color: var(--ottcb-accent, #d49656) !important;
}

#sp-component .ottevents .ottev-btn-disabled {
    background: transparent !important;
    color: var(--ottcb-text, #c9b896) !important;
    border-color: rgba(128, 128, 128, 0.5);
    cursor: not-allowed;
    opacity: 0.8;
}

#sp-component .ottevents .ottev-btn:focus-visible,
#sp-component .ottevents .ottev-textbtn:focus-visible,
#sp-component .ottevents a:focus-visible {
    outline: 3px solid var(--ottcb-accent, #d49656);
    outline-offset: 2px;
}

#sp-component .ottevents .ottev-textbtn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    background: none !important;
    border: 0;
    color: var(--ottcb-accent, #d49656) !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

#sp-component .ottevents .ottev-textlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

#sp-component .ottevents .ottev-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Priority Seating row: "Email again" and "Remove" side by side (0.1.3). */
#sp-component .ottevents .ottev-pr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#sp-component .ottevents .ottev-panel-action .ottev-form,
#sp-component .ottevents .ottev-panel-action .ottev-btn {
    width: 100%;
}

/* Two answers on one row (0.2.1, spec 6.7.1): I'm going · Maybe, Join the
   waitlist · Maybe, or a button beside a text button. Measured at 375 px
   (the panel's row is 309 px): "Join the waitlist" 191 + "Maybe" 110 + the
   8 px gap fit on one row, as do the other pairs; nothing wraps a label
   (buttons are nowrap). If a pair ever does not fit, each button takes a
   full row. Text buttons keep their own width beside a button. */
#sp-component .ottevents .ottev-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#sp-component .ottevents .ottev-panel-actions > * {
    flex: 1 1 auto;
}

#sp-component .ottevents .ottev-panel-actions > .ottev-textbtn,
#sp-component .ottevents .ottev-panel-actions > .ottev-form-text {
    flex: 0 0 auto;
}

#sp-component .ottevents .ottev-panel-actions > .ottev-form > .ottev-btn,
#sp-component .ottevents .ottev-panel-actions > .ottev-btn {
    width: 100%;
}

/* ---------------------------------------------------------------- flash, confirm, alerts */
#sp-component .ottevents .ottev-flash {
    border-left: 4px solid var(--ottcb-accent, #d49656);
}

#sp-component .ottevents .ottev-confirm {
    border: 2px solid var(--ottcb-accent, #d49656);
}

#sp-component .ottevents .ottev-alert,
#sp-component .ottevents .ottev-banner {
    border-left: 4px solid var(--ottcb-accent, #d49656);
}

/* ---------------------------------------------------------------- Your place */
#sp-component .ottevents .ottev-place-head {
    font-size: 17px;
    margin: 0 0 4px;
}

#sp-component .ottevents .ottev-place-block + .ottev-place-block {
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    margin-top: 12px;
    padding-top: 12px;
}

#sp-component .ottevents .ottev-reminders {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0 0;
}

/* 0.2.4: what turning reminders off also stops (R78) */
#sp-component .ottevents .ottev-reminders-note {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- pool panels (6.4.4) */
#sp-component .ottevents .ottev-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 6px;
}

#sp-component .ottevents .ottev-count {
    font-size: 13px;
    white-space: nowrap;
}

#sp-component .ottevents .ottev-rows {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

#sp-component .ottevents .ottev-row {
    padding: 6px 0;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

#sp-component .ottevents .ottev-row-main,
#sp-component .ottevents .ottev-shadow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 12px;
}

#sp-component .ottevents .ottev-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#sp-component .ottevents .ottev-row-time {
    font-size: 15px;
    font-weight: 700;
}

#sp-component .ottevents .ottev-shadow {
    padding-left: 16px;
    margin-top: 4px;
}

#sp-component .ottevents .ottev-who-details summary {
    list-style: none;
}

#sp-component .ottevents .ottev-who-details summary::-webkit-details-marker {
    display: none;
}

#sp-component .ottevents .ottev-manage {
    font-size: 13px;
    margin: 8px 0 0;
}

#sp-component .ottevents .ottev-description p {
    margin: 0;
}

/* ---------------------------------------------------------------- calendar list (6.3) */
#sp-component .ottevents .ottev-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

#sp-component .ottevents .ottev-filter {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ottcb-accent, #d49656);
    border-radius: 999px;
    text-decoration: none;
}

#sp-component .ottevents .ottev-filter.is-current {
    background: var(--ottcb-accent, #d49656) !important;
    color: var(--ottcb-bg, #15110d) !important;
}

#sp-component .ottevents .ottev-cards {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sp-component .ottevents a.ottev-event-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 72px;
    text-decoration: none !important;
    color: var(--ottcb-text, #c9b896) !important;
}

#sp-component .ottevents .ottev-tile {
    flex: 0 0 52px;
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--ottcb-accent, #d49656);
    border-radius: 8px;
    padding: 4px 0;
    font-size: 12px;
    line-height: 1.3;
}

#sp-component .ottevents .ottev-tile strong {
    font-size: 20px;
}

#sp-component .ottevents .ottev-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#sp-component .ottevents .ottev-card-title {
    font-size: 16px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#sp-component .ottevents .ottev-list-footer {
    font-size: 13px;
    margin-top: 12px;
}

#sp-component .ottevents .ottev-list-footer a,
#sp-component .ottevents .ottev-empty a,
#sp-component .ottevents .ottev-note a,
#sp-component .ottevents .ottev-small a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* The badge line (com_ottlms BadgeBannerService, 0.2.2) is an inline span in
   a note, and its class contains "-banner". Justice's catch-all for cream
   containers, #sp-component [class*="-banner"], gives it a background, a
   border with a 3 px accent and 14px 18px padding, all !important. On an
   inline span that box breaks at every line wrap, and its vertical padding
   runs over the lines around it: at 375 px a border ran through the first
   line (0.2.2 test run, 375 px sweep). The line reads as the panel's other
   notes do; this selector (one ID, two classes) beats the template's. */
#sp-component .ottevents .ottlms-badge-banner {
    background: none !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0 !important;
    color: inherit !important;
}

/* ---------------------------------------------------------------- the event page grid (6.1: two columns from 992 px) */
@media (min-width: 992px) {
    #sp-component .ottevents .ottev-grid {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        column-gap: 24px;
        align-items: start;
    }

    #sp-component .ottevents .ottev-grid > .ottev-head {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    #sp-component .ottevents .ottev-grid > .ottev-details {
        grid-column: 1;
        grid-row: 2 / span 12;
    }

    #sp-component .ottevents .ottev-grid > :not(.ottev-head):not(.ottev-details) {
        grid-column: 2;
    }
}

/* ---------------------------------------------------------------- organizer screens (7.14-7.18) */
#sp-component .ottevents .ottev-sub {
    font-size: 13px;
    margin: 0 0 6px;
}

#sp-component .ottevents .ottev-summary,
#sp-component .ottevents .ottev-door-counts {
    font-size: 15px;
    margin: 0 0 8px;
}

#sp-component .ottevents .ottev-h2-card {
    margin-top: 0;
}

#sp-component .ottevents .ottev-flag p {
    margin: 0 0 4px;
}

#sp-component .ottevents .ottev-gl-main {
    font-size: 16px;
}

#sp-component .ottevents .ottev-gl-sub {
    padding-left: 16px;
}

#sp-component .ottevents .ottev-menu {
    position: relative;
    flex: 0 0 auto;
}

#sp-component .ottevents .ottev-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--ottcb-accent, #d49656);
    border-radius: 8px;
    color: var(--ottcb-accent, #d49656) !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

#sp-component .ottevents .ottev-menu-btn::-webkit-details-marker,
#sp-component .ottevents .ottev-cancelled > summary::-webkit-details-marker,
#sp-component .ottevents .ottev-why > summary::-webkit-details-marker {
    display: none;
}

/* Justice draws a rotating triangle before every details > summary; the row
   menu's "⋯" is its own marker. */
#sp-component .ottevents details > summary.ottev-menu-btn::before {
    content: none !important;
    display: none !important;
}

#sp-component .ottevents .ottev-menu-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 0 0;
}

/* Guest-list rows with a menu keep their text beside the 44 px "⋯" (0.2.1
   design pass: at 375 px a Maybe row such as "4. {scene} · maybe · since
   Oct 21 · moved 72 hours before the start" is wider than the 309 px row,
   and with wrapping the menu dropped onto a line of its own under the
   text). The "⋯" sits in the row's top right corner and the text wraps in
   the space left of it, centred against it when it is one line. An open
   menu's links sit in the page flow under the row's text, across the row,
   so they never cover another row or the row's own text, and any number of
   menus can be open at once (review ux-copy-4: they used to drop down over
   the rows below, and a script-free menu stays open until its own "⋯" is
   pressed again). Measured at 375 px: see the 0.2.1 build log, Review. */
#sp-component .ottevents .ottev-gl-row.ottev-has-menu > .ottev-row-main {
    display: block;
    position: relative;
}

#sp-component .ottevents .ottev-gl-row.ottev-has-menu .ottev-row-text {
    justify-content: center;
    min-height: 44px;
    padding-right: 56px;
}

#sp-component .ottevents .ottev-gl-row.ottev-has-menu .ottev-menu {
    position: static;
}

/* padding: Justice pads every details > summary 16px 20px !important, which
   drew the "⋯" 63 x 54 px on the site, wider than the 56 px the text keeps
   clear: a full line ran up to 7 px under it, and an open menu's list
   started inside its lower corner. Without that padding it is the 44 x 44
   this layout was measured with (0.2.1 test run, 375 px sweep). */
#sp-component .ottevents .ottev-gl-row.ottev-has-menu .ottev-menu-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 !important;
}

#sp-component .ottevents .ottev-cancelled > summary,
#sp-component .ottevents .ottev-why > summary {
    list-style: none;
}

#sp-component .ottevents .ottev-btn-danger {
    background: transparent !important;
    color: var(--ottcb-text, #c9b896) !important;
    border-color: var(--ottcb-text, #c9b896);
    border-style: dashed;
}

#sp-component .ottevents .ottev-field {
    margin: 0 0 12px;
}

#sp-component .ottevents .ottev-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
}

#sp-component .ottevents .ottev-input {
    display: block;
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(128, 128, 128, 0.6);
    background: var(--ottcb-bg, #15110d) !important;
    color: var(--ottcb-text, #c9b896) !important;
}

#sp-component .ottevents .ottev-check label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

#sp-component .ottevents .ottev-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
}

#sp-component .ottevents .ottev-door-search {
    margin-top: 16px;
}

#sp-component .ottevents .ottev-door-private {
    font-size: 14px;
}

#sp-component .ottevents .ottev-door-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

#sp-component .ottevents .ottev-door-name {
    font-size: 18px;
    font-weight: 700;
}

#sp-component .ottevents .ottev-door-place,
#sp-component .ottevents .ottev-door-review {
    flex-basis: 100%;
    font-size: 13px;
}

#sp-component .ottevents .ottev-door-review {
    font-weight: 700;
}

#sp-component .ottevents .ottev-door-rows {
    list-style: none;
    padding: 4px 16px;
}

/* Check in / "Checked in 9:42 pm" + Undo (0.1.5, R74): its own line under
   the place, 44 px targets, wraps instead of scrolling at 375 px. */
#sp-component .ottevents .ottev-door-check {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 4px 0 2px;
}

#sp-component .ottevents .ottev-door-in {
    font-size: 15px;
    font-weight: 700;
}

#sp-component .ottevents .ottev-door-checkin {
    min-width: 120px;
}

/* The printed door list opens with tmpl=component (no #sp-component). */
.ottevents.ottev-door-print {
    color: #000;
    background: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 16px;
}

.ottevents.ottev-door-print .ottev-print-list {
    list-style: none;
    margin: 12px 0;
    padding: 0;
}

.ottevents.ottev-door-print .ottev-print-list li {
    padding: 6px 0;
    border-bottom: 1px solid #999;
}

.ottevents.ottev-door-print .ottev-print-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    margin-right: 10px;
    vertical-align: -2px;
}

/* ---------------------------------------------------------------- primary-button ink per theme (R43, the 375 px sweep)
   Background-coloured ink on the accent clears 4.5:1 on most themes; on
   these five it does not (measured 3.52-4.28:1), so the ink is black or
   white, whichever clears it: light #ff006e 5.5:1, trans #c46d80 5.8:1,
   pan #ff218c 5.8:1 and nb #9c59d1 4.8:1 with black; leather #dd0000
   5.2:1 with white. */
body[data-otttheme="light"] #sp-component .ottevents .ottev-btn-primary,
body[data-otttheme="trans"] #sp-component .ottevents .ottev-btn-primary,
body[data-otttheme="pan"] #sp-component .ottevents .ottev-btn-primary,
body[data-otttheme="nb"] #sp-component .ottevents .ottev-btn-primary,
body[data-otttheme="light"] #sp-component .ottevents .ottev-filter.is-current,
body[data-otttheme="trans"] #sp-component .ottevents .ottev-filter.is-current,
body[data-otttheme="pan"] #sp-component .ottevents .ottev-filter.is-current,
body[data-otttheme="nb"] #sp-component .ottevents .ottev-filter.is-current {
    color: #000 !important;
}

body[data-otttheme="leather"] #sp-component .ottevents .ottev-btn-primary,
body[data-otttheme="leather"] #sp-component .ottevents .ottev-filter.is-current {
    color: #fff !important;
}

/* ---------------------------------------------------------------- print (R65: avoid data never prints)
   Unscoped on purpose: a page opened with tmpl=component has no
   #sp-component wrapper, and avoid data must not print from there either
   (review round 1 F7/F10). The scoped selector stays in case a template
   rule with !important targets #sp-component. */
@media print {
    .ottev-avoid,
    .ottevents .ottev-avoid,
    #sp-component .ottevents .ottev-avoid { display: none !important; }
}

/* ---------------------------------------------------------------- Seats (0.1.6, spec 7.16a)
   Appended so these come after .ottev-form (inline-block, no margin) and
   .ottev-input (block, full width): a Seats form is a full card, and the
   move sentence "Move [n] unfilled seats from [place] to [place]" wraps at
   375 px with every control still 44 px tall and 16 px text. */
#sp-component .ottevents .ottev-seats-form {
    display: block;
    margin: 0 0 12px;
}

#sp-component .ottevents .ottev-seats-move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#sp-component .ottevents .ottev-seats-move .ottev-seats-word {
    display: inline;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

#sp-component .ottevents .ottev-seats-move .ottev-input {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

#sp-component .ottevents .ottev-input.ottev-seats-n {
    width: 5.5em;
}

#sp-component .ottevents .ottev-seats-row {
    font-size: 15px;
}

/* ---------------------------------------------------------------- Email the list (0.3.1, spec 7.17)
   Design pass at 375 px (0.3.1 build log), measured on a static copy of
   the page with this file and Justice's CSS: each To choice is a 44 px row
   with a 22 px radio (radios had no rule and drew 13 px); the subject and
   message keep the 16 px .ottev-input text and end at 343 px; the message
   shows the whole prefill without scrolling (14 rows); Send to {n} people
   and Back share one row; nothing scrolls sideways. The form is a full
   card (.ottev-form is inline-block for the one-button forms), and the
   header keeps 16 px from the card under it. */
#sp-component .ottevents .ottev-check input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 0;
}

#sp-component .ottevents textarea.ottev-input {
    min-height: 16em;
}

#sp-component .ottevents.ottev-listmail .ottev-head {
    margin-bottom: 16px;
}

#sp-component .ottevents .ottev-lm-form {
    display: block;
}

#sp-component .ottevents .ottev-lm-to {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    min-width: 0;
}

#sp-component .ottevents .ottev-lm-to > legend {
    float: none;
    width: auto;
    padding: 0;
}

#sp-component .ottevents .ottev-lm-help {
    margin: 6px 0 0;
}