/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.theme {
    /* ===== Pager ===== */

    /* Paint only: the space between the table and the pager is the table tray's spacing, and the pager's
       own box is the strip's -- padding here would only eat inward against the strip's fixed height. */
    .rspond-pager {
        font-size: var(--rspond-font-size-medium);
    }

    /* Paint only. The size of a pager control is the pager's own design, stated in Java where the control is
       built, and where the digit sits inside the square is that control's content tray -- a theme decides what a
       control looks like, never how big it is or how its parts are arranged. Every control in the row carries
       this class; a page number carries rspond-pager-page as well, which is the hook below. */
    .rspond-pager-button {
        padding: 0 var(--rspond-toolbar-padding-x);
        font-size: var(--rspond-toolbar-font-size);
        border: var(--rspond-border-width) solid var(--rspond-border-color);
        border-radius: var(--rspond-border-radius-medium);
        background: var(--rspond-page-background-primary);
        color: var(--rspond-components-text-primary);
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .rspond-pager-button:hover {
        background: var(--rspond-card-background-hover);
        border-color: var(--rspond-components-text-muted);
    }

    .rspond-pager-button.rspond-disabled {
        opacity: var(--rspond-components-opacity-disabled);
        cursor: not-allowed;
        pointer-events: none;
    }

    .rspond-pager-page.rspond-current {
        background: var(--rspond-brand-green);
        color: var(--rspond-button-primary-text);
        border-color: var(--rspond-brand-green);
        font-weight: 600;
        opacity: 1;
    }

    .rspond-pager-range {
        color: var(--rspond-components-text-muted);
        white-space: nowrap;
    }

    .rspond-pager-size-selector {
        background: var(--rspond-page-background-primary);
        border: var(--rspond-border-width) solid var(--rspond-border-color);
        border-radius: var(--rspond-border-radius-medium);
        color: var(--rspond-components-text-primary);
        padding: var(--rspond-toolbar-padding-y) var(--rspond-toolbar-padding-x);
        font-size: var(--rspond-toolbar-font-size);
        cursor: pointer;
    }

    .rspond-pager-size-selector:focus {
        outline: none;
        border-color: var(--rspond-status-info);
        box-shadow: var(--rspond-components-focus-ring);
    }

    /* --- Tab Bar --- */

    /* The bar is a tray, so its direction and the space between tabs come from Java. This element is the tray's
       own tag; the flex container is the layout div inside it, which is why declaring flex here arranged nothing
       and a gap of zero sat between a single child and itself. */
    .rspond-tab-bar {
        border-bottom: var(--rspond-border-width) solid var(--rspond-border-color-subtle);
    }

    /* No gap: a link puts its icon and title in a tray, so this anchor has a single child and there is
       nothing for a gap to sit between. The tray owns that spacing now. */
    .rspond-tab a {
        padding: 8px 10px;
        font-size: var(--rspond-font-size-default);
        font-weight: 400;
        color: var(--rspond-components-text-muted);
        text-decoration: none;
        transition: all 0.15s ease;
    }

    .rspond-tab a:not(.rspond-current):hover {
        color: var(--rspond-components-text-primary);
    }

    /* The underline is painted inside the tab's own box rather than drawn as a border and nudged down onto the bar's
       baseline rule, so nothing here depends on the bar's border width.

       A gradient rather than the inset box-shadow this used to be, because box-shadow is how a focused control is
       washed and a theme rule outranks the component layer that states the wash. The active tab would therefore have
       been the one control that could be focused and show nothing for it -- the same tab that, until recently, could
       not be focused at all. A gradient paints in exactly the same place and leaves the state property alone. */
    .rspond-tab a.rspond-current {
        color: var(--rspond-components-text-primary);
        font-weight: 500;
        background-image: linear-gradient(to top, var(--rspond-link-color) 2px, transparent 2px);
        cursor: default;
    }

    /* ===== Table ===== */

    /* align-self answers to a flex parent, and this element's parent is the tray's item wrapper, which is not
       one -- so the declaration that used to sit here decided nothing. How a table sits in what holds it is the
       WebSizing the placing tray resolves. */
    /* A tray now: direction, wrapping and the space between badges all come from Java. */
    .rspond-table-basket {
        font-size: var(--rspond-toolbar-font-size);
    }

    /* Reached by name rather than by being an anchor that happens to be a child of the basket: the basket is a
       tray now, so it wraps each item and "> a" matched nothing. The space before it is the tray's Spacing, and
       the anchor takes its own height from its content, so neither is stated here. */
    .rspond-table-basket-clear {
        color: var(--rspond-components-text-secondary);
        text-decoration: underline;
        cursor: pointer;
        font-size: var(--rspond-toolbar-font-size);
    }


    .rspond-table-toolbar .rspond-form-control,
    .rspond-table-toolbar .rspond-form-select {
        padding: var(--rspond-toolbar-padding-y) var(--rspond-toolbar-padding-x);
        font-size: var(--rspond-toolbar-font-size);
    }

    /* A select keeps the room its drawn chevron stands in; the toolbar's inset replaces only the text's side. */
    .rspond-table-toolbar .rspond-form-select {
        padding-right: 30px;
    }

    .rspond-table-body input:not([type="checkbox"]):not([type="radio"]),
    .rspond-table-body select,
    .rspond-table-body textarea {
        background-color: var(--rspond-page-background-primary);
        border: var(--rspond-border-width) solid var(--rspond-border-color);
        border-radius: var(--rspond-border-radius-medium);
        color: var(--rspond-components-text-primary);
        font-family: inherit;
        font-size: inherit;
        padding: 4px 8px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /* The color alone above, never the background shorthand, so a cell's select keeps its drawn chevron; and the room
       it stands in, which the cell's inset would otherwise take back. */
    .rspond-table-body select {
        padding-right: 30px;
    }

    .rspond-table-body input:not([type="checkbox"]):not([type="radio"]):focus,
    .rspond-table-body select:focus,
    .rspond-table-body textarea:focus {
        outline: none;
        border-color: var(--rspond-status-info);
        box-shadow: var(--rspond-components-focus-ring);
    }

    /* A table row's top and bottom room is not a rule here: the table states it in Java as its rows' inside space
       (TableRowPadding), because a row's line of cells holds the row height with that room inside it and a detail
       panel opening below takes the bottom room after itself -- a split no stylesheet padding can express. */

    .rspond-table-header {
        padding: 8px 12px;
    }


    /* The rhythm between columns is not a rule here. The banded grid's own gap is zero -- lanes are alignment
       rails -- and the space between one column and the next is each cell's and heading's leading space, the
       columns' own spacing level, which Java places inside the next column's track. A theme tunes it by defining
       --rspond-space-column among its tokens. */

    /* ===== Row Detail Expansion ===== */

    .rspond-table-expand-toggle {
        transition: transform 0.15s ease;
        cursor: pointer;
        font-size: 0.9em;
        opacity: 0.6;
    }

    .rspond-table-expand-toggle:hover {
        opacity: 1;
    }

    .rspond-table-expand-toggle.rspond-expanded {
        transform: rotate(90deg);
    }

    /* An opened row's detail is a recessed well under the row it came from: the page's recessed surround as its
       fill, so it reads as set into the table rather than as one more row, and a subtle border to close it off
       from the row beneath. */
    .rspond-table-detail {
        padding: var(--rspond-space-small) var(--rspond-space-medium);
        background: var(--rspond-page-background-secondary);
        border: var(--rspond-border-width) solid var(--rspond-border-color-subtle);
        border-radius: var(--rspond-border-radius-medium);
    }

    /* ===== Column Header ===== */

    /* @rspond-css-out-of-flow-exemption A containing block for the resize handle pinned to this cell's edge; it carries no
       inset and moves nothing. */
    .rspond-column-header {
        position: relative;
        /* A table header reads as a header, not body text: the same mono micro-eyebrow used by section headers.
           Sortable headers keep their link colour; plain ones are muted. */
        font-family: var(--rspond-fonts-family-mono);
        font-size: var(--rspond-font-size-small);
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--rspond-components-text-heading);
    }

    .rspond-column-header-icon {
        color: var(--rspond-sort-icon-color);
    }

    /* ===== Column Resize ===== */

    /* @rspond-css-out-of-flow-exemption The drag affordance rides the boundary between two columns: pinned to the cell's
       edge, it displaces nothing and nothing displaces it, so its geometry was never any tray's to state. */
    .rspond-column-resize-handle {
        position: absolute;
        right: -4px;
        top: 0;
        bottom: 0;
        width: 8px;
        cursor: col-resize;
        background: transparent;
        z-index: 1;
    }

    .rspond-column-resize-handle::after {
        content: '';
        position: absolute;
        top: 25%;
        bottom: 25%;
        left: 50%;
        transform: translateX(-50%);
        width: var(--rspond-resize-handle-width);
        background: var(--rspond-resize-handle-color);
        border-radius: 1px;
        transition: background-color 0.15s ease;
    }

    .rspond-column-resize-handle:hover::after {
        background: var(--rspond-resize-handle-color-hover);
    }

    .rspond-table-resizing {
        cursor: col-resize;
        user-select: none;
    }

    /* ===== Expandable label ===== */

    /* @rspond-css-dynamic-exemption A toolbar title that expands on hover. Both ends of the transition are written
       here, with the transition that drives them: a tray states where boxes rest and has no way to say "over
       300ms while hovered", and splitting the two ends across two languages would leave neither readable. */
    .rspond-expandable-link-title {
        display: inline-block;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width 0.3s ease, opacity 0.25s ease, margin-left 0.3s ease;
        margin-left: 0;
        white-space: nowrap;
    }

    /* @rspond-css-dynamic-exemption The far end of the same expansion. */
    .rspond-expandable-link-title.rspond-expandable-link-title-expanded {
        max-width: 8rem;
        opacity: 1;
        margin-left: 0.375rem;
    }

    /* ===== Header navigation link ===== */

    /* The face a link wears in the page header, worn by naming HeaderNavigationLook rather than by being an anchor that
       happens to sit inside the header. Paint and the inset that gives the pill its shape; nothing about how wide
       the control is, which is the placing tray's answer. */

    /* Text in the header bar, beside the links: the same type as they wear, without a link's padding or hover --
       and muted rather than link-coloured, because it is text. It used to wear the links' own colour, which said
       "press me" about the one thing here that does nothing. */
    .rspond-header-nav-text {
        color: var(--rspond-header-text);
        font-size: var(--rspond-font-size-default);
        font-weight: 500;

        /* The links' own vertical padding, so the text sits on their baseline rather than riding higher in a
           shorter box -- which reads as a smaller size even though the type is identical. */
        padding: 6px 0;
    }

    /* A link, and shaped like one. It used to carry a button's inset and corner radius with no border and no
       resting background, so the geometry promised a control and the paint only arrived on hover -- which reads as
       a button that has lost its outline, and left thirty-two pixels of button padding between two words doing no
       work. The vertical padding stays, because .rspond-header-nav-text sits on this baseline.

       The link colour, not the secondary one: at rest the secondary colour is indistinguishable from the text
       beside it, so the affordance arrived on hover, which is to say after the reader had already decided there
       was nothing here to press. */
    .rspond-link-header-nav {
        color: var(--rspond-header-link-color);
        text-decoration: none;
        padding: 6px 0;
        font-size: var(--rspond-font-size-default);
        font-weight: 500;
        transition: color 0.15s ease;
    }

    .rspond-link-header-nav:hover {
        color: var(--rspond-header-link-color-hover);
        text-decoration: underline;
    }

    /* ===== Outlined link ===== */

    /* No gap, for the same reason as .rspond-tab a: one tray child, and the tray owns the spacing. */
    /* No vertical padding: the face paints, and the box's height comes from whatever placed the link -- a strip
       stretches it, a caller states it -- the same separation the button faces observe, so that a stretched
       tool fills its strip instead of fighting a size baked into its paint. */
    /* The outline wears the button-outline token rather than the shared border token: an outline is an
       affordance, not a divider, and the divider grey made these controls read as muted. One token now owns
       every button outline in this theme. */
    .rspond-link-outlined {
        border: var(--rspond-border-width) solid var(--rspond-button-secondary-border);
        border-radius: var(--rspond-border-radius-medium);
        padding: 0 0.5rem;
    }

    .rspond-link-outlined:hover {
        background: var(--rspond-card-background-hover);
        border-color: var(--rspond-components-text-muted);
    }

    /* A disabled action. An anchor with no href cannot be followed, which is how a disabled link renders, and without a
       cue of its own it keeps the link colour and still reads as clickable. Muting the text and its icon, dropping the
       border to the subtle tone and turning off the hover response is the cue that it is unavailable. The rules name the
       button looks rather than every hrefless anchor on purpose: an anchor with no href is also how the current page, the
       selected tab and the active segment of a radio bar render, and those are deliberately highlighted, not muted. */

    .rspond-link-outlined.rspond-disabled,
    .rspond-btn.rspond-disabled {
        color: var(--rspond-components-text-disabled);
        cursor: default;
    }

    /* Every button face draws a one-pixel border, so a disabled button draws one too, in the subtle tone. Without it
       the button was two pixels narrower than the same button enabled, and everything beside it shifted whenever
       the button changed state -- a wizard's Cancel moved each time Back came alive. */
    .rspond-btn.rspond-disabled {
        border: var(--rspond-border-width) solid var(--rspond-border-color-subtle);
    }

    .rspond-link-outlined.rspond-disabled .rspond-icon,
    .rspond-btn.rspond-disabled .rspond-icon {
        color: var(--rspond-components-text-disabled);
    }

    .rspond-link-outlined.rspond-disabled {
        border-color: var(--rspond-border-color-subtle);
    }

    .rspond-link-outlined.rspond-disabled:hover,
    .rspond-btn.rspond-disabled:hover {
        background: none;
        border-color: var(--rspond-border-color-subtle);
    }
}