/* Horizontal page gutter shared by the fixed top nav and the content
   container so their left/right edges always line up. */
:root {
    --page-gutter: 16px;          /* desktop */
    --page-gutter-mobile: 8px;    /* phones and tablets, both sides of the content */

    /* Layout sizes to tune. */
    /* Fixed top bar height. */
    --nav-height: 42px;          /* desktop menu */
    --nav-height-mobile: 52px;   /* bar on phones and tablets */
    /* Corner rounding: --radius on cards, tables, inputs, buttons and other
       containers; --radius-sm on the badges, tiles and chips inside them. */
    --radius: 6px;
    --radius-sm: 4px;
    /* The six summary cards under the top bar (home, Blocks, Payments, Your
       Stats). The scale sizes their text and icon (1 = default, 0.8 = 20%
       smaller, 1.2 = 20% bigger); the card keeps its width, and its padding
       is set separately. Phones show the same cards, two per row. */
    --summary-card-scale: 1;
    --summary-card-padding: 6px;
    --summary-card-icon-size: 20px;  /* before the scale */
    /* Space above the card row (the gap under the top bar, on every page)
       and between the row and whatever follows it. */
    --summary-card-spacing: 6px;

    /* Derived from the sizes above. */
    --nav-offset: calc(var(--nav-height) + var(--summary-card-spacing));
    --nav-offset-mobile: calc(var(--nav-height-mobile) + var(--summary-card-spacing));

    /* Colors the same in both themes (dark.css / light.css hold the rest). */
    --on-accent: #fff;  /* text and icons on an accent fill */
    --discord: #5865f2;
    --code-block-background: #20232a;  /* command blocks, dark in both themes */
    --code-block-text: #fff;
    --code-block-highlight: #f39c12;  /* a value to fill in, on a command block */
    --font-mono: Consolas, Monaco, 'Lucida Console', monospace;
}

/* Once a grid stacks on mobile there is no neighbouring column to gutter
   against, so semantic.css drops the columns' side padding. Basic segments are
   panels too (.ui.segment gives every segment the panel background), so they
   keep a slim side padding: text must not touch the panel edge. */
@media only screen and (max-width: 767px) {
    .ui.basic.segment {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* The theme switch fades; the page scrolls inside #root, not the body. */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow: hidden;
}

/* The top bar's dropdowns sit on the bar unboxed. */
.ui.dropdown.no-border {
    border: none;
}

#root {
    overflow-y: scroll;
    padding-bottom: 38px;
}

.desktop {
    width: 100%;
    max-width: 1268px;
    /* Maximum width for large screens */
    margin: 0 auto;
    /* Center the container */
    padding: var(--nav-offset) var(--page-gutter) 0 var(--page-gutter);
    /* Top offset clears the fixed menu; sides keep content off the viewport edges */
}

.primary-text {
    color: var(--primary-text-color);
}

.blue-text {
    color: var(--stat-blue);
}

.green-text {
    color: var(--stat-green);
}

.error-text {
    color: var(--effort-critical-color);
}

.pink-text {
    color: var(--stat-pink);
}

/* A page that is only a message, centred under the menu: 404, or pool stats
   that won't load (StatsLoading, whose spinner takes the theme's colours). */
.page-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 88vh;
    text-align: center;
}

.page-message .error-text {
    font-size: 18px;
}

.page-message .ui.button {
    margin-top: 1rem;
}

.page-message .ui.loader {
    margin-bottom: 1rem;
}

.page-message .ui.loader:before {
    border-color: var(--border-color);
}

.page-message .ui.loader:after {
    border-top-color: var(--stat-blue);
}

/* Data tables, a touch smaller than Semantic's text (outranking its
   .ui.table size). */
.ui.table.data-table {
    font-size: 98%;
}

/* Flex container */
.flex {
    display: flex;
}

/* Flex direction */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.gap-3 {
    gap: 0.75rem;
}

/* Spacing */
.p-12 {
    padding: 12px;
}

.pb-8 {
    padding-bottom: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.ml-8 {
    margin-left: 8px;
}

.my-16 {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Support's text, a touch larger (outranking Semantic's .ui.segment size). */
.ui.segment.help {
    font-size: 105%;
}

.help h4 {
    margin-bottom: 6px;
}

/* A first heading keeps Semantic's flush top. */
.help h4:not(:first-child) {
    margin-top: 18px;
}

/* Command blocks, How to Mine's (CopyableCode) and a guide's: dark in both
   themes, copied on click. */
.code-block,
.guide pre {
    background: var(--code-block-background);
    color: var(--code-block-text);
    padding: 8px;
    border-radius: var(--radius);
    overflow-x: auto;
    cursor: pointer;
}

/* A pool guide (src/utils/guides.js): Markdown prose, centred in the page's
   full-width card at a readable line length. */
.guide {
    font-size: 105%;
    margin: 0.5em auto;
    max-width: 48rem;
}

.guide p,
.guide li {
    line-height: 1.6;
}

.guide li + li {
    margin-top: 4px;
}

.guide h1 {
    font-size: 1.71428571rem;
    line-height: 1.28571429em;
    margin: 0 0 4px;
}

/* The line under the title: who it is for and when it was checked. */
.guide h1 + p {
    color: var(--secondary-text-color);
}

/* Highlighted as on How to Mine: section titles blue; what the reader types
   or must not miss in the attention color; on a command block, the values
   to fill in. */
.guide h2 {
    color: var(--stat-blue);
    font-size: 1.28571429rem;
    margin-top: 2em;
}

.guide strong,
.guide :not(pre) > code {
    color: var(--attention-text-color);
}

.guide :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

.guide var {
    font-style: normal;
}

.guide pre var {
    color: var(--code-block-highlight);
}

.stats-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: var(--summary-card-spacing);
    cursor: auto;
}

/* Whatever follows the card row (notice banner, pool info, a segment or a
   table) drops its own top margin so --summary-card-spacing alone sets the
   gap; the banner's margin is inline and Semantic's components outrank a bare
   element selector, hence !important. */
.stats-container + * {
    margin-top: 0 !important;
}

/* Your Stats' wallet lookup: the title with the solo hint as a small note on
   its line (under it where it doesn't fit), an error under the input when
   there is one, then the recent lookups. */
.wallet-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin-bottom: 1rem;
}

.wallet-title h2 {
    margin: 0;
}

.wallet-solo-hint {
    color: var(--hint-text-color);
    font-size: 0.92em;
}

.wallet-lookup-error {
    margin: 6px 2px 0;
}

.wallet-recent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 6px 2px 0;
    font-size: 0.92em;
}

.wallet-recent a {
    cursor: pointer;
}

.custom-stat {
    border-radius: var(--radius);
    --stat-icon-size: calc(var(--summary-card-icon-size) * var(--summary-card-scale));
    text-align: start;
    min-width: 168px;
    padding: var(--summary-card-padding);
    /* Text stays clear of the icon: its 8px inset, its width, an 8px gap. */
    padding-inline-end: calc(var(--stat-icon-size) + 16px);
    line-height: calc(20px * var(--summary-card-scale));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-shadow: var(--summary-card-shadow);
    position: relative;
    background-color: var(--custom-stat-bg);
}

.stat-label {
    margin-bottom: 4px;
    color: var(--stat-label-color);
}

.stat-value {
    font-weight: bold;
    color: var(--stat-value-color);
}

/* --stat-accent (set per card by SummaryCard) colors the value and icon. */
.custom-stat .stat-value {
    color: var(--stat-accent, var(--stat-value-color));
    font-size: calc(16px * var(--summary-card-scale));
}

/* Separators inside a value ("1 / 0 / 1", "98% | 147%") stay neutral. */
.custom-stat .stat-divider {
    color: var(--secondary-text-color);
}

.custom-stat .stat-label {
    font-size: calc(15px * var(--summary-card-scale));
    margin-bottom: calc(4px * var(--summary-card-scale));
    /* In a narrow card, long single words (German compounds) wrap too
       instead of running under the icon. */
    hyphens: auto;
    overflow-wrap: anywhere;
}

.stat-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    color: var(--stat-accent);
    font-size: var(--stat-icon-size);
}

/* Code, wallet addresses and hashes are left-to-right even on right-to-left
   pages; isolating them keeps "solo:" from rendering as ":solo". */
[dir="rtl"] code,
[dir="rtl"] .hash {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Values take the direction of their own text, so on right-to-left pages
   "77.5 EH/s" stays "77.5 EH/s" while translated values stay right-to-left. */
[dir="rtl"] .stat-value,
[dir="rtl"] strong,
[dir="rtl"] .ui.table td {
    unicode-bidi: plaintext;
}

.custom-stat:hover {
    box-shadow: var(--summary-card-hover-shadow);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .stats-container {
        flex-wrap: wrap;
    }

    .custom-stat {
        flex: 1 1 calc(33% - 30px);
        /* 3 per row */
    }
}

@media (max-width: 768px) {
    .custom-stat {
        flex: 1 1 calc(50% - 8px);
        /* 2 per row */
    }
}

@media (max-width: 480px) {
    .stats-container {
        gap: 6px;
    }

    .custom-stat {
        flex: 1 1 calc(50% - 6px);
        /* 2 per row compact grid */
        min-width: unset;
        box-shadow: var(--summary-card-shadow-phone);
    }
}

.reward-percent {
    color: var(--stat-green);
}

.secondary-text {
    color: var(--secondary-text-color);
}

/* Orphan blocks: a normal network event — neutral gray and dimmed so it reads
   as "superseded", never as a pool error; under the pointer too. */
.ui.table tr.orphan-row,
.ui.table tr.orphan-row:hover {
    background: rgba(127, 127, 127, 0.10);
    color: var(--secondary-text-color);
    opacity: 0.8;
}

.hash {
    font-size: 98%;
    font-family: var(--font-mono);
}

/* A payment's first kernel after its transaction hash (PaymentHash), and the
   » that opens them all. */
.payment-kernels {
    margin-inline-start: 0.75em;
    font-size: 0.85em;
    color: var(--secondary-text-color);
}

.payment-kernels-all {
    background: none;
    border: 0;
    padding: 0 0.2em;
    margin-inline-start: 0.2em;
    color: var(--stat-blue);
    cursor: pointer;
    line-height: 0;
    vertical-align: middle;
}

[dir="rtl"] .payment-kernels-all svg {
    transform: scaleX(-1);
}

/* The kernels dialog: one full kernel per line. */
.kernel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    word-break: break-all;
}

.kernel-list li + li {
    margin-top: 0.5em;
}

/* Compact rows. The first row (servers) keeps Semantic's 1rem top padding,
   which the grid's -1rem margin cancels, so the page starts at the same gap
   under the menu as every other page. */
.ui.grid > .row.mine-server-row,
.ui.grid > .row.mine-ports-row {
    padding-bottom: 0.45rem;
}

.ui.grid > .row.mine-ports-row {
    padding-top: 0.45rem;
}

.mine-compact-segment.ui.basic.segment {
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
}

/* How to Mine miner tabs: the logo before a heading, in a bordered tile. */
.mine-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-inline-end: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--segment-background);
    flex-shrink: 0;
}

.mine-compact-segment h3 {
    margin-bottom: 0.45rem;
}

/* A region's hue (--region-* in each theme) on its badge and labels. */
.server-region-badge {
    --region-accent: var(--region-unknown);
    align-items: center;
    border: 1px solid var(--region-accent);
    border-radius: var(--radius-sm);
    color: var(--region-accent);
    display: inline-flex;
    font-size: 0.88em;
    font-weight: 700;
    height: 21px;
    justify-content: center;
    line-height: 1;
    min-width: 34px;
    padding: 0 5px;
    width: max-content;
}

.region-eu { --region-accent: var(--region-eu); }
.region-ru { --region-accent: var(--region-ru); }
.region-us, .region-us-e, .region-us-w, .region-us-east, .region-us-west, .region-us-central, .region-us-ord { --region-accent: var(--region-us); }
.region-au { --region-accent: var(--region-au); }
.region-pl { --region-accent: var(--region-pl); }
.region-br { --region-accent: var(--region-br); }
.region-ca { --region-accent: var(--region-ca); }
.region-sg { --region-accent: var(--region-sg); }
.region-id { --region-accent: var(--region-id); }
.region-hk { --region-accent: var(--region-hk); }
.region-tr { --region-accent: var(--region-tr); }
.region-jp { --region-accent: var(--region-jp); }
.region-in { --region-accent: var(--region-in); }

.stratum-option {
    align-items: center;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
}

.stratum-option .server-region-badge {
    font-size: 0.8em;
    height: 19px;
    min-width: 31px;
    padding: 0 4px;
}

.stratum-option-server {
    color: var(--primary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stratum-option-diff {
    color: var(--secondary-text-color);
    font-size: 0.86em;
    white-space: nowrap;
}

/* The LPRoute hint: an info banner above the server table (desktop) or under
   the list of countries (mobile). */
.route-note {
    align-items: flex-start;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--radius);
    color: var(--primary-text-color);
    display: flex;
    gap: 10px;
    line-height: 1.4;
    margin: 10px 0 0;
    padding: 10px 14px;
}

.route-note > svg {
    color: var(--accent);
    flex: 0 0 auto;
    font-size: 18px;
    margin-top: 1px;
}

.route-note code {
    font-family: inherit;
    font-size: 1em;
}

.route-note .pool-domain {
    color: var(--accent);
}

.route-note .route-domain {
    color: var(--success);
}

/* How to Mine server finder: search and continent chips over a table of
   servers (desktop) or a list of countries that open to their servers
   (mobile). */
.server-finder-hint {
    color: var(--secondary-text-color);
    margin: -6px 0 8px;
}

.server-search {
    display: block;
    margin-bottom: 8px;
    position: relative;
}

.server-search svg {
    color: var(--secondary-text-color);
    font-size: 18px;
    inset-inline-start: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.server-search input {
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    color: var(--primary-text-color);
    font: inherit;
    padding: 8px 12px;
    padding-inline-start: 40px;
    width: 100%;
}

.server-search input:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

/* One row of chips that scrolls sideways when the names don't fit. */
.server-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.server-chip {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--primary-text-color);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    padding: 4px 12px;
}

.server-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.server-finder-label {
    color: var(--secondary-text-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.server-finder-empty {
    color: var(--secondary-text-color);
}

.server-locations {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.server-location + .server-location {
    border-top: 1px solid var(--border-color);
}

/* The open country is outlined; an outline draws over its content. */
.server-location.open {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

.server-location-head {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--primary-text-color);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 9px 14px;
    text-align: start;
    width: 100%;
}

.server-location-flag {
    font-size: 20px;
    line-height: 1;
}

/* One line: the country, then its server count at the far end. */
.server-location-name {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    line-height: 1.3;
}

.server-location-name > span {
    color: var(--secondary-text-color);
    font-size: 0.9em;
}

.server-location-name > .server-location-country {
    color: var(--primary-text-color);
    font-size: 1em;
    font-weight: 700;
}

.server-location-head > svg {
    color: var(--secondary-text-color);
    font-size: 18px;
}

.server-location.open .server-location-head > svg {
    color: var(--accent);
}

.server-location-body {
    container-type: inline-size;
    padding: 0 14px 12px;
}

.server-entry + .server-entry {
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
    padding-top: 10px;
}

.server-entry-title {
    align-items: center;
    display: flex;
    font-weight: 700;
    gap: 8px;
    margin-bottom: 6px;
}

.server-code {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-sm);
    color: var(--accent-text);
    font-size: 0.8em;
    padding: 1px 6px;
}

.server-address {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.server-address + .server-address {
    margin-top: 6px;
}

/* A long address wraps (after a hyphen when it can) rather than being cut:
   it has to be readable in full. */
.server-address code {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 13px;
    overflow-wrap: anywhere;
    padding: 6px 10px;
}

.server-copy-button {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: var(--radius);
    color: var(--accent-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 6px;
    padding: 0 12px;
}

.server-copy-button.copied {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border-color: var(--success);
    color: var(--success-text);
}

/* "Copy" and "Copied" share one grid cell, so the button keeps the width of
   the longer label and nothing moves when it flips. */
.server-copy-label {
    display: grid;
}

.server-copy-label > span {
    grid-area: 1 / 1;
}

.server-copy-label > [aria-hidden="true"] {
    visibility: hidden;
}

/* Desktop: a slim toolbar over a dense table, about 27px per row. */
.server-finder-toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.server-finder-toolbar .server-search {
    flex: 0 1 420px;
    margin: 0;
}

.server-finder-toolbar .server-search input {
    padding-block: 5px;
}

.server-finder-toolbar .server-chips {
    margin: 0;
}

.server-finder-toolbar .server-chip {
    padding: 2px 12px;
}

.server-finder-count {
    color: var(--secondary-text-color);
    margin-inline-start: auto;
    white-space: nowrap;
}

/* Scrolls sideways rather than squeezing addresses on narrower desktops. */
.server-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow-x: auto;
}

.server-table {
    background: var(--segment-background);
    border-collapse: collapse;
    width: 100%;
}

.server-table th {
    background: var(--table-header-background);
    color: var(--primary-text-color);
    font-weight: 700;
    padding: 6px 8px;
    text-align: start;
}

.server-table td {
    border-top: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 2px 8px;
    white-space: nowrap;
}

.server-table tbody tr:hover td {
    background: var(--table-hover-background);
}

.server-table tr.copied td {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.server-table-location {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.server-table-location .flag {
    margin: 0;
}

.server-table .server-code {
    font-size: 0.75em;
}

.server-table code {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Copy cells hug their button. */
.server-table-copy {
    width: 1%;
}

.server-table .server-copy-button {
    font-size: 12px;
    gap: 4px;
    padding: 1px 8px;
}

/* Where the longest address (port included, ~290px) and the longest "Copy"
   label (Russian, ~130px) can't share a line, the buttons keep only their
   icon and addresses drop to 12px, so they stay on one line from 390px
   phones up. */
@container (max-width: 422px) {
    .server-copy-button > span {
        display: none;
    }

    .server-address code {
        font-size: 12px;
    }
}

.my-fieldset {
    border: none;
    padding: 0;
}

.cursor-pointer {
    cursor: pointer;
}

.ui.segment.active.tab.bottom.attached {
    padding: 16px 0;
    overflow-x: auto;
}

/* Mobile miner-stats tab menu: every tab in view. Tabs that don't fit wrap
   onto another row instead of scrolling, and grow to fill their row; on phones
   a row holds at most three, so the five split 3 + 2. The lines between tabs
   are the 1px gaps over the menu's background, in the border color, so
   Semantic's dividers are cleared. */
.ui.wrapped.menu {
    flex-wrap: wrap;
    gap: 1px;
    background-color: var(--border-color);
    border-radius: var(--radius);
}

/* The transparent border matches the active tab's, so every row is as tall
   and a label doesn't move when its tab becomes active. */
.ui.wrapped.menu .item {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding: 10px 8px;
    font-size: 0.95em;
    border: 1px solid transparent;
}

.ui.wrapped.menu .item::before {
    background: transparent;
}

/* Semantic's clearfix would take a slot, and a gap, at the end of the last row. */
.ui.wrapped.menu::after {
    content: none;
}

/* Not the -1px that sinks a tab into a tabular menu's bottom border: here it
   would push the active tab past its row. */
.ui.wrapped.menu .item.active {
    margin-bottom: 0;
}

/* Its panel stands apart from it (the menu's bottom margin), so unlike the
   panel under attached tabs it is round all round. */
.ui.wrapped.menu + .ui.segment.active.tab {
    border-radius: var(--radius);
}

@media (max-width: 600px) {
    .ui.wrapped.menu .item {
        flex-basis: 30%;
    }
}

.content {
    color: var(--primary-text-color);
}

.fixed-top-menu {
    position: fixed;
    top: 0;
    left: -12px;
    right: 0;
    width: 100%;
    max-width: 1268px;
    /* Set the maximum width you want for the menu */
    margin: 0 auto;
    /* Center the menu */
    padding: 0 var(--page-gutter);
    /* Match the content container gutter so the bar lines up with the content */
    z-index: 1000;
    /* Ensure the menu stays on top of other elements */
}

/* The menu is --nav-height tall; items have no vertical padding because
   Semantic already centres their content. To fit every UI language on one row
   they are tighter than Semantic's default, and below the menu's 1268px
   max-width tighter still and without icons. Flush with the top of the
   viewport, so its corners are square. */
.fixed-top-menu .ui.menu {
    min-height: var(--nav-height);
    border-radius: 0;
}

.fixed-top-menu .ui.menu .item {
    padding: 0 12px;
}

/* No dividers between items. Semantic draws them as a translucent dark line
   that only shows on a light menu. The line is made transparent rather than
   removed: with display: none, Chrome renders the menu text with greyscale
   instead of subpixel anti-aliasing. */
.fixed-top-menu .ui.menu .item:before {
    background: transparent;
}

/* The current page's item is shaped like the active tab of a tabular menu
   (the Your Stats tabs): bordered, with a bold label. Semantic marks an open
   dropdown active too; it gets neither, so it doesn't read as the current
   page and its label doesn't widen as the menu opens. */
.fixed-top-menu .ui.menu .item.active:not(.dropdown) {
    font-weight: bold;
}

.fixed-top-menu .ui.menu .dropdown.item.active {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* The sun/moon theme button in both top bars: just the icon, no button chrome. */
.theme-toggle {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    line-height: 0;
    padding: 0;
}

@media (max-width: 1267px) {
    .fixed-top-menu .ui.menu .item {
        padding: 0 8px;
    }

    .fixed-top-menu .ui.menu > .item > svg {
        display: none;
    }
}

.fixed-top-menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 1000;
    /* width: 100vw keeps the bar pinned edge-to-edge regardless of horizontal
       overflow in the document below. */
}

/* Language picker: a header over a grid of native names. It opens from a fixed
   bar, so it can't be scrolled into view: cap it to the viewport and let it
   scroll instead. */
.ui.dropdown .menu.language-menu {
    max-height: 80vh;
    overflow-y: auto;
}

.ui.dropdown .menu.language-menu.visible {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 480px;
}

.ui.dropdown .menu.language-menu > .header {
    grid-column: 1 / -1;
    letter-spacing: 0.08em;
}

/* No cell borders, not even the hover one: it would grow the hovered cell and
   shift every row below it. */
.ui.dropdown .menu.language-menu > .item {
    border: none;
}

/* Hover fills the cell instead. Semantic UI makes the hover nearly transparent
   for dropdowns inside a menu (the desktop bar); restore the theme's fill. */
.ui.menu .ui.dropdown .menu.language-menu > .item:hover {
    background-color: var(--dropdown-hover-background);
}

.ui.dropdown .menu.language-menu > .item.active {
    border-inline-start: 3px solid var(--stat-blue);
}

/* In a right-to-left page the desktop picker sits at the left end of the menu,
   so it must open rightwards. */
[dir="rtl"] .ui.menu .right.menu .dropdown:last-child > .menu.language-menu {
    left: 0;
    right: auto;
}

/* Phones: a full-width panel under the bar, two columns. The picker is
   position: static (below), so the panel is placed against the fixed bar. */
.fixed-top-menu-mobile .ui.dropdown .menu.language-menu {
    top: 100%;
    left: var(--page-gutter);
    right: var(--page-gutter);
}

.fixed-top-menu-mobile .ui.dropdown .menu.language-menu.visible {
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The language picker sits on the blue bar like its icon neighbours, not in
   the boxed style .ui.dropdown gives form dropdowns. */
.fixed-top-menu-mobile .ui.dropdown {
    position: static;
    border: none;
    background-color: transparent;
    color: var(--on-accent);
    font-weight: 700;
}

/* Solo Mining Toggle */
.solo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.solo-toggle input {
    display: none;
}

.solo-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--toggle-off-background);
    border-radius: 10px;
    transition: background 0.2s;
}

.solo-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--on-accent);
    border-radius: 50%;
    transition: transform 0.2s;
}

.solo-toggle input:checked~.solo-toggle-track {
    background: var(--green);
}

.solo-toggle input:checked~.solo-toggle-track .solo-toggle-thumb {
    transform: translateX(16px);
}

.solo-toggle-label {
    font-size: 14px;
    color: var(--primary-text-color);
}

/* The worker table's toolbar: its view and column controls, then a note. */
.worker-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 8px;
}

.worker-toolbar-note {
    color: var(--secondary-text-color);
    flex: 1 1 320px;
    line-height: 1.35;
    min-width: 0;
}

/* The row under a paged table, flush with its edges: the pagination at the
   end and, when the table has one, its page-size dropdown at the start, on a
   line of its own where both don't fit. */
.table-paging {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 12px;
}

.table-paging .dropdown {
    margin-inline-end: auto;
}

/* Segmented controls (components/segmented.jsx): a choice among a few options
   as one control. The chosen option is filled green on a quiet track; a lone
   option is an on/off toggle. */
.segmented {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    gap: 2px;
    border-radius: var(--radius);
    background: var(--button-background);
}

.segmented button {
    min-width: 4.5em;
    padding: 4px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--primary-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.segmented button:hover {
    background: var(--button-hover-background);
}

.segmented button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.segmented button[aria-pressed="true"] {
    background: var(--green);
    color: var(--on-accent);
}

.segmented button[aria-pressed="true"]:hover {
    background: var(--button-positive-backgroud-hover);
}

/* The Details cards under the summary (overview-stats.jsx): the Miner Signals
   card beside the two chart cards, in one column on narrower screens. The
   chart cards share their column's height, and their charts grow to fill
   them, so both columns end level. */
.miner-overview {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 12px;
    align-items: stretch;
}

.miner-chart-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.miner-overview-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--segment-background);
}

.miner-chart-stack > .miner-overview-section {
    flex: 1;
}

.miner-chart-stack .chart {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.miner-chart-stack .chart-plot {
    flex: 1;
}

.miner-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.miner-section-header h4 {
    margin: 0;
    color: var(--primary-text-color);
    font-size: 15px;
}

.miner-section-header span {
    color: var(--secondary-text-color);
    font-size: 12px;
    text-align: end;
}

.miner-hash-windows,
.miner-share-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.miner-hash-window {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.miner-hash-window span {
    color: var(--secondary-text-color);
    font-size: 11px;
}

.miner-hash-window strong {
    color: var(--stat-blue);
    font-size: 13px;
    white-space: nowrap;
}

.miner-detail-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 14px;
    padding: 3px 0;
    border-top: 1px solid var(--border-color);
}

/* A group whose title starts its row of tiles (hashrate) or badges (shares):
   the titles share one column width, so both rows' tiles line up. */
.miner-tile-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 8px 0 3px;
}

.miner-tile-row > .miner-inline-subtitle {
    margin: 0;
}

/* The row right under a group's tiles or badges: those already close the
   group above, so no second line. */
.miner-tile-row + .miner-detail-row {
    border-top: 0;
}

/* A group's title, in the accent color so it stands out from the labels. */
.miner-inline-subtitle {
    margin: 8px 0 3px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.miner-section-header + .miner-inline-subtitle,
.miner-section-header + .miner-tile-row {
    margin-top: 0;
}

.miner-detail-label {
    color: var(--secondary-text-color);
}

.miner-detail-hint {
    font-size: 12px;
}

.miner-detail-value {
    min-width: 0;
    margin-inline-start: auto;
    color: var(--primary-text-color);
    font-weight: 700;
    text-align: end;
    overflow-wrap: anywhere;
}

.miner-detail-value.positive {
    color: var(--stat-green);
}

.miner-detail-value.negative {
    color: var(--effort-critical-color);
}

.miner-reward-blocks {
    color: var(--accent-purple);
}

/* A one-line note under a group title, in the attention color. */
.miner-group-note {
    overflow: hidden;
    margin-bottom: 3px;
    color: var(--attention-text-color);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The earnings grid: a label, then the amount in coin, USD and BTC, each in
   its own column so the rows line up. Phones drop the BTC column. */
.miner-money-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.miner-money-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    column-gap: 12px;
    padding: 3px 0;
    border-top: 1px solid var(--border-color);
}

/* Coin amounts in the grid share the summary cards' green, at normal weight. */
.miner-money-row .miner-detail-value {
    color: var(--accent-green);
    font-weight: 400;
}

/* Instead of the balance green: the text color on the total balance and the
   paid-out rows, red on the locked balance. */
.miner-money-row .miner-money-plain {
    color: var(--primary-text-color);
}

.miner-money-row .miner-money-red {
    color: var(--red);
}

.miner-money-sub {
    color: var(--secondary-text-color);
    font-size: 12px;
    font-weight: 600;
    text-align: end;
    white-space: nowrap;
}

.miner-share-badge {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--primary-text-color);
}

.miner-share-kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.miner-share-valid strong {
    color: var(--stat-green);
}

.miner-share-stale strong {
    color: var(--effort-high-color);
}

.miner-share-invalid strong {
    color: var(--effort-critical-color);
}

/* An editable value lays out as flex so the pen centres on its text; the pen
   takes the action accent so it reads as a control, not as punctuation. */
.miner-detail-value.editable {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.miner-detail-edit {
    display: flex;
    margin-inline-start: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--stat-green);
    cursor: pointer;
    line-height: 1;
}

.miner-detail-edit:hover {
    color: var(--hover-text-color);
}

@media (max-width: 1024px) {
    .miner-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .miner-money-grid {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .miner-money-row > .miner-money-sub:last-child {
        display: none;
    }

    /* A phone has no room for a title beside three tiles: it goes back above. */
    .miner-tile-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    /* The three badges keep their row; each stacks its kind under the count. */
    .miner-share-badge {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
    }

    .miner-share-kind {
        font-size: 12px;
    }

    .miner-section-header {
        display: block;
    }

    .miner-section-header span {
        display: block;
        margin-top: 3px;
        text-align: start;
    }
}


/* The Your Stats sections under the overview. In the full view the Full/Tabs
   switch shares the first heading's row; in the tabs view it ends the tab
   bar, or sits above the tabs where they wrap. */
.stats-sections {
    margin-top: 12px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 14px; /* Semantic's h3 margins, carried by the row */
}

.section-head h3 {
    margin: 0;
}

.view-switch-row {
    display: flex;
    justify-content: flex-end;
}

.ui.menu .tabs-aside {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    padding: 0 6px;
}

/* --- PoolInfoBar (ported from c3eadac) --- */
.pool-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 8px;
    line-height: 1.25;
}

.pool-info-compact {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--segment-background);
}

.pool-info-title {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: center;
    color: var(--primary-text-color);
    font-size: 18px;
    font-weight: 700;
}

.pool-info-compact .pool-info-title {
    font-size: 14px;
}

.pool-info-logo,
.pool-info-logo-fallback {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.pool-info-logo {
    object-fit: cover;
}

.pool-info-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--stat-blue);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
}

.pool-info-mode {
    color: var(--secondary-text-color);
    font-weight: 700;
}

.pool-info-algo {
    color: var(--stat-green);
    font-size: 0.9em;
    font-weight: 700;
}

.pool-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.pool-info-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.pool-info-link-website svg {
    color: var(--accent);
}

.pool-info-link-wallet svg {
    color: var(--accent-gold);
}

.pool-info-link-explorer svg {
    color: #13c2c2;
}

.pool-info-link-source svg {
    color: #8b949e;
}

.pool-info-link-discord svg {
    color: var(--discord);
}

.pool-info-link-telegram svg {
    color: #26a5e4;
}

.pool-info-link-x svg {
    color: #1d9bf0;
}

.pool-info-link-p2p svg {
    color: #13a10e;
}

.pool-info-link-resource svg {
    color: var(--accent);
}

.pool-info-divider {
    color: var(--secondary-text-color);
    opacity: 0.8;
}

.pool-info-link svg {
    margin-right: 0;
}

@media (max-width: 600px) {
    .pool-info-bar { gap: 7px 12px; justify-content: flex-start; }
    .pool-info-title { font-size: 15px; }
    .pool-info-logo, .pool-info-logo-fallback { width: 21px; height: 21px; }
    .pool-info-links { gap: 10px 16px; justify-content: flex-start; margin-left: 0; width: 100%; }
    /* Icon-only on mobile to save space; bump the icon a touch for tap targets. */
    .pool-info-link { font-size: 12px; }
    .pool-info-link svg { font-size: 1.3em; }
    .pool-info-link > span { display: none; }
    /* Exchanges keep their full name so users can read where to trade. */
    .pool-info-link-exchange > span { display: inline; }
}

/* --- Notice dialog (components/notice-dialog.jsx) --- */
.notice-dialog {
    position: relative; max-width: 560px; width: 100%; margin: 0 auto;
    padding: 30px 30px 22px; border-radius: calc(var(--radius) * 2); color: #fff; text-align: left; overflow: hidden;
    background:
        radial-gradient(90% 120% at 88% 0%, var(--nd-glow) 0%, transparent 55%),
        linear-gradient(105deg, var(--nd-bg-from) 0%, var(--nd-bg-mid) 52%, var(--nd-bg-to) 100%);
    border: 1px solid var(--nd-border);
    box-shadow: 0 34px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* One palette per level; the accent colours the eyebrow, stat, button and focus ring. */
.notice-dialog--success {
    --nd-glow: rgba(89, 153, 102, 0.32); --nd-border: rgba(113, 204, 139, 0.3);
    --nd-bg-from: #08120c; --nd-bg-mid: #1e3626; --nd-bg-to: #2d4e37;
    --nd-accent: #71cc8b; --nd-on-accent: #052e16; --nd-body: rgba(224, 240, 229, 0.78);
    --nd-bar: var(--nd-accent);
}
.notice-dialog--warn {
    --nd-glow: rgba(217, 119, 6, 0.42); --nd-border: rgba(251, 191, 36, 0.4);
    --nd-bg-from: #1c1203; --nd-bg-mid: #3f2a06; --nd-bg-to: #5e3d08;
    --nd-accent: #fbbf24; --nd-on-accent: #2a1a03; --nd-body: rgba(254, 243, 199, 0.8);
    --nd-bar: repeating-linear-gradient(-45deg, #f59e0b 0 14px, #1c1203 14px 28px);
}
.notice-dialog--error {
    --nd-glow: rgba(180, 30, 45, 0.45); --nd-border: rgba(244, 90, 100, 0.4);
    --nd-bg-from: #240711; --nd-bg-mid: #470f1b; --nd-bg-to: #6a1522;
    --nd-accent: #fbbf24; --nd-on-accent: #2a0810; --nd-body: rgba(255, 228, 228, 0.78);
    --nd-bar: repeating-linear-gradient(-45deg, #f59e0b 0 14px, #170509 14px 28px);
}
.notice-dialog::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--nd-bar); opacity: 0.92;
}
.notice-dialog__close {
    position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.7); cursor: pointer; font-size: 0.82rem; line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.notice-dialog__close:hover { background: rgba(255,255,255,0.18); color: #fff; }
.notice-dialog__eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 14px;
    color: var(--nd-accent); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.notice-dialog__dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--nd-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-accent) 55%, transparent); animation: noticeDialogPulse 1.7s 3; /* a few pulses, then still: an endless box-shadow animation repaints every frame */
}
@keyframes noticeDialogPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 11px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.notice-dialog__title { margin: 0 0 8px; font-size: clamp(1.55rem, 4.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #fff; }
.notice-dialog__body { margin: 0 0 20px; max-width: 50ch; color: var(--nd-body); font-size: 0.97rem; line-height: 1.5; }
.notice-dialog__hero {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
    padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09);
}
.notice-dialog__pct {
    font-size: clamp(2.5rem, 8.5vw, 3.5rem); font-weight: 800; line-height: 1; color: var(--nd-accent);
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 26px color-mix(in srgb, var(--nd-accent) 35%, transparent);
}
.notice-dialog__statlabel { margin-top: 6px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.55); }
.notice-dialog__ctacol { display: flex; flex-direction: column; gap: 10px; }
.notice-dialog__cta {
    display: inline-block; text-align: center; text-decoration: none;
    padding: 11px 20px; border-radius: var(--radius); font-weight: 800; font-size: 0.95rem;
    background: var(--nd-accent); color: var(--nd-on-accent); cursor: pointer; border: none;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--nd-accent) 28%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.notice-dialog__cta:hover {
    background: color-mix(in srgb, var(--nd-accent) 80%, white); transform: translateY(-1px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--nd-accent) 42%, transparent);
}
.notice-dialog__cta--ghost { background: transparent; color: #fff; box-shadow: none; font-weight: 700; border: 1px solid rgba(255,255,255,0.3); }
.notice-dialog__cta--ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.notice-dialog__foot { display: flex; justify-content: flex-end; gap: 20px; margin-top: 18px; }
.notice-dialog__link { background: none; border: none; cursor: pointer; padding: 6px 2px; color: rgba(255,255,255,0.7); font-size: 0.88rem; font-weight: 600; transition: color 0.15s ease; }
.notice-dialog__link:hover { color: #fff; text-decoration: underline; }
.notice-dialog__link--mut { color: rgba(255,255,255,0.42); }
.notice-dialog__link--mut:hover { color: rgba(255,255,255,0.85); }
.notice-dialog a:focus-visible, .notice-dialog button:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; border-radius: var(--radius); }
@media (max-width: 480px) {
    .notice-dialog { padding: 24px 20px 18px; }
    .notice-dialog__hero { flex-direction: column; align-items: flex-start; }
    .notice-dialog__ctacol, .notice-dialog__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .notice-dialog__dot { animation: none; } }

/* --- Toasts (components/toast.jsx): short messages at the bottom of the page --- */
.toasts {
    position: fixed;
    inset-inline: 0;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: min(90vw, 480px);
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--segment-background);
    box-shadow: var(--summary-card-shadow);
    color: var(--primary-text-color);
    font-size: 14px;
}

/* --- Charts (components/svg-chart.jsx and the charts built on it) --- */
/* Inline SVG colored by the theme's --chart-* tokens. The title, the legend
   and the hover tooltip are HTML around and over the drawing. */
.chart {
    background: var(--chart-background);
    border-radius: var(--radius);
    font-size: 10px;
    touch-action: pan-y;
}

/* Geometry is left-to-right whatever the page's direction; the HTML parts follow the page. */
.chart svg {
    display: block;
    direction: ltr;
}

.chart text {
    fill: var(--chart-text-color);
}

.chart-title {
    padding: 8px 10px 2px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--chart-subtitle-color);
}

/* The plot is as tall as its chart's minimum, or as tall as a container that
   stretches it; the drawing lies over it at the measured size, so growing the
   drawing never grows the plot. */
.chart-plot {
    position: relative;
}

.chart-plot > svg {
    position: absolute;
    inset: 0;
}

.chart-grid {
    stroke: var(--chart-gridline-color);
}

.chart-axis {
    stroke: var(--chart-axis-line-color);
}

.chart-fill-start {
    stop-color: var(--chart-area-fill-start);
}

.chart-fill-end {
    stop-color: var(--chart-area-fill-end);
}

.chart-line {
    fill: none;
    stroke: var(--chart-line-color);
    stroke-width: 1.5;
}

.chart-marker {
    fill: var(--chart-line-color);
    stroke: var(--chart-background);
    stroke-width: 1.5;
}

.chart-bar {
    fill: var(--chart-bar-color);
}

.chart-bar.hover {
    fill-opacity: 0.75;
}

.chart-tooltip {
    position: absolute;
    z-index: 1;
    padding: 6px 10px;
    border: 1px solid var(--chart-tooltip-border);
    border-radius: var(--radius-sm);
    background: var(--chart-tooltip-background);
    color: var(--chart-text-color);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}

.chart-tooltip small {
    font-size: 11px;
}

/* The Blocks chart sits on its segment unboxed. Each series has one class that
   sets `color`, so the same class paints its columns or line, its legend
   swatch and its tooltip dot. */
.blocks-chart {
    background: none;
    border-radius: 0;
    font-size: 11px;
}

.blocks-chart .chart-title {
    font-size: 16px;
    color: var(--chart-effort-color);
}

.chart-subtitle {
    text-align: center;
    font-size: 12px;
    color: var(--chart-note-color);
}

.series-effort {
    color: var(--chart-effort-color);
}

.series-blocks {
    color: var(--chart-blocks-color);
}

.series-solo {
    color: var(--chart-solo-color);
}

.series-orphans {
    color: var(--chart-orphans-color);
}

.chart-column {
    fill: currentColor;
}

.chart-stack-outline {
    fill: none;
    stroke: var(--chart-outline-color);
    stroke-width: 1;
}

.blocks-chart .chart-line {
    stroke: currentColor;
    stroke-width: 2;
}

.blocks-chart .chart-marker {
    fill: currentColor;
    stroke: none;
}

.chart-crosshair {
    fill: var(--chart-gridline-color);
    fill-opacity: 0.5;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 18px;
    padding-top: 6px;
    font-size: 12px;
}

.chart-legend button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--chart-text-color);
    font: inherit;
    cursor: pointer;
}

.chart-legend button[aria-pressed="false"] {
    opacity: 0.45;
}

.chart-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: currentColor;
}