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

    /* cursor: inherit; */
    padding: 0;
    margin: 0;

    color: unset;
    background-color: unset;

    text-align: unset;
    text-decoration: unset;

    border-style: unset;
    border-width: 1px;
    border-color: unset;

    outline-style: unset;
    outline-width: 1px;
    outline-color: unset;
    outline-offset: unset;

    font-size: unset;
    font-family: unset;
    font-stretch: unset;
    font-style: unset;
    font-variant: unset;
    font-weight: unset;
    line-height: unset;

    overscroll-behavior-x: none;
    overscroll-behavior-y: none;

    /* -webkit-user-select: none; */
    /* -moz-user-select: none; */
    /* -ms-user-select: none; */
    /* user-select: none; */

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* The * reset above sets `font-style: unset` (which computes as
 * `inherit` for inheritable properties), which overrides the
 * user-agent default that makes <em> / <i> / <cite> italic. Restore it
 * so e.g. species binomials wrapped in <em> on the detail page render
 * italic, and so phrases like <em>de novo</em> stay italic too. */
em,
i,
cite {
    font-style: italic;
}

/* -----------------------------------------------------------------------
 * Scrollbar styling
 *
 * Several content panels (the listing table wrap, the detail page, the
 * About card) have their own internal overflow:auto. When a scrollbar
 * appears inside a bordered panel the default OS scrollbar's gutter
 * sits flush against the panel border, producing an unwanted "double
 * border" effect along that edge.
 *
 * The fix: make the scrollbar track transparent and the thumb a slim
 * rounded bar. With no track band there's nothing to visually compete
 * with the panel border — when content fits, scrollbars are absent and
 * the panel looks identical to before; when content overflows, only a
 * thin thumb appears.
 *
 * `scrollbar-width` / `scrollbar-color` cover Firefox; the
 * ::-webkit-scrollbar pseudo-element block covers Chromium and Safari.
 * --------------------------------------------------------------------- */

:root {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* -----------------------------------------------------------------------
 * Design tokens
 *
 * One central palette for the whole site. Every color in app.css resolves
 * back to one of these so the site can be re-themed by editing this block.
 * --------------------------------------------------------------------- */

:root {
    /* Surfaces */
    --bg-page: #f4f5f7;
    --bg-surface: #ffffff;
    --bg-surface-alt: #fafbfc;
    --bg-header: #32363c;
    --bg-footer: #ffffff;
    --bg-table-head: #f1f3f5;
    --bg-table-head-sorted: #e7f0fb;
    --bg-soft: #f4f5f7;

    /* Borders */
    --border: #d6dade;
    --border-strong: #c2c8d0;
    --border-muted: #e7eaee;

    /* Text */
    --text: #1f2328;
    --text-secondary: #5a6373;
    --text-muted: #8a93a0;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #c8ccd2;

    /* Accent (links, primary buttons, sorted-column tint) */
    --accent: #3683dc;
    --accent-hover: #2575d0;
    --accent-active: #1e5da6;
    --accent-soft: #e7f0fb;

    /* Focus */
    --focus-ring: #3683dc;
}

:root {
    font-family:
        "SF Pro Text",
        Ubuntu,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

:root {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 1rem;
    color: var(--text);
}

body {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-page);
    color: var(--text);
    /* Body content text scale. Headings, titles and labels in app.css
     * are sized in rem (relative to :root, not body) so they're
     * unaffected; anything that inherits (paragraph copy, table cells,
     * metadata values, etc.) scales with this. Bump up/down to taste. */
    font-size: 0.9375rem;
}

#layout {
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

#header,
#footer {
    z-index: 40;
}

#header {
    background-color: var(--bg-header);
    color: var(--text-on-dark);
    border-bottom: 1px solid #000;
}

#footer {
    background-color: var(--bg-footer);
    border-top: 1px solid var(--border-muted);
}

#content {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Default link & focus styling for the whole document. */

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 120ms ease-in-out;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

a:active {
    color: var(--accent-active);
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}