.main-container {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

/* Once the panes stack, the grid spans the whole viewport and the cards sit flush against both screen
   edges. A small gutter gives them somewhere to end. */
@media screen and (max-width: 1023px) {
    .main-container {
        padding-inline: 12px;
    }
}

.filters {
    padding-top: 35px;
    flex: 1 1 300px;
    min-width: 300px;
}

.grid-container {
    flex: 1 4 700px;
}

/* Fix the filter rail's width once there is room for a real two-pane layout. It was `flex: 1 1 300px` with
   no ceiling, so the panel grew with the window and the card grid got whatever was left. Pinning it means
   the grid — and so the card width — is predictable at every screen size instead of a by-product. */
@media screen and (min-width: 1024px) {
    .filters {
        flex: 0 0 525px;
        max-width: 525px;
    }
}

/*PAGINATION*/

@container (max-width: 650px) {
    .pagination-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pagination-link {
        display: none;
    }

    .pagination-list li:first-child .pagination-link,
    .pagination-list li:last-child .pagination-link,
    .pagination-list .is-current {
        display: inline-block;
    }

}

@container (min-width: 651px) {
    .pagination-next, .pagination-previous {
        display: none;
    }
}

.pagination-container {
    container-type: inline-size;
    transition: all 0.3s ease;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bulma-scheme-main);
    padding: 10px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

/*CARD*/

.selected {
    border: 2px solid #00d1b2;
    background-color: rgba(0, 209, 178, 0.1);
}

#selected-axies {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.selected-axie-image {
    width: 65px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.selected-axie-image:hover {
    border-color: #00d1b2;
}

/*AXIE IMAGE*/

.card-image {
    position: relative;
}

.morph-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Style the checkbox (optional, for better appearance)*/
#show-morph {
    margin-bottom: 10px;
}
/* .axie-card-info* / .class-img / .delegation-setting-icon / .breed-info / .egg-icon / .margin-bottom-035
   removed with the card rebuild — the overlay is now .dl-class / .dl-id / .dl-stats / .dl-perms below. */

.reservation-timer {
    padding: 5px;
    color: darkred;
}
.reserved-block {
    display: flex;
    justify-content: space-between;
}

.cell {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 0 !important;
}

#available-axies .cell:hover {
    transform: scale(1.03);
}

.disabled-card {
    cursor: not-allowed;
    opacity: 0.5;
}

.disabled-card:hover {
    transform: none !important;
    cursor: not-allowed;
}

.premium-locked-card {
    cursor: not-allowed;
}

.premium-locked-card:hover {
    transform: none !important;
    cursor: not-allowed;
}

.available-axies-wrapper {
    position: relative;
}

/* Signed-out visitors used to get this whole grid blurred and inert — but the pool is the page that has
   to sell itself, and a prospective scholar deciding whether to sign in could not read a single price or
   term. The cards now stay readable and only the ACTION is gated: clicking one answers with the sign-in
   invitation instead of a reservation. */
.available-axies-wrapper.is-anonymous #delegation-and-pagination {
    user-select: auto;
}

/* A banner, not a hover: while the grid was blurred this floated over it as the one readable thing.
   Now that the cards themselves are readable, anything sitting ON them is in the way — so the invitation
   stands above the grid like an ordinary block and the cards are left alone. */
.need-sign-in-banner {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.need-sign-in-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    background-color: var(--bulma-scheme-main, #fff);
    background-clip: padding-box;
    border: 1px solid var(--bulma-border, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    width: min(360px, 90vw);
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .need-sign-in-message {
        background-color: var(--bulma-scheme-main, #1f1f1f);
    }
}

.need-sign-in-message i {
    font-size: 1.75rem;
    color: var(--bulma-link);
}

.need-sign-in-message p {
    margin: 0;
}

.premium-lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 25%;
    font-size: 2rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.premium-locked-card .axie-image {
    filter: grayscale(60%) brightness(0.7);
}

/*SLIDERS*/

.noUi-handle:before, .noUi-handle:after {
    display: none;
}

.slider {
    height: 10px;
}

.slider .noUi-handle {
    height: 15px;
    width: 15px;
    top: -4px;
    right: -9px;
}

.day-col {
    width: 55px;
    padding: 5px;
}
#dayInput {
    text-align: center;
}

.day-slider-container {
    display: flex;
    width: 230px;
}
.day-slider {
    align-self: center;
    width: 100%;
    padding: 5px;
}
.slider-col {
    align-self: center;
}

.slider-and-btn {
    padding-top: 0.75rem;
    justify-content: space-around;
    flex-wrap: wrap;
}

/*MODAL*/

.modal-card-body,
.modal-card-foot,
.modal-card-head {
    padding: 1.5rem;
}
.modal-card-title {
    font-size: clamp(0.85rem, 3vw, 1rem);
    flex-shrink: unset;
    text-wrap-mode: wrap;
}

/*CONFIRMATION*/

.confirmation-process-container {
    display: flex;
    position: absolute;
    z-index: 10;
    justify-content: center;
    width: 100%;
    padding-right: 3rem;
}
/* HTML: <div class="loader"></div> */
.spinner-icon {
    display: none;
    margin-left: 5px;
    width: 16px;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #007bff;
    --_m:
            conic-gradient(#0000 10%,#000),
            linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.confirmation-process-container ul li.active {
    opacity: 1;
}
.confirmation-process-container ul li.error {
    opacity: 1;
}

.confirmation-process-container ul li {
    opacity: 0.5;
    transition: opacity 0.3s, color 0.3s;
    display: flex;
    align-items: center;
}

.step-text {
    margin-right: 10px;
}

.check-icon {
    display: none;
    color: #4caf50; /* Green color for success check mark */
    margin-left: 5px;
}
.error-icon {
    display: none;
    color: #f44336;
    margin-left: 5px;
}

.active .spinner-icon {
    display: inline-block;
}

.active .step-text {
    opacity: 1;
    color: #007bff; /* Blue text for active steps */
}
.completed .step-text {
    color: #4caf50;
}

.completed .spinner-icon {
    display: none;
}

.error .error-icon {
    display: inline-block;
}

.completed .check-icon {
    display: inline-block;
}

.error .spinner-icon {
    display: none;
}

.error .step-text {
    color: #f44336;
}

/*CLASSES CHECKBOX*/

.class-checkboxes {
    text-align: center;
}

/* Visually hidden but still focusable, unlike display:none — which took all nine class filters out of the
   tab order and the accessibility tree, so the pool could not be filtered by class without a mouse at all.
   Same pattern the axie-analysis page already uses. */
.class-checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

/* The image is what the user sees, so that is where the focus ring has to land. */
.class-checkbox input[type="checkbox"]:focus-visible + .checkbox-image {
    outline: 2px solid var(--bulma-link);
    outline-offset: 2px;
}

/* Style images to act as checkboxes */
.checkbox-image {
    width: clamp(25px, 5vw, 40px); /* Adjust size as needed */
    height: clamp(25px, 5vw, 40px); /* Adjust size as needed */
    cursor: pointer;
    border: 1px solid transparent; /* Default state border */
}

/* Style for checked state */
.class-checkbox input[type="checkbox"]:checked + .checkbox-image {
    border: 1px solid #007bff; /* Example border color for checked state */
    border-radius: 4px; /* Rounded corners for visual effect */
}

/* .status-tags / .status-tag / .requirement-* / .liquid-font restyled as .dl-flags / .dl-req below. */

/* PART DROPDOWN*/

.full-width-dropdown {
    display: block;
}

.part-dropdown {
    object-fit: contain;
    width: clamp(30px, 6vw, 50px);
    height: clamp(30px, 6vw, 50px);
}

#dropdownPartContent .dropdown-item {
    display: none;
    align-items: center;
    padding-bottom: 2px;
    padding-top: 2px;
}

#dropdownPartContent .dropdown-item:nth-child(-n+10)  {
    display: flex;
    align-items: center;
    padding-bottom: 2px;
    padding-top: 2px;
}

/*RESERVED*/

#reserved-axies .card {
    display: block !important;
}

/*SWITCHER*/

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The input is a 0x0 transparent box, so the browser's own focus ring is painted on nothing. Without
   this the morph toggle is an invisible stop in the tab order. */
.switch input:focus-visible + .switch-slider {
    outline: 2px solid var(--bulma-link);
    outline-offset: 2px;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .switch-slider {
    background-color: #2196F3;
}

input:checked + .switch-slider:before {
    transform: translateX(14px);
}

.switch-container {
    display: flex;
    align-items: center;
}
.delegation-switch-icon {
    object-fit: contain;
    width: clamp(25px, 4vw, 35px);
}
/* Wraps because this row carries a second thing now (the link to the manager side on the pool page), and on
   a phone the switch and that link do not fit on one line. */
.show-morph-switch {
    padding-bottom: 5px;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

/* The pool's only path to the manager side. Quiet on purpose: this page belongs to whoever is taking axies,
   and an owner who wants it will find one line at the end of a row they are already looking at. Bulma tokens
   rather than --dl-*: the pool grid sits outside .dl-page, where those are declared. */
.dl-tomanager {
    margin-left: auto;
    display: inline-flex; align-items: center; min-height: 2.25rem;
    font-size: 0.78rem; font-weight: 600;
    color: var(--bulma-text-weak);
    text-decoration: none;
}
.dl-tomanager::after { content: "\2192"; margin-left: 0.35rem; }
.dl-tomanager:hover { color: var(--bulma-link); text-decoration: underline; }
.dl-tomanager:focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 2px; }

/* Transient reservation-refusal notices (showPoolNotice in axieDelegation.js). Stacked bottom-right so they
   never sit under the fixed pagination bar, and capped in width so a long message does not span the viewport. */
#pool-notices {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}
.pool-notice {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}

/* Socket-down chip above the reserved tray. Sits in the flow rather than floating, because it is a
   statement about the controls right below it — reserving and confirming both need the socket. */
.dl-conn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--bulma-warning) 45%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bulma-warning) 12%, transparent);
    color: var(--bulma-text-strong, var(--bulma-text));
    font-size: 0.75rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

.dl-conn[hidden] {
    display: none;   /* [hidden] alone loses to display:flex above */
}

.dl-conn__dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bulma-warning);
    animation: dl-conn-pulse 1.4s ease-in-out infinite;
}

@keyframes dl-conn-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-conn__dot {
        animation: none;
    }
}

/* ============================================================================
   Delegation axie card — ported from the Collection Value card language
   (collectionValue.css .cv-card).
   ========================================================================== */

/* The one declaration of the .dl-* token layer, shared by everything drawn in it. .axie-card must stay in
   this selector list in its own right, not inherit through a page wrapper: axieDelegation.js physically
   moves a card between the main grid and the reserved tray, so a card has to carry its own tokens to style
   identically wherever it lands. */
.axie-card,
.dl-page,
.dl-settings {
    --dl-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* built from Bulma scheme vars, so .theme-dark is handled without a second palette */
    --dl-surface:   var(--bulma-scheme-main);
    --dl-surface-2: var(--bulma-scheme-main-bis);
    --dl-ink:       var(--bulma-text-strong, var(--bulma-text));
    --dl-ink-soft:  var(--bulma-text);
    --dl-ink-weak:  var(--bulma-text-weak);
    --dl-line:      color-mix(in srgb, var(--bulma-text) 16%, transparent);
    --dl-line-soft: color-mix(in srgb, var(--bulma-text) 9%, transparent);
    --dl-radius: 10px;

    /* one accent per delegation state — muted, so four of them can share a card without shouting */
    --dl-on:   #4f947a;   /* enabled / permitted   */
    --dl-live: #3a6ea5;   /* currently delegated   */
    --dl-idle: #9c8763;   /* free, nobody has it   */
    --dl-no:   #a8615a;   /* disabled / not permitted */
}

/* The card is a div with role="button", so it gets no focus ring of its own. Outline rather than a border
   so the ring does not reflow the grid, and offset inward-ish so it is not clipped by the neighbours. */
.axie-card:focus-visible {
    outline: 3px solid var(--bulma-link);
    outline-offset: 2px;
}

.axie-card {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    border-radius: var(--dl-radius);
    border: 1px solid var(--dl-line);
    background: var(--dl-surface);
    overflow: hidden;
    box-shadow: none;
    transition: border-color .2s ease, transform .2s ease;
}

.dl-num { font-family: var(--dl-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Grid: column count follows available width instead of a fixed 6/7/8 ---------- */
/* The 300px floor also decides the phone layout: a 360px screen fits exactly one column, which is what
   the card needs to stay readable once the daily targets and badges are on it. No mobile override —
   one number governs both ends, so they cannot drift apart. */
.dl-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-bottom: 1.5rem;
}
.dl-grid-wrap { margin-bottom: 0; }

/* ---------- Media panel ---------- */
.dl-media {
    position: relative;
    /* A container, so the overlays can respond to how wide THIS card is. The grid is
       `minmax(300px, 1fr)`, so card width has no fixed relationship to the viewport — a phone and a
       four-column desktop can produce the same 300px card, and a viewport media query would be guessing. */
    container-type: inline-size;
    margin: 6px 6px 0;
    border-radius: calc(var(--dl-radius) - 2px);
    background: var(--dl-surface-2);
    overflow: hidden;
    /* aspect-ratio, not a fixed height: the same card renders in the wide grid and in the narrow
       reserved tray, and both need the art to stay uncropped. 8:5 matches the reference card's
       280×175 panel — axie art is wider than it is tall, so a 4:3 box just letterboxes it. */
    aspect-ratio: 8 / 5;
}
.dl-media .morph-image,
.dl-media .original-image {
    position: absolute; inset: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.dl-media .axie-image {
    width: 100%; height: 100%;
    object-fit: contain;
    /* Bottom padding reserves the permission row's lane so the art sits above it rather than behind
       it — an axie's feet and tail land exactly where those badges sit. Tracks the badge height. */
    padding: 4px 4px 34px;
}

/* One bar across the top of the art, two columns.
   Four overlays used to be pinned here independently — class+collections and the id each took a corner, and
   the two manager chips (added later) took the same two corners, so a card with a reputation drew it over
   its own id. A flex row makes that impossible: each column stacks, the gap between them is real space, and
   nothing needs to know how tall anything else is. It also retires the hardcoded `top: 40px` on .dl-stats,
   which was a guess at the id chip's height and would have drifted the moment its font or padding changed. */
.dl-media__top {
    position: absolute; top: 7px; left: 7px; right: 7px; z-index: 2;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    pointer-events: none;
}
.dl-media__top > * { pointer-events: auto; }

/* class, collections, and the on-approval chip — top left */
.dl-media-left {
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    min-width: 0;
}
.dl-badges { display: flex; flex-direction: column; gap: 4px; }

/* id, the manager's record, then level/breed/evolution — top right */
.dl-media-right {
    display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
    min-width: 0;
}

.dl-class {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--dl-surface) 80%, transparent);
    border: 1px solid var(--dl-line);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.45);
}
.dl-class img { width: 17px; height: 17px; object-fit: contain; }

/* axie id — top of the right column */
.dl-id {
    font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--dl-ink);
    padding: 3px 8px; border-radius: 8px;
    background: color-mix(in srgb, var(--dl-surface) 78%, transparent);
    border: 1px solid var(--dl-line);
    backdrop-filter: blur(6px);
}

/* level + breed — stacked under the id and the manager's record */
.dl-stats {
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.dl-stat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
    color: var(--dl-ink);
    padding: 3px 8px; border-radius: 8px;
    background: color-mix(in srgb, var(--dl-surface) 80%, transparent);
    border: 1px solid var(--dl-line);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4);
}
.dl-stat i { color: var(--dl-ink-weak); font-size: 0.9em; }

/* Per-part evolution strip — one pip per body part in PartType order, width and colour carrying the stage.
   Same device as the morph-finder and collection-value cards, so the shape reads the same everywhere. */
.dl-evobar {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 24px;
    padding: 6px 4px; border-radius: 8px;
    background: color-mix(in srgb, var(--dl-surface) 70%, transparent);
    border: 1px solid var(--dl-line);
    backdrop-filter: blur(4px);
}
.dl-evobar__pip { height: 6px; border-radius: 2px 1px 1px 2px; background: var(--evo-c); }

/* The strip shares the panel's bottom row with the permissions, so what it needs is row WIDTH, not the
   column height the old right-column layout competed for: the widest permissions row is 178px and the strip
   is 24px, so the two stop fitting at about 210px of row — a ~240px panel. Only the reserved tray ever gets
   that narrow (`minmax(120px, 1fr)`, thumbnail form below 165px); the pool grid's floor is a 300px card, so
   there the strip always shows. A threshold above this hid it from ordinary desktop cards: `auto-fill` packs
   `minmax(300px, 1fr)` tight, so a 1920px window makes four ~319px panels and the old 330px rule blanked the
   strip exactly where there was most room for it. */
@container (max-width: 240px) {
    .dl-evobar { display: none; }
}
.dl-evobar__pip.dl-evo-1 { width: 34%; }
.dl-evobar__pip.dl-evo-2 { width: 68%; }
.dl-evobar__pip.dl-evo-3 { width: 100%; }
.dl-evo-1 { --evo-c: color-mix(in srgb, var(--dl-ink-weak) 70%, transparent); }
.dl-evo-2 { --evo-c: #5f9079; }
.dl-evo-3 { --evo-c: #9c8763; }
.theme-dark .dl-evo-2 { --evo-c: #6fa890; }
.theme-dark .dl-evo-3 { --evo-c: #b59b6f; }

/* Collection badges inherit common.css's full-size pill (padding 5px 10px, icon up to 20px, ~1rem number),
   which is built for a page-level list, not a card overlay. Same trim the reference card applies. */
.dl-badges .badge-collection { padding: 3px 7px; gap: 4px; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.45); }
.dl-badges .badge-icon-wrapper { width: 14px; height: 14px; }
.dl-badges .badge-icon-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.dl-badges .badge-number { font-size: 0.66rem; line-height: 1; color: #fff; }
.dl-badges .badge-collection-container:has(.badge-icon-wrapper):not(:has(.badge-number)) { padding: 0; }
.dl-badges .badge-collection-container:has(.badge-icon-wrapper):not(:has(.badge-number)) .badge-collection { padding: 5px; }

/* The bottom edge, two columns — permissions left, evolution strip right. Same shape as .dl-media__top and
   for the same reason: two things anchored to one edge independently is how they end up on top of each
   other. align-items: flex-end so the tall strip and the short row share a baseline at the bottom. */
.dl-media__bottom {
    position: absolute; left: 7px; right: 7px; bottom: 7px; z-index: 2;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    pointer-events: none;
}
.dl-media__bottom > * { pointer-events: auto; }

/* what the manager permits — bottom left */
.dl-perms {
    display: flex; flex-wrap: wrap; gap: 4px; min-width: 0;
}
/* A tinted plate, not the translucent surface the other overlays use: these icons are small transparent
   glyphs, and on light theme surface-at-80% over the near-white panel gave them nothing to sit on — they
   read as loose artwork dropped on the card. Mixing a little ink into the surface keeps one rule working
   both ways (grey plate on light, lifted plate on dark), and the shadow matches .dl-stat beside it. */
.dl-perm {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 6px; border-radius: 9px;
    background: color-mix(in srgb, var(--dl-ink) 8%, var(--dl-surface));
    border: 1px solid var(--dl-line);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.28);
}
.dl-perm img { width: 22px; height: 22px; object-fit: contain; display: block; }
.dl-perm b { font-size: 0.76rem; font-weight: 600; color: var(--dl-ink); }
/* denied permissions stay visible but recede, so the granted ones read first */
.dl-perm.is-off { opacity: 0.45; }
/* A permission the marketplace is holding differently from what the manager set. Ringed rather than dimmed,
   and it deliberately survives .is-off: the interesting case is precisely a permission that reads "off"
   while the manager's page says "allowed", and dimming that to 45% is how it stayed invisible. */
.dl-perms .dl-perm.is-adrift {
    opacity: 1;
    border-color: var(--dl-idle);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dl-idle) 55%, transparent);
}

/* The permissions column: the row of chips and, under it, the sentence about who set them. One flex child
   of .dl-media__bottom rather than two, because that row is a two-column space-between and a third child
   would be pushed into the middle of it. */
.dl-permcol {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    min-width: 0; max-width: 78%;
}

/* "Not set by this manager." Informational rather than a warning — nothing is wrong, the manager simply
   never connected the account these three are applied from, so they are neither promised nor refused. Uses
   the same muted ink as .dl-adrift but without its ring, because there is nothing here to contradict. */
.dl-ungoverned {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    padding: 2px 6px; border-radius: 8px;
    background: color-mix(in srgb, var(--dl-ink) 8%, var(--dl-surface));
    border: 1px solid var(--dl-line);
    font-size: 0.68rem; line-height: 1.25;
    color: var(--dl-muted, var(--dl-ink));
}
.dl-ungoverned i { font-size: 0.64rem; }

/* The sentence under the icons. Warns without shouting: it is a fact about the delegation, not a failure —
   nothing is broken, the axie simply carries the marketplace's defaults instead of the manager's choices. */
.dl-adrift {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    margin-top: 0.25rem;
    font-size: 0.72rem; line-height: 1.3;
    color: var(--dl-idle);
}
.dl-adrift i { font-size: 0.68rem; }

/* ---------- Body ---------- */
.dl-body { padding: 0.6rem 0.7rem 0.15rem; }

.dl-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.5rem; }
.dl-flag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em;
    padding: 2px 7px; border-radius: 999px;
    color: var(--dl-flag-c, var(--dl-ink-soft));
    background: color-mix(in srgb, var(--dl-flag-c, var(--dl-ink-weak)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--dl-flag-c, var(--dl-ink-weak)) 34%, transparent);
}
.dl-flag::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--dl-flag-c, var(--dl-ink-weak));
}
.dl-flag.is-on   { --dl-flag-c: var(--dl-on); }
.dl-flag.is-off  { --dl-flag-c: var(--dl-no); }
.dl-flag.is-live { --dl-flag-c: var(--dl-live); }
.dl-flag.is-idle { --dl-flag-c: var(--dl-idle); }

/* daily targets — label left, figure right, one row each */
.dl-req { margin: 0; }
.dl-req__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
    padding: 0.2rem 0;
    border-top: 1px solid var(--dl-line-soft);
}
.dl-req__row:first-child { border-top: 0; }
.dl-req__row dt {
    font-size: 0.7rem; font-weight: 500; color: var(--dl-ink-weak);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-req__row dd {
    margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--dl-ink);
}
/* the days-off allowance is context, not a target the scholar has to hit */
.dl-req__row--soft dd { color: var(--dl-ink-soft); font-weight: 500; }
.dl-req--none {
    margin: 0; padding: 0.2rem 0;
    font-size: 0.74rem; color: var(--dl-ink-weak);
}

.axie-card .reservation-timer {
    padding: 0.15rem 0.7rem 0.5rem;
    font-family: var(--dl-mono);
    font-size: 0.72rem;
    color: var(--dl-no);
    margin-top: auto;
}

/* Reserved tray + confirm modal: thumbnails of what the scholar has already picked. Deliberately sized
   below the card's body breakpoint so each one collapses to art + id. */
/* At most MAX_DELEGATED_PER_USER (5) cards ever land here, so there is no reason to pack the row tight:
   a 74px floor produced 75px cards in the 477px rail, which left the axie unrecognisable and the id chip
   wider than the art it sat on. A 120px floor gives three per row and wraps, which is the right trade for
   a surface whose whole job is "check this is what you picked". */
.dl-tray {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* Thumbnail form. The threshold sits below the ~190px a phone gives a two-up card, so a small screen
   keeps the daily targets — only genuinely tiny cards shed them. */
@container (max-width: 165px) {
    .dl-body,
    .dl-perms,
    .dl-permcol,
    .dl-stats,
    .dl-badges { display: none; }
    /* Square panel: a thumbnail is all art, and 8:5 crops it to a strip at this size. */
    .dl-media { aspect-ratio: 1 / 1; margin: 4px 4px 0; }
    .dl-media .axie-image { padding: 2px; }
    /* The id is 9 monospace characters — as a floating chip it covered most of a small card. Anchored as
       a full-width caption along the bottom of the panel it stays readable and never lands on the axie. */
    .dl-id {
        top: auto; right: 0; bottom: 0; left: 0;
        padding: 2px 4px;
        font-size: 0.62rem;
        text-align: center;
        border: 0;
        border-radius: 0;
        background: color-mix(in srgb, var(--dl-surface) 82%, transparent);
    }
    .dl-media-left { top: 4px; left: 4px; }
    .dl-class { width: 18px; height: 18px; }
    .dl-class img { width: 11px; height: 11px; }
    .axie-card .reservation-timer { padding: 0.2rem 0.25rem 0.3rem; font-size: 0.66rem; text-align: center; }
}

/* ============================================================================
   Manager area — overview shell, sub-nav, KPI tiles, attention lists, tables.
   Uses the same .dl-* token layer as the axie card — the one declaration up by
   the card names .dl-page in its selector list, so these components stand alone.
   ========================================================================== */

.dl-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    color: var(--dl-ink-soft);
}

.dl-page__head { margin-bottom: 1.25rem; }
.dl-page__title {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -0.01em;
    color: var(--dl-ink); margin-bottom: 0.75rem;
}

/* ---------- Sub-nav ---------- */
.dl-mnav {
    display: flex; flex-wrap: wrap; gap: 0.25rem;
    border-bottom: 1px solid var(--dl-line-soft);
}
.dl-mnav__item {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem; font-weight: 600;
    color: var(--dl-ink-weak); text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}
.dl-mnav__item:hover { color: var(--dl-ink); }
.dl-mnav__item.is-active { color: var(--dl-ink); border-bottom-color: var(--dl-live); }
.dl-mnav__item i { font-size: 0.85em; opacity: 0.75; }

/* ---------- KPI row ---------- */
.dl-kpis {
    display: grid; gap: 0.75rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.dl-kpi {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-radius: var(--dl-radius);
}
.dl-kpi__label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--dl-ink-weak);
}
.dl-kpi__value {
    font-family: var(--dl-mono); font-size: 1.75rem; font-weight: 600; line-height: 1.1;
    color: var(--dl-ink); font-variant-numeric: tabular-nums;
}
.dl-kpi__value.is-warn { color: var(--dl-idle); }
.dl-kpi__sub { font-size: 0.75rem; color: var(--dl-ink-weak); }
.dl-kpi__sub.is-up { color: var(--dl-on); }
.dl-kpi__sub.is-down { color: var(--dl-no); }

/* ---------- Panels ---------- */
.dl-panel {
    padding: 1rem 1.1rem 1.1rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-radius: var(--dl-radius);
    margin-bottom: 1rem;
}
.dl-panel__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.dl-panel__title { font-size: 0.98rem; font-weight: 700; color: var(--dl-ink); }
.dl-panel__note { font-size: 0.74rem; color: var(--dl-ink-weak); }
.dl-panel__foot { margin-top: 0.6rem; font-size: 0.72rem; color: var(--dl-ink-weak); }

/* ============================================================================
   Scholar page — the axies delegated TO you.

   Same row language as the manager drill-downs, with two columns they do not
   have: the manager's terms (which this page never stated) and today's meter.
   ========================================================================== */

.dl-scholar-table td { vertical-align: middle; }

.dl-scholar-table .dl-row { cursor: pointer; }
.dl-scholar-table .dl-row:focus-visible {
    outline: 2px solid var(--bulma-link);
    outline-offset: -2px;
}

/* An axie one missed day from a revoke earns a rail, not a whole red row — it still has to be readable. */
.dl-scholar-table .dl-row.is-risk td:first-child {
    box-shadow: inset 3px 0 0 var(--bulma-warning);
}

.dl-sel-col { width: 2.5rem; text-align: center; }
.dl-check { display: inline-flex; cursor: pointer; }
.dl-check input:disabled { cursor: not-allowed; }

/* The identity cell itself is the shared .dl-axie component defined with the manager-row styles below —
   this page only changes its scale. The scholar holds at most five axies and is picking one out by sight,
   where a manager is scanning hundreds of rows, so the art earns considerably more room here. */
.dl-scholar-table .dl-axie { gap: 0.7rem; }
.dl-scholar-table .dl-axie__img { width: 156px; height: 117px; }
.dl-scholar-table .dl-axie__id { font-size: 0.9rem; }
.dl-scholar-table .dl-axie__sub { text-transform: capitalize; }

.dl-stack { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }

.dl-expiry { font-size: 0.78rem; color: var(--dl-ink-soft); }
.dl-expiry.is-soon { color: var(--bulma-danger); font-weight: 600; }
/* What an axie a scholar already holds would cost to take today. Quiet on purpose — it is a fact about the
   axie, not a charge about to happen — and it carries its own label, because a bare amount beside a
   delegation reads as a bill. */
.dl-price-now {
    display: block;
    font-family: var(--dl-mono); font-size: 0.68rem; letter-spacing: 0.02em;
    color: var(--dl-ink-weak);
}
.dl-price-now b { color: var(--dl-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.dl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--dl-ink-weak);
    cursor: pointer;
}
.dl-toggle input:disabled { cursor: not-allowed; }
.dl-toggle input:disabled + span { opacity: 0.55; }

.dl-hint { font-size: 0.68rem; color: var(--dl-ink-weak); line-height: 1.3; display: block; }
.dl-hint.is-warn { color: var(--bulma-warning); }

/* Terms: short declarative lines rather than a labelled table — there are only ever three of them. */
.dl-terms { display: flex; flex-direction: column; gap: 0.15rem; }
.dl-term { font-size: 0.72rem; color: var(--dl-ink-soft); white-space: nowrap; }
.dl-term b { color: var(--dl-ink); }
.dl-term--soft { color: var(--dl-ink-weak); }
.dl-terms__none { font-size: 0.72rem; color: var(--dl-ink-weak); font-style: italic; }
/* .dl-perms is an absolutely-positioned overlay on the pool card. Reused in a table cell it has no
   positioned ancestor, so it anchored to the page and the four icons piled up in the bottom-left corner
   of the document — which is exactly what happened. Put it back in the flow and shrink it: this is a
   supporting detail in a dense row, not a card overlay. */
.dl-perms--inline {
    position: static;
    margin-top: 0.3rem;
    gap: 0.2rem;
    max-width: none;
}
/* The box-shadow reset here is what the .dl-perms .dl-perm.is-adrift ring is scoped against: written as
   .dl-perm.is-adrift it tied with this rule on specificity and lost on order, so the ring silently
   disappeared on the scholar table and survived only on the card. */
.dl-perms--inline .dl-perm { padding: 2px 4px; border-radius: 6px; box-shadow: none; }
.dl-perms--inline .dl-perm img { width: 16px; height: 16px; }

/* Today's meter. A bar the width of the cell rather than Bulma's <progress>, so the number can sit on
   top of it — "0 / 6000" beside an empty bar reads as two separate facts. */
.dl-meter {
    position: relative;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--dl-line-soft);
    overflow: hidden;
    min-width: 7rem;
}
.dl-meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--dl-live) 55%, transparent);
    transition: width 0.3s ease;
}
.dl-meter.is-done .dl-meter__fill { background: color-mix(in srgb, var(--dl-on) 70%, transparent); }
.dl-meter__label {
    position: relative;
    display: block;
    text-align: center;
    line-height: 1.35rem;
    font-size: 0.7rem;
    color: var(--dl-ink);
}

/* The ranked bar sits under the AXP one when a manager asks for both, so it needs a little air and its
   own tint — two identical bars stacked read as one control that has wrapped. */
.dl-meter--ranked { margin-top: 0.3rem; }
.dl-meter--ranked .dl-meter__fill { background: color-mix(in srgb, var(--dl-on) 45%, transparent); }

.dl-today--free { font-size: 0.78rem; color: var(--dl-ink-soft); }

/* A target the axie physically cannot work towards. Struck through where it is stated, and stated plainly
   where it matters — never drawn as a full bar the scholar looks to have earned. */
.dl-term.is-waived > .dl-num, .dl-cond .is-waived { text-decoration: line-through; opacity: 0.7; }
.dl-waived { font-size: 0.66rem; color: var(--dl-on); white-space: nowrap; }
.dl-today--waived { font-size: 0.78rem; color: var(--dl-ink-soft); }
.dl-today--waived b { color: var(--dl-on); }
.dl-cal__waived { color: var(--dl-on, #4f947a); }

.dl-daysoff { font-size: 0.76rem; color: var(--dl-ink-soft); white-space: nowrap; }
.dl-daysoff b { color: var(--dl-ink); }
.dl-daysoff.is-spent b { color: var(--bulma-danger); }

/* Revoke confirmation thumbnails. */
#modal-grid.dl-tray { margin-top: 0.75rem; }
.dl-revoke-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem;
    border: 1px solid var(--dl-line, rgba(128, 128, 128, 0.25));
    border-radius: 8px;
}
.dl-revoke-thumb img { width: 100%; height: auto; }
.dl-revoke-thumb figcaption { font-size: 0.7rem; }

/* Narrow screens: stack the cells instead of dropping columns.

   Six columns will not fit a phone at any width worth having, and hiding the ones that do not fit only
   moved the problem — the survivors still overflowed and the last one was sliced down its middle, which
   reads as a rendering fault rather than as "scroll me". Stacked, every cell keeps its own line and the
   checkbox pins to the left of the block so selection stays a single reachable target. */
@media screen and (max-width: 860px) {
    /* Direct children only. Unscoped, these matched the week calendar nested in the detail row too and
       unrolled its seven columns into one cell per line — a 14,000px page of "no data". */
    .dl-scholar-table,
    .dl-scholar-table > tbody,
    .dl-scholar-table > tbody > tr,
    .dl-scholar-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    /* display:block above outranks the user agent's [hidden] { display: none }, so without this every
       collapsed detail row springs open. */
    .dl-scholar-table > tbody > tr[hidden] { display: none; }

    .dl-scholar-table > thead { display: none; }

    /* One card per axie: checkbox and identity on the top line, then a label/value list. Without the
       labels the stack was a column of orphaned values — a lone "—" under a lone "0 AXP" says nothing
       once the header row is gone. */
    /* One card per axie. A shared bottom border was not enough separation: with four labelled pairs
       under each other the whole table read as one column of text, and it was impossible to see where an
       axie ended. Its own surface and a gap do the splitting. */
    .dl-scholar-table > tbody > tr.dl-row {
        display: grid;
        grid-template-columns: 1.5rem 1fr;
        align-items: start;
        column-gap: 0.45rem;
        margin-bottom: 0.7rem;
        padding: 0.6rem 0.6rem 0.2rem;
        background: var(--dl-surface-2);
        border: 1px solid var(--dl-line-soft);
        border-radius: var(--dl-radius);
    }

    .dl-scholar-table > tbody > tr.dl-row > td {
        border: 0;
        padding: 0;
        width: auto;
        min-width: 0;      /* grid items default to min-content, which is what clipped the long values */
    }

    .dl-scholar-table > tbody > tr.dl-row > .dl-sel-col {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0.4rem;
    }

    /* Identity is the card header: it keeps the first line beside the checkbox and carries the rule that
       divides it from the facts below. */
    .dl-scholar-table > tbody > tr.dl-row > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        padding-bottom: 0.55rem;
        border-bottom: 1px solid var(--dl-line-soft);
        margin-bottom: 0.1rem;
    }

    .dl-scholar-table > tbody > tr.dl-row > td:nth-child(n+3) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 0.15rem 0.5rem;
        align-items: start;
        padding: 0.45rem 0;
    }

    /* A hairline between each pair, so the four facts read as four things rather than one block. */
    .dl-scholar-table > tbody > tr.dl-row > td:nth-child(n+4) {
        border-top: 1px solid var(--dl-line-soft);
    }

    /* Every real child belongs in the value column. Left to auto-placement the label is grid item one and
       a cell's SECOND line drops back to column one, so "0 met · 0 missed" sat under the label instead of
       under the figure it qualifies. */
    .dl-scholar-table > tbody > tr.dl-row > td[data-label] > * { grid-column: 2; }

    .dl-scholar-table > tbody > tr.dl-row > td[data-label]::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--dl-ink-weak);
        padding-top: 0.15rem;
        /* The cell inherits nowrap, which the label picks up too: "Manager's terms" needs 117px, could not
           break, and ran straight over the value beside it. Let it wrap, and give the track room not to. */
        white-space: normal;
    }

    .dl-scholar-table > tbody > tr.dl-detail-row > td { padding: 0 0 0.7rem; }

    /* The stacked block is the row, so the risk rail belongs on the block rather than its first cell. */
    .dl-scholar-table > tbody > tr.dl-row.is-risk > td:first-child { box-shadow: none; }
    .dl-scholar-table > tbody > tr.dl-row.is-risk {
        border-color: color-mix(in srgb, var(--bulma-warning) 45%, transparent);
        box-shadow: inset 3px 0 0 var(--bulma-warning);
    }

    /* Long values must wrap inside their column instead of running under the next card edge — at 360px
       "met — max level" and the max-level hint were both being cut off. */
    .dl-scholar-table .dl-term,
    .dl-scholar-table .dl-daysoff,
    .dl-scholar-table .dl-hint,
    .dl-scholar-table .dl-waived { white-space: normal; overflow-wrap: anywhere; }

    /* Give the cards the width the panel padding was taking. */
    .dl-page { padding: 1rem 0.6rem 2rem; }
    .dl-panel { padding: 0.8rem 0.6rem 0.7rem; }
    .dl-page__head { margin-bottom: 0.9rem; }

    /* The meter is a gauge, not a field: stretched across the value column it read as a huge empty pill
       with a number floating in the middle of it. Sized to its content instead. */
    .dl-scholar-table .dl-meter { width: min(11rem, 100%); min-width: 0; }
}

/* Table footer: count on the left, pages in the middle, page size on the right — and on a narrow screen
   they stack in that same reading order rather than being squeezed. */
.dl-tablefoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
}

.dl-tablefoot .dl-panel__foot { margin-top: 0; }

.dl-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.dl-pager[hidden] { display: none; }   /* [hidden] alone loses to display:flex */

.dl-pager__btn {
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--dl-line);
    border-radius: 6px;
    background: transparent;
    color: var(--dl-ink-soft);
    font-family: var(--dl-mono, ui-monospace, monospace);
    font-size: 0.74rem;
    line-height: 1.4;
    cursor: pointer;
}

.dl-pager__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--bulma-link) 55%, transparent);
    color: var(--dl-ink);
}

.dl-pager__btn:focus-visible {
    outline: 2px solid var(--bulma-link);
    outline-offset: 2px;
}

.dl-pager__btn.is-current {
    border-color: var(--bulma-link);
    background: color-mix(in srgb, var(--bulma-link) 14%, transparent);
    color: var(--dl-ink);
    font-weight: 600;
}

.dl-pager__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.dl-pager__btn.is-step { min-width: 0; }

.dl-pager__gap {
    padding: 0 0.15rem;
    color: var(--dl-ink-weak);
    font-size: 0.74rem;
}

.dl-pagesize {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--dl-ink-weak);
}

.dl-pagesize__select {
    width: auto;
    padding: 0.2rem 0.4rem;
    font-size: 0.74rem;
}
.dl-empty { font-size: 0.84rem; color: var(--dl-ink-weak); padding: 0.4rem 0 0.2rem; }

/* The page title: for a screen reader everywhere, for the eyes only on a phone — where the rail comes
   first and a page that opens on the word FILTERS needs to say what it actually is. */
.dl-pool-title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}

/* The rail as a phone disclosure. Desktop hides the summary, and a details whose summary cannot be
   clicked simply stays as rendered — open. */
.dl-rail-disclosure > .dl-rail-disclosure__summary {
    display: none;
}

@media (max-width: 768px) {
    .dl-pool-title {
        position: static;
        width: auto; height: auto;
        margin: 0 0 0.5rem; clip: auto;
        font-size: 1.25rem;
        font-weight: 600;
    }
    .dl-rail-disclosure > .dl-rail-disclosure__summary {
        display: list-item;
        cursor: pointer;
        font-weight: 600;
        padding: 0.6rem 0.25rem;
    }
}

/* The scholar table's shared renewal note, and the width discipline that keeps its promised columns on a
   1440 screen: the Delegation cell held whole paragraphs and pushed Terms/Today/This-week off the edge. */
.dl-table-note { margin: 0 0 0.6rem; max-width: 90ch; }
.dl-scholar-table .dl-stack { max-width: 30ch; }

/* The pool's zero-results answer: visible, centered where the cards would be, with the way out beside it. */
.dl-pool-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--dl-ink-soft, inherit);
}
.dl-muted { color: var(--dl-ink-weak); }

.dl-cols { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media screen and (min-width: 900px) {
    .dl-cols { grid-template-columns: 1fr 1fr; }
}

/* fixed height so the canvas has something to fill */
.dl-chart { position: relative; height: 15rem; }

/* ---------- Attention lists ---------- */
.dl-list { display: flex; flex-direction: column; gap: 0.3rem; }
.dl-list__row {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    border-top: 1px solid var(--dl-line-soft);
}
.dl-list__row:first-child { border-top: 0; }
.dl-list__img {
    width: 48px; height: 36px; object-fit: contain; flex: none;
    background: var(--dl-surface-2); border-radius: 6px;
}
.dl-list__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dl-list__title { font-size: 0.84rem; font-weight: 600; color: var(--dl-ink); text-decoration: none; }
.dl-list__title:hover { text-decoration: underline; }
.dl-list__sub {
    font-size: 0.72rem; color: var(--dl-ink-weak);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-pill {
    flex: none;
    font-family: var(--dl-mono); font-size: 0.7rem; font-weight: 600;
    padding: 0.15rem 0.5rem; border-radius: 999px;
    color: var(--dl-ink-soft);
    background: var(--dl-line-soft);
    border: 1px solid var(--dl-line-soft);
}
/* Target already met today — the only green pill on these tables, so it reads as "nothing to do here". */
.dl-pill.is-ok {
    color: var(--dl-on);
    background: color-mix(in srgb, var(--dl-on) 13%, transparent);
    border-color: color-mix(in srgb, var(--dl-on) 34%, transparent);
}
.dl-pill.is-warn {
    color: var(--dl-idle);
    background: color-mix(in srgb, var(--dl-idle) 13%, transparent);
    border-color: color-mix(in srgb, var(--dl-idle) 34%, transparent);
}
.dl-pill.is-breach {
    color: var(--dl-no);
    background: color-mix(in srgb, var(--dl-no) 13%, transparent);
    border-color: color-mix(in srgb, var(--dl-no) 34%, transparent);
}

/* ---------- Table ---------- */
/* The wrap scrolls sideways, and now SAYS so: an edge shadow that appears exactly when there is more
   table in that direction. Without it the Sources column half-vanished at 1440px and its header
   truncated to a lone letter, with nothing suggesting a manager could scroll to it. The two local-
   attached "cover" gradients ride with the content and hide the scroll-attached shadows at the edges,
   so a table that fits shows nothing at all. */
.dl-table-wrap {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--dl-surface, #fff) 30%, transparent),
        linear-gradient(to left, var(--dl-surface, #fff) 30%, transparent) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 3rem 100%, 3rem 100%, 0.9rem 100%, 0.9rem 100%;
    background-attachment: local, local, scroll, scroll;
}
.dl-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.dl-table th {
    text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--dl-ink-weak);
    padding: 0.3rem 0.6rem; white-space: nowrap;
}
.dl-table td {
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--dl-line-soft);
    white-space: nowrap;
}
.dl-table td a { color: var(--dl-ink); text-decoration: none; font-weight: 600; }
.dl-table td a:hover { text-decoration: underline; }
.dl-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.dl-table tbody tr:hover { background: var(--dl-line-soft); }
.dl-delta { margin-left: 0.3rem; font-size: 0.72rem; font-weight: 600; }
.dl-delta.is-up { color: var(--dl-on); }
.dl-delta.is-down { color: var(--dl-no); }

/* Nav-only strip on the pages that keep their own layout below it. */
.dl-page--bare { padding: 1rem 1rem 0; }

/* ---------- Drill-down tables (Scholars / Axies) ---------- */
.dl-controls {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.75rem;
}
.dl-input {
    flex: 1 1 240px; min-width: 200px;
    padding: 0.4rem 0.7rem; border-radius: 8px;
    font-size: 0.85rem; color: var(--dl-ink);
    background: var(--dl-surface); border: 1px solid var(--dl-line);
}
.dl-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--dl-live) 60%, transparent); outline-offset: 1px; }

.dl-seg { display: inline-flex; border: 1px solid var(--dl-line); border-radius: 8px; overflow: hidden; }
.dl-seg__btn {
    padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600;
    color: var(--dl-ink-weak); background: transparent; border: 0; cursor: pointer;
    border-left: 1px solid var(--dl-line-soft);
}
.dl-seg__btn:first-child { border-left: 0; }
.dl-seg__btn:hover { color: var(--dl-ink); }
.dl-seg__btn.is-active { color: var(--dl-ink); background: var(--dl-line-soft); }

.dl-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dl-table th.is-sortable:hover { color: var(--dl-ink); }
.dl-table th.is-sorted { color: var(--dl-ink); }
.dl-table th.is-sorted::after { content: " ▾"; font-size: 0.8em; }
.dl-table th.is-sorted[data-dir="asc"]::after { content: " ▴"; }
.dl-table td.is-key { font-weight: 600; color: var(--dl-ink); }
.dl-table--rows tbody tr.dl-row.is-expandable { cursor: pointer; }
.dl-table--rows tbody tr.dl-row.is-open { background: var(--dl-line-soft); }
.dl-table--rows td { vertical-align: middle; }

/* the axie identity cell */
.dl-axie { display: flex; align-items: center; gap: 0.55rem; }
.dl-axie__img {
    width: 52px; height: 38px; object-fit: contain; flex: none;
    background: var(--dl-surface-2); border-radius: 6px;
}
.dl-axie__img--none { display: block; }
.dl-axie__meta { display: flex; flex-direction: column; min-width: 0; }
.dl-axie__id { font-weight: 600; color: var(--dl-ink); text-decoration: none; }
.dl-axie__id:hover { text-decoration: underline; }
.dl-axie__sub { font-size: 0.7rem; color: var(--dl-ink-weak); white-space: nowrap; }
.dl-axie__sub.is-ok { color: var(--dl-on); }

.dl-who { display: flex; flex-direction: column; min-width: 0; }
.dl-who__name {
    font-weight: 600; color: var(--dl-ink);
    max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Their record with every manager, under the name. align-self keeps the pill the width of its text inside
   the column flexbox instead of stretching to the cell. */
.dl-who__record { align-self: flex-start; margin-top: 0.2rem; }
/* What this scholar has paid, under their name. Absent for almost everyone, so it is a line rather than a
   column — and quiet, because it is a fact about the past, not something needing attention. */
.dl-who__paid {
    align-self: flex-start; margin-top: 0.15rem;
    font-size: 0.7rem; color: var(--dl-ink-weak);
}
.dl-who__paid strong { color: var(--dl-ink); font-variant-numeric: tabular-nums; }
.dl-who__link { font-size: 0.7rem; color: var(--dl-ink-weak); text-decoration: none; }
.dl-who__link:hover { text-decoration: underline; color: var(--dl-live); }

.dl-cond { font-size: 0.78rem; color: var(--dl-ink-soft); white-space: nowrap; }

/* ---------- AXP source lanes (the Sources column) ----------
   One lane per source, same order on every row, so the column reads down as well as across. See
   axpSources.js for why this replaced a donut. */
.dl-lanes {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    cursor: help;
}
.dl-lanes:focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 3px; border-radius: 4px; }

.dl-lanes__bars,
.dl-lanes__feet { display: grid; grid-template-columns: repeat(var(--dl-lane-count, 6), 12px); gap: 3px; }
.dl-lanes__bars { height: 26px; align-items: end; }

.dl-lane {
    height: 100%;
    border-radius: 2px;
    background: var(--dl-line-soft);
    position: relative;
    overflow: hidden;
}
.dl-lane__fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px; }

.dl-lane__foot { display: flex; justify-content: center; }
/* A source this row never touched keeps its slot but recedes, so the lane order stays readable without
   implying it was played. */
.dl-lane__foot.is-unused .dl-srcicon { opacity: 0.25; filter: grayscale(1); }

.dl-lanes__more { font-family: var(--dl-mono); font-size: 0.6rem; color: var(--dl-ink-weak); }

.dl-lanes--empty {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; height: 26px;
    font-size: 0.75rem; color: var(--dl-ink-weak);
}

/* Icons are five artworks from five different games with no shared silhouette or background; bare on the
   row the bright ones glow and the dark ones vanish, so they all sit on the same plate. */
.dl-srcicon {
    width: 12px; height: 12px; border-radius: 3px;
    object-fit: contain; display: block;
    background: var(--dl-surface-2);
    box-shadow: inset 0 0 0 1px var(--dl-line-soft);
}
.dl-srcicon--none {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--dl-mono); font-size: 7px; font-weight: 700;
    color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: none;
}

/* ---------- The shared source tooltip ---------- */
.dl-srctip {
    position: fixed;
    z-index: 60;
    min-width: 12rem;
    max-width: 17rem;
    padding: 0.6rem 0.7rem;
    background: var(--dl-surface, var(--bulma-scheme-main));
    border: 1px solid var(--dl-line);
    border-radius: 8px;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}
.dl-srctip.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.dl-srctip__head {
    padding-bottom: 0.4rem; margin-bottom: 0.45rem;
    border-bottom: 1px solid var(--dl-line-soft);
}
.dl-srctip__total {
    font-family: var(--dl-mono); font-size: 0.78rem; color: var(--dl-ink);
    font-variant-numeric: tabular-nums;
}
.dl-srctip__list { display: flex; flex-direction: column; gap: 0.3rem; }
.dl-srctip__row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 0.45rem; }
.dl-srctip__icon {
    width: 18px; height: 18px; border-radius: 4px; object-fit: contain; display: block;
    background: var(--dl-surface-2); box-shadow: inset 0 0 0 1px var(--dl-line-soft);
}
.dl-srctip__icon.dl-srcicon--none { font-size: 9px; }
.dl-srctip__name { font-size: 0.78rem; color: var(--dl-ink); white-space: nowrap; }
.dl-srctip__figs {
    font-family: var(--dl-mono); font-size: 0.72rem; color: var(--dl-ink-weak);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dl-srctip__figs b { color: var(--dl-ink-soft); font-weight: 600; }
/* The bar repeats the share as length — a tail source is a number you skim past and a bar you notice. */
.dl-srctip__bar {
    grid-column: 2 / -1; height: 3px; border-radius: 999px;
    background: var(--dl-line-soft); overflow: hidden;
}
.dl-srctip__fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }

@media (prefers-reduced-motion: reduce) {
    .dl-srctip { transition: none; }
}

/* ---------- Per-scholar detail (the expanded row on the Scholars page) ---------- */
/* The person, above their axies: one line of counts opening the scholar drill-down. Reads as a caption
   rather than as a verdict — the numbers are the whole point and there is no colour on them. */
.dl-scholar-record {
    font-size: 0.78rem; color: var(--dl-ink-weak); line-height: 1.5;
    margin-bottom: 0.55rem;
}
.dl-scholar-record strong { color: var(--dl-ink); font-variant-numeric: tabular-nums; }

.dl-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.dl-mini__item {
    padding: 0.55rem 0.65rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line-soft);
    border-radius: 8px;
}
.dl-mini__item.is-risk { box-shadow: inset 3px 0 0 var(--bulma-warning); }

.dl-mini__head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.dl-mini__img { width: 64px; height: 48px; object-fit: contain; flex: none; }
.dl-mini__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 7rem; }
.dl-mini__id .dl-num { font-size: 0.84rem; color: var(--dl-ink); }
.dl-mini__sub { font-size: 0.68rem; color: var(--dl-ink-weak); text-transform: capitalize; }

/* The facts sit in their own auto-fit strip so a narrow panel wraps them instead of squeezing. Columns
   are max-content, not 1fr: stretched to fill a wide panel they drifted so far apart that a value and its
   own label stopped reading as a pair. */
.dl-mini__facts {
    flex: 1 1 16rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, max-content));
    justify-content: start;
    gap: 0.3rem 1.6rem;
}
.dl-mini__fact { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.dl-mini__label {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--dl-ink-weak);
}
.dl-mini__value { font-size: 0.8rem; color: var(--dl-ink-soft); white-space: nowrap; }
.dl-mini__value.is-ok { color: var(--dl-on); }
.dl-mini__value.is-spent { color: var(--bulma-danger); }

.dl-mini__week { margin-top: 0.45rem; }
.dl-mini__week > summary {
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--dl-ink-weak);
    padding: 0.15rem 0;
    list-style-position: inside;
}
.dl-mini__week > summary:hover { color: var(--dl-ink); }
.dl-mini__week > summary:focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 2px; }
/* The calendar is a fixed eight-column table; let it scroll in here rather than widen the panel. */
.dl-mini__cal { margin-top: 0.4rem; overflow-x: auto; }
.dl-mini__cal .dl-cal { font-size: 0.7rem; }

/* HTMX-loaded per-scholar detail */
.dl-detail-row > td { padding: 0 !important; border-top: 0 !important; background: var(--dl-surface-2); }
.dl-detail { padding: 0.5rem 0.6rem; }
.dl-detail:empty::after {
    content: "Loading…"; font-size: 0.78rem; color: var(--dl-ink-weak);
}

@media screen and (max-width: 820px) {
    .dl-table { font-size: 0.78rem; }
    .dl-axie__img { width: 40px; height: 30px; }
    /* The scholar rows stack at this width, so there is a full line for the art rather than a column. */
    .dl-scholar-table .dl-axie__img { width: 104px; height: 78px; }
}

/* Sort control for the stacked layout — hidden wherever the sortable headers are doing the job. */
.dl-sortbar { display: none; }

@media screen and (max-width: 860px) {
    .dl-sortbar {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.6rem;
    }
    .dl-sortbar__label { font-size: 0.7rem; color: var(--dl-ink-weak); white-space: nowrap; }
    .dl-sortbar__select { flex: 1 1 auto; min-width: 0; padding: 0.25rem 0.4rem; font-size: 0.78rem; }
    .dl-sortbar__dir {
        flex: none; width: 2rem; padding: 0.25rem 0;
        border: 1px solid var(--dl-line); border-radius: 6px;
        background: transparent; color: var(--dl-ink-soft); cursor: pointer;
    }
    .dl-sortbar__dir:focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 2px; }

    /* The manager drill-downs stack into cards, same as the scholar page. Nine columns inside a 320px
       wrapper meant a 1,145px table you could only read three columns of at a time. Scoped away from
       .dl-scholar-table, which has its own tuning just above. */
    .dl-table--rows:not(.dl-scholar-table),
    .dl-table--rows:not(.dl-scholar-table) > tbody,
    .dl-table--rows:not(.dl-scholar-table) > tbody > tr,
    .dl-table--rows:not(.dl-scholar-table) > tbody > tr > td {
        display: block;
        width: 100%;
    }

    /* display:block outranks the UA's [hidden] { display: none }, so collapsed detail rows would spring
       open without this. */
    .dl-table--rows:not(.dl-scholar-table) > tbody > tr[hidden] { display: none; }
    .dl-table--rows:not(.dl-scholar-table) > thead { display: none; }

    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-row {
        margin-bottom: 0.7rem;
        padding: 0.6rem 0.6rem 0.2rem;
        background: var(--dl-surface-2);
        border: 1px solid var(--dl-line-soft);
        border-radius: var(--dl-radius);
    }

    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-row > td {
        border: 0;
        min-width: 0;
        padding: 0.45rem 0;
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 0.15rem 0.5rem;
        align-items: start;
    }

    /* First cell is the card header: the axie or the scholar, on its own line. */
    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-row > td:first-child {
        display: block;
        padding: 0 0 0.55rem;
        border-bottom: 1px solid var(--dl-line-soft);
    }
    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-row > td:nth-child(n+3) {
        border-top: 1px solid var(--dl-line-soft);
    }

    /* Numeric columns are right-aligned in a table, which is right there and wrong here: stacked, it
       pushes each value to the far edge and drags its label with it. */
    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-row > td.is-num { text-align: left; }

    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-row > td[data-label] > * { grid-column: 2; }
    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-row > td[data-label]::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1;
        font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--dl-ink-weak);
        padding-top: 0.15rem;
        white-space: normal;
    }

    /* Long identifiers must wrap rather than be cut off — scholar names and raw addresses both overran. */
    .dl-table--rows:not(.dl-scholar-table) .dl-who__name,
    .dl-table--rows:not(.dl-scholar-table) .dl-cond,
    .dl-table--rows:not(.dl-scholar-table) .dl-axie__sub {
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: none;
    }

    /* The last-column width pin is a table-layout trick and means nothing once stacked. */
    .dl-table--rows:not(.dl-scholar-table) td:last-child { width: auto; white-space: normal; }

    .dl-table--rows:not(.dl-scholar-table) > tbody > tr.dl-detail-row > td { padding: 0 0 0.6rem; }

    /* Two KPI tiles across instead of one, so the page does not open with four full-width boxes. */
    .dl-kpis { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .dl-kpi { padding: 0.6rem 0.7rem; }
    .dl-kpi__value { font-size: 1.35rem; }
}

/* Keep the widest columns from pushing the table past its panel; the wrap still scrolls if needed. */
.dl-table--rows td:last-child, .dl-table--rows th:last-child { width: 1%; white-space: nowrap; }
.dl-table--rows .dl-who__link { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }

/* ---------- Settings panel (three-state rows) ----------
   .dl-settings gets its tokens from the shared declaration up by the axie card, so it too stands alone
   when it is drawn outside a .dl-page. */
.dl-settings__intro, .dl-settings__note {
    font-size: 0.74rem; line-height: 1.35; color: var(--dl-ink-weak); margin-bottom: 0.6rem;
}
.dl-set-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.3rem 0; border-top: 1px solid var(--dl-line-soft);
}
.dl-set-row:first-of-type { border-top: 0; }
.dl-set-row__label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 600; color: var(--dl-ink);
}
.dl-set-row__label img { width: 20px; height: 20px; object-fit: contain; }

/* the three-way segment: Leave is the default and stays visually quiet */
.dl-seg--tri .dl-seg__btn { padding: 0.25rem 0.5rem; font-size: 0.72rem; }
.dl-seg--tri .dl-seg__btn[data-value="true"].is-active {
    color: var(--dl-on); background: color-mix(in srgb, var(--dl-on) 15%, transparent);
}
.dl-seg--tri .dl-seg__btn[data-value="false"].is-active {
    color: var(--dl-no); background: color-mix(in srgb, var(--dl-no) 15%, transparent);
}

.dl-settings__summary {
    margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.35; color: var(--dl-ink-weak);
}
.dl-settings__summary.is-ok { color: var(--dl-on); }
.dl-settings__summary.is-error { color: var(--dl-no); }
#applySettingsButton[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Condition calendar ---------- */
/* is-color-danger / is-color-warning were used here but defined in no stylesheet, so the "days off"
   tally and its warning row were never actually coloured. */
.dl-cal { margin-bottom: 0; }
.dl-cal td, .dl-cal th { text-align: center; vertical-align: middle; }
.dl-cal__empty { color: transparent; }
.dl-cal__nodata {
    font-size: 0.66rem; letter-spacing: 0.02em;
    color: var(--bulma-text-weak); cursor: help;
}
.dl-cal__tally { white-space: nowrap; font-size: 0.8rem; }
.dl-cal__tally.is-spent { color: #a8615a; font-weight: 600; }
.dl-cal__warnrow td {
    text-align: right; font-size: 0.74rem; font-weight: 600;
    color: #9c8763;
    background: color-mix(in srgb, #9c8763 12%, transparent);
}
.dl-cal__note { font-size: 0.78rem; color: var(--bulma-text-weak); padding: 0.3rem 0; }

/* ---------- On-approval marker (pool card) ---------- */
/* Managers who hold their own axies sign each delegation themselves, so taking one of theirs is a request.
   A scholar needs that before they spend a reservation on it, which is why this sits on the card and not in
   the confirm dialog. Deliberately quiet — it is a property of the axie, not a warning about it. */
.dl-approval {
    display: inline-flex; align-items: center; gap: 0.25rem;
    max-width: 100%; white-space: nowrap;
    padding: 0.1rem 0.4rem;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--dl-idle);
    background: color-mix(in srgb, var(--bulma-scheme-main) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--dl-idle) 45%, transparent);
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
.dl-approval i { font-size: 0.9em; }

/* ---------- Manager: queue badge ---------- */
.dl-mnav__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
    font-size: 0.7rem; font-weight: 700; line-height: 1;
    color: var(--bulma-scheme-main);
    background: var(--dl-live);
    border-radius: 999px;
}

/* ---------- Manager: axies they may take back free of charge ----------
   The nightly review's certificates, as the manager sees them. Sits above the signing queue and is styled as
   a panel rather than as queue rows on purpose: nothing here is waiting on a signature, and half the
   managers who see it will have had the site do the revoking for them already. The accent is --dl-on rather
   than the queue's --dl-live, because the news is permissive — "this one is free" — and the warning colours
   in this file all mean the opposite. */
.dl-free { border-left: 3px solid var(--dl-on); }
.dl-free__lede {
    max-width: 62ch; margin-bottom: 0.75rem;
    font-size: 0.88rem; color: var(--dl-ink-weak); line-height: 1.55;
}
.dl-frees { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; }
/* One certificate. Three columns that collapse to a stack: what it is, why it is free, and how long for.
   The first two share the row's width and the third pins right, the same shape .dl-queue__item uses. */
.dl-free__row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
    padding: 0.55rem 0.7rem;
    background: color-mix(in srgb, var(--dl-on) 5%, var(--dl-surface-2));
    border: 1px solid color-mix(in srgb, var(--dl-on) 25%, transparent);
    border-radius: var(--dl-radius);
}
.dl-free__axie { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
/* The same 4:3 frame every axie thumbnail in this file uses — a manager recognises their axie by its face
   before its number. */
.dl-free__img { width: 48px; height: 36px; object-fit: contain; flex: none; }
.dl-free__name { font-weight: 600; font-size: 0.85rem; }
.dl-free__id { font-size: 0.75rem; color: var(--dl-ink-weak); }
.dl-free__why { flex: 1 1 18rem; min-width: 0; font-size: 0.78rem; color: var(--dl-ink-soft); }
.dl-free__when { margin-left: auto; font-size: 0.72rem; color: var(--dl-ink-weak); white-space: nowrap; }
.dl-free__queued { color: var(--dl-live); }

/* ---------- Manager: the signing queue ---------- */
.dl-queue { display: flex; flex-direction: column; gap: 1rem; }
.dl-queue__intro { max-width: 62ch; }
.dl-queue__heading { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
.dl-queue__heading--sub { margin-top: 1.5rem; font-size: 0.92rem; color: var(--dl-ink-weak); }
.dl-queue__lede { font-size: 0.88rem; color: var(--dl-ink-weak); line-height: 1.55; }
.dl-queue__empty {
    padding: 2rem 1rem; text-align: center;
    font-size: 0.9rem; color: var(--dl-ink-weak);
    border: 1px dashed var(--dl-line); border-radius: var(--dl-radius);
}

.dl-queue__list { display: flex; flex-direction: column; gap: 0.6rem; }
.dl-queue__item {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    align-items: flex-start; justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-left: 3px solid var(--dl-live);
    border-radius: var(--dl-radius);
}
.dl-queue__item[data-status="SUBMITTED"] { border-left-color: var(--dl-idle); }
.dl-queue__item[data-action-type="RELEASE_REQUEST"] { border-left-color: var(--dl-idle); }

.dl-queue__what { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 22rem; }
.dl-queue__kind { font-size: 0.92rem; font-weight: 600; }
.dl-queue__scholar { font-size: 0.78rem; }
.dl-queue__scholar a { color: var(--dl-ink-weak); word-break: break-all; }
.dl-queue__scholar a:hover { color: var(--dl-live); }
.dl-queue__axies { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.78rem; }
.dl-queue__axies a { color: var(--dl-ink-weak); }
.dl-queue__axies a:hover { color: var(--dl-live); text-decoration: underline; }
/* One axie, as a chip: the name a manager recognises, the id they can check, the class they lend on. Kept on
   one line each so a take of six axies wraps into rows rather than becoming a paragraph. */
.dl-queue__axie {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.1rem 0.55rem 0.1rem 0.2rem;
    border: 1px solid var(--dl-line-soft); border-radius: 999px;
    white-space: nowrap;
}
/* The axie's picture, leading the chip. Same 4:3 frame as the mini rows, a size down so a take of several
   axies still reads as a row of chips and not a gallery; the pill grows around it. */
.dl-queue__axie-img { width: 48px; height: 36px; object-fit: contain; flex: none; }
.dl-queue__axie-name { color: var(--dl-ink); font-weight: 600; }
.dl-queue__axie-class { color: var(--dl-ink-weak); font-size: 0.92em; text-transform: capitalize; }
.dl-queue__note { font-size: 0.75rem; color: var(--dl-idle); }
/* The agreed length, stated plainly: it is what goes on chain the moment this is signed. */
.dl-queue__term { font-size: 0.78rem; color: var(--dl-ink-weak); }
/* Money already paid, waiting on this signature. Coloured as a good thing, which is what it is. */
.dl-queue__earn { font-size: 0.78rem; color: var(--dl-ink-weak); }
.dl-queue__earn strong { color: var(--dl-on); }
/* Who the address belongs to, under it. Its own line because the pill wraps as one piece and the address
   above it is allowed to break anywhere. */
.dl-queue__record { display: block; margin-top: 0.25rem; }
.dl-queue__record .dl-pill { white-space: normal; }
/* Sits above the list, because it acts on all of it. */
.dl-queue__bulk { margin-bottom: 0.9rem; }
/* The deadline is the reason to act now, so it reads as information rather than as a warning — the row it
   sits under already says what the action is. */
.dl-queue__deadline { font-size: 0.75rem; color: var(--dl-ink-weak); }
.dl-queue__deadline time { font-weight: 600; color: var(--dl-ink); }

.dl-queue__act {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
    flex: 0 0 auto;
}
.dl-queue__waiting { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--dl-idle); }
.dl-queue__status { flex-basis: 100%; font-size: 0.76rem; color: var(--dl-no); }
/* A row the poll has resolved in place. The note under it explains an outcome rather than reporting a
   failure, so it stops being red — and on a row that ended well it should not have been red at all. */
.dl-queue__done { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; }
.dl-queue__item[data-status="CONFIRMED"] .dl-queue__done { color: var(--dl-on); }
.dl-queue__item[data-status="CONFIRMED"] { border-left-color: var(--dl-on); }
.dl-queue__item[data-status="FAILED"] .dl-queue__done { color: var(--dl-no); }
.dl-queue__item[data-status="EXPIRED"] .dl-queue__done,
.dl-queue__item[data-status="CANCELLED"] .dl-queue__done { color: var(--dl-idle); }
.dl-queue__item[data-status="CONFIRMED"] .dl-queue__status,
.dl-queue__item[data-status="EXPIRED"] .dl-queue__status,
.dl-queue__item[data-status="CANCELLED"] .dl-queue__status { color: var(--dl-ink-weak); }

/* On a phone the row is one column: the decision above, the buttons under it at full width. The default
   layout puts them side by side, which at 390px leaves the axie chips a third of the screen. */
@media (max-width: 480px) {
    .dl-queue__item { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .dl-queue__what { flex: 1 1 auto; }
    .dl-queue__act { width: 100%; }
    .dl-queue__act .button { flex: 1 1 8rem; }
    .dl-queue__axie { white-space: normal; }
}

.dl-queue__recent { display: flex; flex-direction: column; gap: 0.2rem; }
.dl-queue__recent-item {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
    padding: 0.35rem 0.5rem; font-size: 0.78rem;
    border-bottom: 1px solid var(--dl-line-soft);
}
.dl-queue__recent-kind { font-weight: 600; color: var(--dl-ink-weak); }

.dl-queue__recent-status { font-weight: 600; }
.dl-queue__recent-status.is-confirmed { color: var(--dl-on); }
.dl-queue__recent-status.is-expired,
.dl-queue__recent-status.is-cancelled { color: var(--dl-idle); }
.dl-queue__recent-status.is-failed { color: var(--dl-no); }
.dl-queue__recent-tx { color: var(--dl-ink-weak); text-decoration: underline; }

/* ---------- Manager: onboarding ---------- */
/* A numbered sequence rather than a wall of prose: every step here is a thing the manager does, and two of
   the three are already done by the time they arrive, which is the point worth making. */
.dl-onboard { display: flex; flex-direction: column; gap: 1.25rem; max-width: 70ch; }
.dl-onboard__heading { font-size: 1.2rem; font-weight: 700; }
.dl-onboard__lede { font-size: 0.92rem; color: var(--dl-ink-weak); line-height: 1.6; }
.dl-onboard__lede code { font-size: 0.85em; word-break: break-all; }

.dl-onboard__form { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.dl-onboard__hint { font-size: 0.8rem; color: var(--dl-ink-weak); line-height: 1.5; }
.dl-onboard__submit { margin-top: 0.45rem; }

/* Registration closed to new managers, sitting exactly where the button was. Deliberately the same calm
   surface as the guarantees below it and not a warning colour: nothing has gone wrong for the person
   reading it, and the pool they can see on the other page is still running. */
.dl-onboard__closed {
    padding: 0.75rem 0.9rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line); border-radius: var(--dl-radius);
    font-size: 0.85rem; color: var(--dl-ink-weak); line-height: 1.55;
}

.dl-onboard__facts {
    padding: 0.9rem 1rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line); border-radius: var(--dl-radius);
}
.dl-onboard__facts h3 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.55rem; }
.dl-onboard__facts ul { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.1rem; }
.dl-onboard__facts li { font-size: 0.83rem; line-height: 1.55; color: var(--dl-ink-weak); list-style: disc; }
.dl-onboard__facts strong { color: var(--dl-ink); }

/* ---------- Manager: what a fresh account still has to do ---------- */
/* Registering is one button with nothing to fill in, so people finish it and stop — with every axie they own
   still switched off and nothing anywhere saying so. Each step is real state, so the block shortens as they
   work through it and is not rendered at all once it is empty: a checklist with everything ticked is
   furniture on a page somebody visits for years. Above the account facts, because for the manager who needs
   it this is the only thing on the page worth reading. */
.dl-setup {
    max-width: 70ch;
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1.1rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-left: 3px solid var(--dl-live);
    border-radius: var(--dl-radius);
}
.dl-setup__title { font-size: 0.95rem; font-weight: 700; color: var(--dl-ink); margin-bottom: 0.6rem; }
/* An <ol> for the priority — nothing is offered until an axie is enabled, whatever else is outstanding —
   but no markers: two of the three steps are things you may reasonably never do. */
.dl-setup__steps { display: flex; flex-direction: column; gap: 0.8rem; list-style: none; }
.dl-setup__step {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--dl-line-soft);
}
.dl-setup__step:first-child { padding-top: 0; border-top: 0; }
.dl-setup__what { font-size: 0.88rem; font-weight: 600; color: var(--dl-ink); line-height: 1.4; }
.dl-setup__why { font-size: 0.82rem; color: var(--dl-ink-weak); line-height: 1.55; }
.dl-setup__why strong { color: var(--dl-ink); }
/* A quiet button rather than a text link: it is the point of the step, and on a phone a bare 13px link is
   not a target anyone hits. min-height keeps it at 40px however the label wraps. */
.dl-setup__act {
    display: inline-flex; align-items: center; min-height: 2.5rem;
    padding: 0.3rem 0.8rem; margin-top: 0.15rem;
    font-size: 0.82rem; font-weight: 600;
    color: var(--dl-live); text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--dl-live) 45%, transparent);
    border-radius: var(--dl-radius);
}
.dl-setup__act:hover {
    color: var(--dl-ink);
    border-color: var(--dl-live);
    background: color-mix(in srgb, var(--dl-live) 10%, transparent);
}
.dl-setup__act:focus-visible { outline: 2px solid var(--dl-live); outline-offset: 2px; }

/* ---------- Manager reputation (pool card) ---------- */
/* No contract can stop an owner ending a delegation early, so the only protection a scholar has is knowing
   how often this manager does. Sits opposite the on-approval marker; both are facts about the manager
   rather than the axie, which is why they share the top edge. */
.dl-rep {
    display: inline-flex; align-items: center; gap: 0.25rem;
    max-width: 100%;
    padding: 0.1rem 0.4rem;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
    background: color-mix(in srgb, var(--bulma-scheme-main) 82%, transparent);
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
.dl-rep i { font-size: 0.9em; }
.dl-rep.is-keeps_terms {
    color: var(--dl-on);
    border: 1px solid color-mix(in srgb, var(--dl-on) 45%, transparent);
}
.dl-rep.is-mostly_keeps {
    color: var(--dl-idle);
    border: 1px solid color-mix(in srgb, var(--dl-idle) 45%, transparent);
}
.dl-rep.is-cuts_short {
    color: var(--dl-no);
    border: 1px solid color-mix(in srgb, var(--dl-no) 55%, transparent);
}

/* ---------- Manager: your own record ---------- */
/* Shown to the manager as well as to scholars. The number that decides whether people take your axies
   should not be something you discover from the pool page. */
.dl-standing {
    padding: 0.85rem 1rem; margin-bottom: 1rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line); border-left-width: 3px;
    border-radius: var(--dl-radius);
}
.dl-standing.is-keeps_terms { border-left-color: var(--dl-on); }
.dl-standing.is-mostly_keeps { border-left-color: var(--dl-idle); }
.dl-standing.is-cuts_short { border-left-color: var(--dl-no); }
.dl-standing.is-unproven { border-left-color: var(--dl-line); }
.dl-standing__h { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.3rem; }
.dl-standing p { font-size: 0.85rem; color: var(--dl-ink-weak); line-height: 1.55; }
.dl-standing strong { color: var(--dl-ink); }
.dl-standing__live { margin-top: 0.25rem; }

/* ---------- Manager: where to be told about the queue ---------- */
/* Sits between the onboarding steps and the terms, because it is the thing that makes the queue work at
   all — a manager who is not reachable finds out a scholar was waiting after the axies went back. */
.dl-notify {
    display: flex; flex-direction: column; gap: 0.9rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line); border-radius: var(--dl-radius);
    max-width: 70ch;
}
.dl-notify__heading { font-size: 1rem; font-weight: 700; }
.dl-notify__lede { font-size: 0.85rem; color: var(--dl-ink-weak); line-height: 1.6; }

.dl-notify__channel {
    display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start;
    padding-top: 0.85rem;
    border-top: 1px solid var(--dl-line);
}
.dl-notify__channel-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; }
.dl-notify__channel-head i { font-size: 1.05rem; color: var(--dl-ink-weak); }
.dl-notify__on {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--dl-on);
    border: 1px solid color-mix(in srgb, var(--dl-on) 45%, transparent);
    border-radius: 999px; padding: 0.05rem 0.4rem;
}
.dl-notify__note { font-size: 0.8rem; color: var(--dl-ink-weak); line-height: 1.55; }
.dl-notify__row, .dl-acct__row { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
.dl-notify__row .input, .dl-acct__row .input { flex: 1 1 22rem; min-width: 0; font-size: 0.8rem; }
.dl-acct__row { margin-top: 0.6rem; }
.dl-notify__events {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    padding-top: 0.85rem;
    border-top: 1px solid var(--dl-line);
    font-size: 0.85rem;
}
.dl-notify__status { font-size: 0.78rem; color: var(--dl-ink-weak); flex-basis: 100%; }
.dl-notify__status.is-error { color: var(--dl-no); }

/* ---------- Manager status band (component/renderManagerStatus.jte) ---------- */
/* Two facts a manager cannot get anywhere else: how their transactions are signed, and whether the site
   still holds a working app.axie session for them. Above everything, because both change what the numbers
   below actually mean. */
.dl-mstatus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    /* Short cards hug their content: "Signed for you" is three lines, and stretched to match the tall
       session-expired card beside it, it was mostly empty border. */
    align-items: start;
}
.dl-mstatus.is-compact { margin-bottom: 0.8rem; }

.dl-mstatus__card {
    padding: 0.85rem 1rem;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line); border-left-width: 3px;
    border-left-color: var(--dl-on);
    border-radius: var(--dl-radius);
}
.dl-mstatus__card.is-warn { border-left-color: var(--dl-idle); }
.dl-mstatus__card.is-bad { border-left-color: var(--dl-no); }

.dl-mstatus__head { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.35rem; }
.dl-mstatus__head i { color: var(--dl-ink-weak); }
.dl-mstatus__title { font-size: 0.95rem; font-weight: 700; }
/* The badge that used to sit here printed the mode's own name — CUSTODIAL / BROWSER — beside the title.
   It is admin-panel vocabulary: a manager cannot act on it, and the title next to it already says the same
   thing in words they can. The admin panel still shows the name, which is where that word belongs. */
.dl-mstatus__body { font-size: 0.85rem; color: var(--dl-ink-weak); line-height: 1.55; }
.dl-mstatus__body + .dl-mstatus__body { margin-top: 0.4rem; }
.dl-mstatus__warn { margin-top: 0.4rem; font-size: 0.83rem; color: var(--dl-idle); line-height: 1.5; }
.dl-mstatus__list {
    margin: 0.4rem 0; padding-left: 1.1rem;
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.82rem; color: var(--dl-ink-weak); line-height: 1.5; list-style: disc;
}
.dl-mstatus__list strong { color: var(--dl-ink); }
.dl-mstatus__meta { margin-top: 0.4rem; font-size: 0.78rem; color: var(--dl-ink-weak); }
.dl-mstatus__act {
    display: inline-block; margin-top: 0.5rem;
    font-size: 0.83rem; font-weight: 600; text-decoration: underline;
}
.dl-mstatus__form { margin-top: 0.6rem; }

/* ---------- Settings form, grouped ---------- */
/* The eight rows answer three different questions and used to read as one list. The group titles are the
   questions, so a manager scanning for "what must they do to keep it" stops in the right place. */
.dl-setgroup {
    padding-top: 0.8rem;
    margin-top: 0.8rem;
    border-top: 1px solid var(--dl-line);
}
.dl-setgroup__title {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--dl-ink-weak);
    margin-bottom: 0.55rem;
}
.dl-setgroup__note { font-size: 0.78rem; color: var(--dl-ink-weak); line-height: 1.5; margin-bottom: 0.5rem; }
.dl-setgroup__warn {
    display: flex; gap: 0.45rem;
    padding: 0.5rem 0.6rem; margin-bottom: 0.6rem;
    background: color-mix(in srgb, var(--dl-idle) 10%, var(--dl-surface));
    border: 1px solid color-mix(in srgb, var(--dl-idle) 35%, transparent);
    border-radius: var(--dl-radius);
    font-size: 0.78rem; color: var(--dl-ink); line-height: 1.5;
}
.dl-setgroup__warn i { color: var(--dl-idle); margin-top: 0.15rem; }

/* Where a permission is enforced. Three of the four go through Sky Mavis and stop working when a session
   lapses; the fourth rides in the delegation transaction and always applies. Worth marking on the row
   itself — the difference is invisible otherwise and only shows up as a setting that quietly did nothing. */
.dl-gw {
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em;
    padding: 0.02rem 0.3rem; border-radius: 999px;
    color: var(--dl-ink-weak);
    border: 1px solid var(--dl-line);
    white-space: nowrap;
}
.dl-gw.is-chain { color: var(--dl-on); border-color: color-mix(in srgb, var(--dl-on) 40%, transparent); }
.dl-gw.is-inert {
    color: var(--dl-no);
    border-color: color-mix(in srgb, var(--dl-no) 45%, transparent);
    text-decoration: line-through;
}

.dl-settings__scope { margin-bottom: 0.6rem; }
.dl-set-row__num { max-width: 8rem; }

/* The Price row carries one control more than its neighbours — the three-way segment plus the amount its
   "Set" arm needs — which is more than the rail's width holds on one line, so this row is allowed to wrap
   where the others never have to. */
.dl-set-row--price { flex-wrap: wrap; }
.dl-set-row__hint { font-weight: 400; font-size: 0.7rem; color: var(--dl-ink-weak); }
.dl-price {
    display: inline-flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 0.4rem;
}
.dl-price__input { max-width: 6.5rem; }
/* Live only on "Set". Dimmed rather than hidden so the row keeps its shape as the segment moves. */
.dl-price__input[disabled] { opacity: 0.45; }

/* The rail is taller than a screen, so the button that applies these rows used to scroll away from them —
   and the summary of what was about to change went with it. */
.dl-settings__apply {
    position: sticky; bottom: 0;
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.7rem 0 0.4rem;
    margin-top: 0.8rem;
    background: linear-gradient(to bottom, transparent, var(--dl-surface) 22%);
    border-top: 1px solid var(--dl-line);
}

/* A panel that exists to point somewhere else. */
.dl-panel--link .dl-empty a { text-decoration: underline; }

/* ---------- Manager account page (manager_register.jte, registered state) ---------- */
/* The onboarding stepper is gone once someone is registered: a ticked step telling a signed-in manager
   they are signed in, and their game-account field buried inside a completed card, is a sequence still
   being shown after it has been finished. These are sections of an account instead. */
.dl-acct {
    padding: 1rem;
    margin-bottom: 0.9rem;
    max-width: 70ch;
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-radius: var(--dl-radius);
}
.dl-acct__head { margin-bottom: 0.6rem; }
.dl-acct__title {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 1rem; font-weight: 700;
}
/* ── Manager account page ──────────────────────────────────────────────────
   Two columns from the width where one column stopped being a column and started being a phone page on a
   desk. Left is the machinery a manager operates and is where their eye starts; right is how people reach
   them, which is set once and rarely touched. */
.dl-acct-grid {
    display: grid; gap: 0.9rem; align-items: start;
    grid-template-columns: minmax(0, 1fr);
}
.dl-acct-col { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
@media (min-width: 1040px) {
    .dl-acct-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; }
}
/* The card's own label, in the mono voice the rest of the module uses for identifiers. It says which kind
   of thing this card is before the title says which one — so a page of six cards reads as three groups. */
.dl-acct__eyebrow {
    margin: 0 0 0.15rem;
    font-family: var(--dl-mono); font-size: 0.62rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--dl-ink-weak); opacity: 0.75;
}
.dl-acct__hint { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--dl-ink-weak); line-height: 1.5; }
.dl-acct__inline-form { margin-top: 0.35rem; }

.dl-acct__note { margin-top: 0.25rem; font-size: 0.83rem; color: var(--dl-ink-weak); line-height: 1.55; }
.dl-acct__body { font-size: 0.85rem; color: var(--dl-ink-weak); line-height: 1.6; }
/* Two paragraphs in a row were running together into one grey block. */
.dl-acct__body + .dl-acct__body { margin-top: 0.55rem; }
.dl-acct__scope {
    margin-top: 0.5rem; padding: 0.6rem 0.7rem;
    background: var(--dl-surface-2);
    border: 1px solid var(--dl-line); border-radius: var(--dl-radius);
    font-size: 0.8rem; color: var(--dl-ink-weak); line-height: 1.55;
}
/* A 42-character address in a 0.8rem <code> is wider than a phone. */
.dl-acct__scope code { word-break: break-all; }
.dl-acct__status { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--dl-ink-weak); }
.dl-acct__status:empty { display: none; }
/* These sections end in an action, and it used to be jammed against the last paragraph. */
.dl-acct > .button { margin-top: 0.6rem; }

/* The exact grant — function name, its selector, the address that receives it — folded away. Those are the
   facts a careful manager wants before signing and the ones everyone else stops reading at, so they are one
   click below the sentence that says what it does for them, not above it. */
.dl-disclose { margin-top: 0.7rem; }
/* Padding rather than a min-height on an inline-flex summary: changing its display drops the disclosure
   triangle, which is the only thing marking this as something you can open. */
.dl-disclose > summary {
    cursor: pointer;
    padding: 0.55rem 0;
    font-size: 0.8rem; font-weight: 600; color: var(--dl-ink-weak);
}
.dl-disclose > summary:hover { color: var(--dl-ink); }

.dl-acct__on, .dl-acct__opt, .dl-acct__warn {
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: 0.12em;
    border: 1px solid var(--dl-line); color: var(--dl-ink-weak);
}
.dl-acct__on { color: var(--dl-on); border-color: color-mix(in srgb, var(--dl-on) 45%, transparent); }
/* Something is off and the manager is the only one who can put it right — amber, not red: nothing is
   broken for their scholars, three settings are simply not applying. */
.dl-acct__warn {
    color: var(--dl-idle); border-color: color-mix(in srgb, var(--dl-idle) 50%, transparent);
    background: color-mix(in srgb, var(--dl-idle) 10%, transparent);
}

/* Four facts read as four facts. This was one run-on sentence with the address buried mid-paragraph. */
.dl-acct__facts { display: flex; flex-direction: column; gap: 0.4rem; }
.dl-acct__fact {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--dl-line);
}
.dl-acct__fact:last-child { border-bottom: 0; padding-bottom: 0; }
.dl-acct__fact dt {
    flex: 0 0 13rem;
    font-size: 0.78rem; color: var(--dl-ink-weak);
}
.dl-acct__fact dd { font-size: 0.85rem; min-width: 0; overflow-wrap: anywhere; }

/* The rules, folded. Worth re-reading, not worth a screenful on every visit. */
.dl-acct--terms > summary { cursor: pointer; }
/* The summary is a flex row (dl-acct__title), and flex kills the native ::marker — so without this the
   card read as a heading with no content and the six load-bearing bullets were undiscoverable. */
.dl-acct--terms > summary::after {
    content: "show ▸";
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--dl-ink-weak);
}
.dl-acct--terms[open] > summary::after { content: "hide ▾"; }
.dl-acct--terms[open] > summary { margin-bottom: 0.6rem; }
.dl-acct__terms {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding-left: 1.1rem; list-style: disc;
    font-size: 0.83rem; color: var(--dl-ink-weak); line-height: 1.55;
}
.dl-acct__terms strong { color: var(--dl-ink); }

/* ── The three switches an Axie Infinity sign-in carries ───────────────────
   The signature element of the account page, and the one place its boldness is spent. These are the only
   things the sign-in controls, in the game's own icons and the same words the settings page uses: lit while
   it works, dark the moment it does not. It replaces two paragraphs of explanation with the fact itself —
   nobody misreads three dark lamps. */
.dl-lamps {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin: 0.7rem 0 0; padding: 0.55rem 0.7rem;
    list-style: none;
    background: color-mix(in srgb, var(--dl-on) 8%, var(--dl-surface-2));
    border: 1px solid color-mix(in srgb, var(--dl-on) 30%, transparent);
    border-radius: var(--dl-radius);
    transition: background 220ms ease, border-color 220ms ease;
}
.dl-lamp { display: inline-flex; align-items: center; gap: 0.35rem; }
.dl-lamp__icon {
    width: 22px; height: 22px; object-fit: contain;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dl-on) 55%, transparent));
    transition: filter 220ms ease, opacity 220ms ease;
}
.dl-lamp__name {
    font-size: 0.76rem; font-weight: 600; color: var(--dl-ink);
    transition: color 220ms ease;
}
/* The state word closes the row, so the lamps are never a decoration you have to interpret. */
.dl-lamps__state {
    margin-left: auto;
    font-family: var(--dl-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--dl-on) 80%, var(--dl-ink));
}
.dl-lamps.is-dark {
    background: var(--dl-surface-2);
    border-color: var(--dl-line-soft);
}
.dl-lamps.is-dark .dl-lamp__icon { filter: grayscale(1); opacity: 0.32; }
.dl-lamps.is-dark .dl-lamp__name { color: var(--dl-ink-weak); text-decoration: line-through; text-decoration-thickness: 1px; }
.dl-lamps.is-dark .dl-lamps__state { color: var(--dl-ink-weak); }
/* A third state, and it is not a shade of the other two: "we could not check". Struck-through grey says
   these settings are off, which is a finding — and this is the absence of one. Amber and merely dimmed, no
   line through the names, so nothing on the card claims either direction. */
.dl-lamps.is-unsure {
    background: color-mix(in srgb, var(--dl-idle) 7%, var(--dl-surface-2));
    border-color: color-mix(in srgb, var(--dl-idle) 30%, transparent);
}
.dl-lamps.is-unsure .dl-lamp__icon { filter: grayscale(0.7); opacity: 0.55; }
.dl-lamps.is-unsure .dl-lamp__name { color: var(--dl-ink-soft); }
.dl-lamps.is-unsure .dl-lamps__state { color: color-mix(in srgb, var(--dl-idle) 80%, var(--dl-ink)); }
@media (prefers-reduced-motion: reduce) {
    .dl-lamps, .dl-lamp__icon, .dl-lamp__name { transition: none; }
}

/* ── The sign-in card ──────────────────────────────────────────────────────
   One field carries the whole job, so it gets the full width and the only primary button on the card. */
.dl-sess__state {
    margin-top: 0.6rem;
    font-size: 0.85rem; color: var(--dl-ink-soft); line-height: 1.6;
}
.dl-sess__when { color: var(--dl-ink-weak); }
.dl-sess__field { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.dl-sess__field .input { flex: 1 1 18rem; min-width: 0; font-size: 0.8rem; font-family: var(--dl-mono); }
.dl-sess__more { margin-top: 0.35rem; }
.dl-sess__more > summary {
    cursor: pointer; list-style: none;
    font-size: 0.78rem; color: var(--dl-ink-weak);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted;
}
.dl-sess__more > summary::-webkit-details-marker { display: none; }
.dl-sess__more > summary:hover { color: var(--dl-ink); }
.dl-sess__more[open] > summary { color: var(--dl-ink); }
/* Secondary actions sit under a hairline: they act on the connection that already exists, which is a
   different job from the field above that replaces it. */
.dl-sess__acts {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-top: 0.7rem; padding-top: 0.6rem;
    border-top: 1px solid var(--dl-line-soft);
}
.dl-sess__acts:empty { display: none; }

/* The "where to find it" walk-through under the sign-in card: numbered steps inside the disclosure, same
   voice as the terms list. */
.dl-acct__steps {
    display: flex; flex-direction: column; gap: 0.45rem;
    margin-top: 0.5rem; padding-left: 1.3rem; list-style: decimal;
    font-size: 0.83rem; color: var(--dl-ink-weak); line-height: 1.55;
}
.dl-acct__steps strong, .dl-acct__steps em { color: var(--dl-ink); }
/* Names the reader has to match against their own screen — a domain, a field name — must not be broken
   across a line: "app.axieinfinity.co / m" is a different string to look for. Only the wallet address,
   which is genuinely too long for a phone, is allowed to wrap. */
.dl-acct__steps code { white-space: nowrap; }
.dl-acct__steps code.dl-num { white-space: normal; word-break: break-all; }
/* A key to press, drawn as one. */
.dl-acct__steps kbd {
    font-family: var(--dl-mono); font-size: 0.78em;
    padding: 0.05rem 0.3rem; border-radius: 4px;
    color: var(--dl-ink);
    background: var(--dl-surface-2);
    border: 1px solid var(--dl-line);
    box-shadow: 0 1px 0 var(--dl-line);
}

/* The notification block is one of these sections now, so it drops its own box. */
.dl-acct.dl-notify { max-width: 70ch; }

/* ============================================================================
   Manager fees — the price on a card, the running total in the tray, the payment
   step, and the two places the money is reported back (manager, scholar).

   Everything down to the payment step lives on the pool page, which sits outside
   .dl-page — so those rules use Bulma tokens, like .dl-conn and .dl-tomanager
   above. The card chip is the exception: it is inside .axie-card, where the
   --dl-* layer is declared.
   ========================================================================== */

/* ---------- The price on a pool card ---------- */
/* Same weight and shape as the on-approval marker beside it. A fee is a property of the axie, not a
   warning about it, so it gets the ink colour rather than an accent. */
.dl-fee-chip {
    display: inline-flex; align-items: center;
    max-width: 100%; white-space: nowrap;
    padding: 0.1rem 0.4rem;
    font-family: var(--dl-mono);
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--dl-ink);
    background: color-mix(in srgb, var(--bulma-scheme-main) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--dl-ink-weak) 55%, transparent);
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
/* The same chip on the manager's own settings grid, where it answers a different question: not "what will
   this cost me" but "which of mine are not on my default". So only the override is marked — an axie on the
   default looks like every other axie, which is what it is. */
.dl-fee-chip.is-own { border-color: color-mix(in srgb, var(--dl-live) 55%, transparent); }
.dl-fee-chip__own {
    margin-left: 0.3rem; padding-left: 0.3rem;
    border-left: 1px solid color-mix(in srgb, var(--dl-ink-weak) 40%, transparent);
    font-weight: 500; color: var(--dl-live);
}

/* ---------- The price filter in the rail ---------- */
/* The same segmented control the manager side uses (.dl-seg), rebuilt on Bulma tokens because the pool
   page is outside .dl-page and never gets the --dl-* layer. One row that is allowed to wrap: at 390px the
   three arms take the first line and the cap follows on the second, which is a rail that still fits rather
   than one that scrolls sideways. */
.dl-pricefilter { margin-top: 0.25rem; }
.dl-pricefilter__row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
.dl-pricefilter .dl-seg {
    display: inline-flex;
    border: 1px solid var(--bulma-border-weak, rgba(128, 128, 128, 0.3));
    border-radius: 8px; overflow: hidden;
}
.dl-pricefilter .dl-seg__btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.74rem; font-weight: 600;
    color: var(--bulma-text-weak); background: transparent;
    border: 0; border-left: 1px solid var(--bulma-border-weak, rgba(128, 128, 128, 0.3));
    cursor: pointer;
}
.dl-pricefilter .dl-seg__btn:first-child { border-left: 0; }
.dl-pricefilter .dl-seg__btn:hover { color: var(--bulma-text-strong, var(--bulma-text)); }
.dl-pricefilter .dl-seg__btn.is-active {
    color: var(--bulma-text-strong, var(--bulma-text));
    background: color-mix(in srgb, var(--bulma-text) 9%, transparent);
}
/* The amount and its unit wrap as one thing: at 390px the row breaks after the arms, and a "USDC / day"
   that had drifted onto a line of its own would read as a label for the hint underneath it. */
.dl-pricefilter__amount {
    display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.dl-pricefilter__input {
    max-width: 5.5rem;
    font-family: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-variant-numeric: tabular-nums;
}
/* Live only on "Under". Dimmed rather than removed so the rail does not reflow as the arms change — the
   same choice the manager's price row makes. */
.dl-pricefilter__input[disabled] { opacity: 0.45; }
.dl-pricefilter__unit, .dl-pricefilter__hint {
    font-size: 0.7rem; color: var(--bulma-text-weak);
}
.dl-pricefilter__hint { margin-top: 0.3rem; line-height: 1.35; }
/* The cap that could not be read. Empty is the normal state, and an empty box with a border is furniture
   about nothing — :empty rather than [hidden] because the swap that fills it only writes the text. */
.dl-pricefilter__note {
    margin-top: 0.3rem;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, #a8615a 45%, transparent);
    font-size: 0.72rem; line-height: 1.4;
    color: var(--bulma-text-strong, var(--bulma-text));
}
.dl-pricefilter__note:empty { display: none; }

/* ---------- What the reserved tray costs so far ---------- */
.dl-traytotal {
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bulma-border-weak, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--bulma-text-weak);
}
.dl-traytotal strong { color: var(--bulma-text-strong, var(--bulma-text)); font-size: 0.85rem; }

/* ---------- The payment step, inside the confirm dialog ---------- */
.dl-pay {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--bulma-border-weak, rgba(128, 128, 128, 0.3));
    border-radius: 8px;
    background: var(--bulma-scheme-main-bis);
}
/* [hidden] alone loses to display:flex — the same trap .dl-conn documents above. */
.dl-pay[hidden] { display: none; }

.dl-pay__title { font-size: 0.95rem; font-weight: 700; color: var(--bulma-text-strong, var(--bulma-text)); }
.dl-pay__total {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
    font-size: 0.85rem; color: var(--bulma-text-weak);
}
.dl-pay__total strong {
    font-family: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem; font-weight: 700;
    color: var(--bulma-text-strong, var(--bulma-text));
}
.dl-pay__unit { font-size: 0.78rem; }

/* The two promises. These are the whole reason a scholar is willing to pay before anything has happened,
   so they are a list and not a footnote. */
.dl-pay__promises {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding-left: 1.05rem; list-style: disc;
    font-size: 0.8rem; line-height: 1.5; color: var(--bulma-text-weak);
}
.dl-pay__promises strong { color: var(--bulma-text-strong, var(--bulma-text)); }

.dl-pay__breakdown {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    background: var(--bulma-scheme-main);
    font-family: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: 0.72rem; line-height: 1.5;
    color: var(--bulma-text-weak);
    overflow-wrap: anywhere;
}
.dl-pay__breakdown[hidden] { display: none; }

.dl-pay__where { font-size: 0.72rem; color: var(--bulma-text-weak); line-height: 1.5; }
/* A 42-character address is wider than a phone. */
.dl-pay__where code { overflow-wrap: anywhere; font-size: 0.95em; }
.dl-pay__hold { font-size: 0.72rem; color: var(--bulma-text-weak); }
.dl-pay__status { font-size: 0.78rem; color: var(--bulma-text-weak); line-height: 1.5; }
.dl-pay__status.is-error { color: var(--bulma-danger); }
.dl-pay .button { align-self: flex-start; }

@media screen and (max-width: 480px) {
    /* One thumb-width button, and the total large enough to check against a wallet at arm's length. */
    .dl-pay .button { align-self: stretch; }
    .dl-pay__total strong { font-size: 1.3rem; }
}

/* A refusal under one of the account sections — the grant, a channel — reads as a refusal. */
.dl-acct__status.is-error { color: var(--dl-no); }

/* ---------- Manager: what the fee has earned (manager_overview.jte) ---------- */
.dl-earn__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}
.dl-earn__figure {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.6rem 0.7rem;
    background: var(--dl-surface-2);
    border: 1px solid var(--dl-line-soft);
    border-radius: var(--dl-radius);
}
.dl-earn__label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--dl-ink-weak);
}
.dl-earn__value { font-size: 1.15rem; font-weight: 700; color: var(--dl-ink); }
.dl-earn__sub { font-size: 0.72rem; color: var(--dl-ink-weak); line-height: 1.4; }

.dl-earn__payouts { display: flex; flex-direction: column; gap: 0.35rem; }
.dl-earn__payout {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--dl-line-soft);
    font-size: 0.8rem;
}
.dl-earn__payout:last-child { border-bottom: 0; padding-bottom: 0; }
.dl-earn__payout strong { color: var(--dl-ink); }
.dl-earn__for, .dl-earn__when { color: var(--dl-ink-weak); font-size: 0.75rem; }
.dl-earn__tx { margin-left: auto; font-size: 0.75rem; text-decoration: underline; }

/* ---------- Scholar: takes waiting on a manager (component/renderScholarQueuedTakes.jte) ---------- */
/* Reads as a held thing rather than as a problem: nothing has gone wrong, somebody simply has to sign. */
.dl-waits { display: flex; flex-direction: column; gap: 0.6rem; }
.dl-wait {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    background: var(--dl-surface-2);
    border: 1px solid var(--dl-line-soft);
    border-left: 3px solid var(--dl-idle);
    border-radius: var(--dl-radius);
}
.dl-wait__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; }
.dl-wait__count { font-weight: 600; color: var(--dl-ink); }
/* ---------- The other side's Discord handle, where one has been published ----------
   Used on both sides of the delegation — the scholar's waiting-takes block and the manager's Scholars and
   Queue rows — so it is defined once here rather than per page. Never a link: the handle is a string
   somebody typed about an account this site cannot verify, and a URL built out of it is a URL a stranger
   chose. It is text to copy, and the tooltip says so. */
.dl-contact-chip {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    padding: 0.05rem 0.4rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--dl-live) 35%, transparent);
    font-size: 0.72rem; color: var(--dl-ink-weak);
    /* A handle is user-typed, and 32 characters of it must not push a row sideways on a phone. */
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-contact-chip i { color: var(--dl-live); }

.dl-wait__manager { font-size: 0.78rem; color: var(--dl-ink-weak); }
.dl-wait__manager a { color: var(--dl-ink-weak); text-decoration: underline; }
.dl-wait__manager a:hover { color: var(--dl-live); }
.dl-wait__axies { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.78rem; }
.dl-wait__axie {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.1rem 0.55rem 0.1rem 0.2rem;
    color: var(--dl-ink-weak);
    border: 1px solid var(--dl-line-soft); border-radius: 999px;
}
.dl-wait__axie:hover { color: var(--dl-live); }
/* The same 48×36 face as the manager's To sign chips — the two pages show the same take from either side. */
.dl-wait__axie-img { width: 48px; height: 36px; object-fit: contain; flex: none; }
.dl-wait__axie-name { color: var(--dl-ink); font-weight: 600; }
.dl-wait__paid { font-size: 0.78rem; color: var(--dl-ink-weak); }
.dl-wait__paid strong { color: var(--dl-ink); }
.dl-wait__when { font-size: 0.75rem; color: var(--dl-ink-weak); }
.dl-wait__when time { font-weight: 600; color: var(--dl-ink); }

/* ---------- Scholar: what they paid (component/renderScholarPayments.jte) ---------- */
.dl-pays__sum {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
    margin-bottom: 0.6rem;
    font-size: 0.78rem; color: var(--dl-ink-weak);
}
.dl-pays__sum strong { color: var(--dl-ink); }

.dl-pays > summary {
    cursor: pointer;
    padding: 0.4rem 0;
    font-size: 0.8rem; font-weight: 600; color: var(--dl-ink-weak);
}
.dl-pays > summary:hover { color: var(--dl-ink); }

.dl-pays__list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; }
.dl-pays__dep {
    padding: 0.6rem 0.7rem;
    background: var(--dl-surface-2);
    border: 1px solid var(--dl-line-soft);
    border-radius: var(--dl-radius);
}
.dl-pays__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    font-size: 0.85rem;
}
.dl-pays__head strong { color: var(--dl-ink); }
.dl-pays__when { font-size: 0.75rem; color: var(--dl-ink-weak); }
.dl-pays__tx { font-size: 0.72rem; text-decoration: underline; }
.dl-pays__head .dl-pays__tx { margin-left: auto; }

.dl-pays__rows { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.45rem; }
.dl-pays__row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem;
    font-size: 0.78rem; line-height: 1.5; color: var(--dl-ink-soft);
}
.dl-pays__row code { font-size: 0.95em; color: var(--dl-ink-weak); }
.dl-pays__for { color: var(--dl-ink-weak); }
.dl-pays__foot {
    margin-top: 0.7rem;
    font-size: 0.74rem; line-height: 1.55; color: var(--dl-ink-weak);
}

/* While the payment step is up, the dialog's own Confirm is not the button any more — and Bulma paints
   .button as inline-flex, which outranks the [hidden] attribute unless it is said again here. */
.modal-card-foot .button[hidden] { display: none; }