/*
 * Riparian Plant Database — public finder styles.
 * The page is embedded in Aurora via iframe, so nothing here sets full-viewport
 * heights, fixed positioning, or outer site chrome.
 */

:root {
    --rp-navy: #1b3a8c;
    --rp-navy-hover: #152e70;
    --rp-ink: #1c1f24;
    --rp-text: #3a4049;
    --rp-muted: #6a7280;
    --rp-border: #dde2e8;
    --rp-border-strong: #c7ced8;
    --rp-surface: #ffffff;
    --rp-subtle: #f3f5f8;
    --rp-chip-bg: #e9eff9;
    --rp-chip-border: #c8d5ee;
    --rp-radius: 6px;
    --rp-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    --rp-shadow-hover: 0 8px 20px rgba(16, 24, 40, 0.10);
    --rp-font: 'proxima-nova', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

body.rp {
    margin: 0;
    font-family: var(--rp-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--rp-text);
    background: var(--rp-surface);
    -webkit-font-smoothing: antialiased;
}

.rp img {
    max-width: 100%;
    display: block;
}

.rp-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 40px;
}

.rp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Intro ---------- */

.rp-intro h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 500;
    color: var(--rp-ink);
    letter-spacing: -0.01em;
}

.rp-intro p {
    margin: 0;
    max-width: 820px;
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- Toolbar ---------- */

.rp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.rp-toolbar__actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.rp-toolbar__actions:empty {
    display: none;
}

.rp-filters {
    position: relative;
}

.rp-filters > summary {
    list-style: none;
}

.rp-filters > summary::-webkit-details-marker {
    display: none;
}

.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--rp-radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.rp-btn svg {
    width: 16px;
    height: 16px;
}

.rp-btn--primary {
    background: var(--rp-navy);
    color: #fff;
}

.rp-btn--primary:hover {
    background: var(--rp-navy-hover);
}

.rp-btn--ghost {
    background: transparent;
    color: var(--rp-navy);
    border-color: var(--rp-border-strong);
}

.rp-btn--ghost:hover {
    background: var(--rp-subtle);
}

/* Figma "Export to PDF" button */
.rp-btn--teal {
    background: #2a7a8c;
    color: #fff;
}

.rp-btn--teal:hover {
    background: #21677a;
}

.rp-btn--teal:disabled:hover {
    background: #2a7a8c;
}

/* Figma export buttons: uppercase pills */
.rp-btn--pill {
    border-radius: 999px;
    padding: 0 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rp-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.rp-btn--primary:disabled:hover {
    background: var(--rp-navy);
}

/* ---------- Selection actions ---------- */

/* Buttons sit on the toolbar row (as in the Figma); the count and "Clear selection" go underneath. */
.rp-selection {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.rp-selection__summary {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 12px;
}

.rp-selection__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.rp-selection__status {
    margin: 0;
    font-size: 13px;
    color: var(--rp-muted);
}

.rp-selection.has-selection .rp-selection__status {
    color: var(--rp-ink);
    font-weight: 600;
}

.rp-selection__status:focus {
    outline: none;
}

.rp-selection__status:focus-visible {
    outline: 2px solid var(--rp-navy);
    outline-offset: 2px;
}

/* Selection needs JavaScript; hide its controls when the script can't run. */
html:not(.js) .rp-selection,
html:not(.js) .rp-card__select {
    display: none;
}

.rp-btn:focus-visible,
.rp-filters > summary:focus-visible,
.rp-chip:focus-visible,
.rp-link:focus-visible {
    outline: 2px solid var(--rp-navy);
    outline-offset: 2px;
}

.rp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--rp-navy);
    font-size: 12px;
    font-weight: 700;
}

.rp-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 320px;
}

.rp-search svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--rp-muted);
    pointer-events: none;
}

.rp-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--rp-border-strong);
    border-radius: var(--rp-radius);
    background: #fbfcfd;
    font-family: inherit;
    font-size: 14px;
    color: var(--rp-ink);
}

.rp-search input::placeholder {
    color: #6c7481;
}

.rp-search input:focus {
    outline: none;
    border-color: var(--rp-navy);
    box-shadow: 0 0 0 3px rgba(27, 58, 140, 0.15);
    background: #fff;
}

/* Filter panel (opens under the Filters button) */

.rp-filters__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: min(560px, calc(100vw - 40px));
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-hover);
}

.rp-filters__groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
}

.rp-filters fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.rp-filters legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rp-muted);
}

.rp-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--rp-ink);
    cursor: pointer;
}

.rp-check input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--rp-navy);
    flex-shrink: 0;
}

.rp-check small {
    display: block;
    color: var(--rp-muted);
    font-size: 12px;
}

.rp-filters__hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--rp-muted);
}

.rp-filters__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rp-border);
}

/* Active filter chips */

/* Chips sit inside the toolbar on their own row so mobile can order them before the export actions. */
.rp-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex-basis: 100%;
    order: 1;
}

.rp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 8px 0 11px;
    border: 1px solid var(--rp-chip-border);
    border-radius: 999px;
    background: var(--rp-chip-bg);
    color: var(--rp-navy);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s ease;
}

.rp-chip:hover {
    background: #dbe5f6;
}

.rp-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* A long search term must wrap instead of widening the page. */
.rp-chips .rp-chip {
    max-width: 100%;
    height: auto;
    min-height: 26px;
    overflow-wrap: anywhere;
}

.rp-link {
    color: var(--rp-navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.rp-results {
    margin: 18px 0 0;
    font-size: 13px;
    font-style: italic;
    color: var(--rp-muted);
}

/* ---------- Category sections ---------- */

.rp-section {
    margin-top: 30px;
}

.rp-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.rp-section__title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: var(--rp-ink);
    white-space: nowrap;
}

.rp-section__rule {
    flex: 1;
    height: 1px;
    background: var(--rp-border);
}

.rp-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--rp-cat-bg, #e5f3ea);
    color: var(--rp-cat-fg, #2f8a4f);
}

.rp-cat-icon svg {
    width: 20px;
    height: 20px;
}

.rp-cat-icon--trees                  { --rp-cat-bg: #e3f3e8; --rp-cat-fg: #2f8a4f; }
.rp-cat-icon--shrubs                 { --rp-cat-bg: #f7e6f1; --rp-cat-fg: #a8407c; }
.rp-cat-icon--herbaceous-perennials  { --rp-cat-bg: #eee8fa; --rp-cat-fg: #6a4ab5; }
.rp-cat-icon--ferns                  { --rp-cat-bg: #dff1ef; --rp-cat-fg: #1f7a6f; }
.rp-cat-icon--grasses-sedges-rushes  { --rp-cat-bg: #f8efd9; --rp-cat-fg: #8e6512; }

.rp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.js .rp-section.is-collapsed [data-extra] {
    display: none;
}

.rp-section__more {
    margin-top: 16px;
}

/* ---------- Plant card ---------- */

.rp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    overflow: hidden;
    box-shadow: var(--rp-shadow);
    transition: transform 0.15s ease;
}

.rp-card:hover {
    box-shadow: var(--rp-shadow-hover);
    transform: translateY(-2px);
}

/* Focus ring for the stretched link, shown for keyboard focus only. */
.rp-card:focus-within {
    outline: 2px solid var(--rp-navy);
    outline-offset: 2px;
}

@supports selector(:has(*)) {
    .rp-card:focus-within {
        outline: none;
    }

    .rp-card:has(.rp-card__link:focus-visible) {
        outline: 2px solid var(--rp-navy);
        outline-offset: 2px;
    }
}

/* Images are absolutely positioned so a tall photo can't stretch the fixed-ratio frame. */
.rp-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rp-subtle);
}

.rp-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.rp-card__media img.is-tall {
    object-position: center top;
}

/* Reserved corner for the upcoming select/export checkbox. Sits above the
   stretched card link so it will stay independently clickable. */
.rp-card__select {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

/* 36px label gives a comfortable tap target around the 22px box. */
.rp-select {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.rp-select__input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid #7c8593;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    cursor: pointer;
}

/* Hover only restyles an unchecked box; it previously outranked :checked and hid the tick until the pointer left. */
.rp-select:hover .rp-select__input:not(:checked) {
    border-color: var(--rp-navy);
    background-color: #fff;
}

.rp-select__input:checked {
    border-color: var(--rp-navy);
    background: var(--rp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.rp-select:hover .rp-select__input:checked {
    background-color: var(--rp-navy-hover);
}

.rp-select__input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px var(--rp-navy);
}

.rp-card.is-selected {
    border-color: var(--rp-navy);
    box-shadow: 0 0 0 1px var(--rp-navy), var(--rp-shadow);
}

.rp-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 18px 14px;
}

.rp-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rp-ink);
}

.rp-card__link {
    color: inherit;
    text-decoration: none;
}

.rp-card__link:focus {
    outline: none;
}

/* Stretched link: the whole card is clickable without nesting interactive
   elements inside an anchor. */
.rp-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rp-card__latin {
    margin: 2px 0 12px;
    font-size: 13px;
    font-style: italic;
    color: var(--rp-muted);
}

.rp-card__facts {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.6;
    color: var(--rp-ink);
}

.rp-card__facts li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-card__facts strong {
    font-weight: 600;
}

/* Figma characteristic pills; only rendered when the plant's data supports them. */
.rp-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.rp-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.rp-tag--salt {
    color: #2c5aa0;
    border-color: #a9c1e6;
    background: #f1f6fd;
}

.rp-tag--pollinator {
    color: #6b3fae;
    border-color: #cdb9ec;
    background: #f7f3fd;
}

.rp-card__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 14px;
}

.rp-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--rp-navy);
    color: #fff;
    transition: transform 0.15s ease;
}

.rp-card:hover .rp-card__arrow {
    transform: translateX(2px);
}

.rp-card__arrow svg {
    width: 14px;
    height: 14px;
}

/* Placeholder when a plant has no uploaded image */

.rp-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #58606c;
    font-size: 12px;
}

.rp-placeholder .rp-cat-icon {
    width: 44px;
    height: 44px;
    opacity: 0.85;
}

.rp-placeholder .rp-cat-icon svg {
    width: 22px;
    height: 22px;
}

/* ---------- Empty state ---------- */

.rp-empty {
    margin-top: 28px;
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed var(--rp-border-strong);
    border-radius: var(--rp-radius);
    color: var(--rp-muted);
}

.rp-empty h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--rp-ink);
}

.rp-empty p {
    margin: 0 0 14px;
    font-size: 14px;
}

/* ---------- Detail page ---------- */

.rp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rp-navy);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.rp-back:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rp-back svg {
    width: 16px;
    height: 16px;
}

.rp-detail {
    margin-top: 18px;
}

.rp-detail__top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 32px;
    align-items: start;
}

.rp-detail__media {
    position: relative;
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    overflow: hidden;
    background: var(--rp-subtle);
}

/* The frame takes each photo's own shape, so most photos show uncropped.
   3:4 (most photos) holds the space until it loads. Photos taller than the
   cap fill the box and lose the bottom (usually soil or mulch), keeping the
   top of the plant where flowers and foliage usually are. */
.rp-detail__media img {
    width: 100%;
    height: auto;
    aspect-ratio: auto 3 / 4;
    max-height: 75vh;
    object-fit: cover;
    object-position: center top;
}

.rp-detail__media .rp-placeholder {
    aspect-ratio: 4 / 3;
}

.rp-detail__category {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rp-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rp-detail__category .rp-cat-icon {
    width: 30px;
    height: 30px;
}

.rp-detail__category .rp-cat-icon svg {
    width: 16px;
    height: 16px;
}

.rp-detail h1 {
    margin: 12px 0 2px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rp-ink);
    letter-spacing: -0.01em;
}

.rp-detail__latin {
    margin: 0 0 16px;
    font-size: 17px;
    font-style: italic;
    color: var(--rp-muted);
}

.rp-detail__zones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.rp-detail__zones .rp-chip {
    cursor: default;
    padding-right: 11px;
}

.rp-facts {
    margin: 0;
    border-top: 1px solid var(--rp-border);
}

.rp-facts__row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rp-border);
}

.rp-facts dt {
    font-size: 13px;
    font-weight: 700;
    color: var(--rp-ink);
}

.rp-facts dd {
    margin: 0;
    font-size: 14px;
    color: var(--rp-text);
}

.rp-facts dd small {
    display: block;
    color: var(--rp-muted);
    font-size: 12.5px;
}

/* Keeps line breaks in values such as "Height: …\nWidth: …" */
.rp-preline {
    white-space: pre-line;
}

.rp-block {
    margin-top: 28px;
}

.rp-block h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--rp-ink);
}

.rp-block p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.rp-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.rp-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    background: var(--rp-subtle);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .rp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .rp-container {
        padding: 18px 16px 32px;
    }

    .rp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .rp-search {
        order: -1;
        flex: 1 1 100%;
        max-width: none;
    }

    .rp-toolbar__actions {
        margin-left: 0;
        width: 100%;
    }

    .rp-toolbar__actions {
        order: 2;
    }

    .rp-selection {
        align-items: stretch;
    }

    .rp-selection__summary {
        order: 0;
        justify-content: flex-start;
    }

    .rp-selection__buttons {
        flex-direction: column;
    }

    .rp-selection .rp-btn--pill {
        width: 100%;
    }

    .rp-filters__groups {
        grid-template-columns: 1fr;
    }

    .rp-detail__top {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rp-detail h1 {
        font-size: 25px;
    }

    .rp-facts__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .rp-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .rp-grid {
        grid-template-columns: 1fr;
    }

    .rp-intro h1 {
        font-size: 22px;
    }

    .rp-section__title {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-card,
    .rp-card__arrow {
        transition: none;
    }

    .rp-card:hover {
        transform: none;
    }
}

/* "Powered by i3" footer: the shared i3 footer used across UConn DX Lab apps (light variant). */
.i3-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.rp .i3-footer img {
    width: 38px;
    height: auto;
    margin: 0 5px;
}

.i3-footer p {
    margin: 0;
    padding: 10px 0;
    font-family: "area-normal", var(--rp-font);
    font-weight: 400;
    color: var(--rp-ink);
}

.i3-footer .btn {
    --corner: 10px;    /* length of each corner bracket */
    --thickness: 2px;  /* bracket line width */
    --gap: 6px;        /* how far the brackets move in on hover */

    display: flex;
    align-items: center;
    width: fit-content;
    height: 40px;
    margin: 0 5px;
    padding: 9px 12px;
    font-family: "rockwell", "Rockwell", Georgia, serif;
    font-weight: 400;
    color: #0034da;
    text-decoration: none;
    outline: var(--thickness) solid #4db3ff;
    outline-offset: calc(-1 * var(--thickness));
    -webkit-mask:
        conic-gradient(at var(--corner) var(--corner), #0000 75%, #000 0)
        0 0 / calc(100% - var(--corner)) calc(100% - var(--corner)),
        linear-gradient(#000 0 0) content-box;
    mask:
        conic-gradient(at var(--corner) var(--corner), #0000 75%, #000 0)
        0 0 / calc(100% - var(--corner)) calc(100% - var(--corner)),
        linear-gradient(#000 0 0) content-box;
    transition: outline-offset 0.2s;
}

.i3-footer .btn:hover,
.i3-footer .btn:focus-visible {
    outline-offset: calc(var(--gap) / -1);
}

/* Hidden when the Finder is embedded in an iframe (class set in the layout head). */
.in-iframe .i3-footer {
    display: none;
}