/*
 * The tools around one parameter -- Autoupdate and History under Set value (js/load/param-tools.js)
 * -- and, from the next tasks, the Rules dialog and the ACS extraction panel. A sheet of its own:
 * css/load.css is at the 800-line cap every static file is held to.
 */
.param-tool {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/*
 * Where a panel's own scrollbar comes from.
 *
 * .param-tool is a <details>, and a browser that implements ::details-content -- Chrome since 131,
 * Safari since 18.4 -- lays everything after the <summary> out inside an anonymous box of its own.
 * That box, not .param-tool-body, is then the panel's flex item: the body's min-height: 0 and its
 * shrink apply to nothing, it is laid out at its natural height, and .panel (css/common.css) clips
 * whatever falls past the panel's bottom edge. Measured in a browser against the deployed server at
 * 1600x900: a 289px Autoupdate body inside the 117px the max-height below allows the panel, its
 * Apply button 203px under that edge, and the overflow-y: auto on .param-tool-body never once
 * produced a scrollbar -- the panel did not truncate visibly, it simply ended.
 *
 * Making that anonymous box the flex column the panel used to be hands the body the height it is
 * allowed, and with it the scroll. A browser that does not implement the pseudo-element skips this
 * rule and keeps the layout it always had, where the body is the panel's flex item already.
 */
.param-tool::details-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.right-panel .param-tool[open] {
    flex: 0 1 auto;
    max-height: 45%;
}

/*
 * Extract CPE from DB (js/load/config-files.js) sits below the Device/Security/Protocol tabs in the
 * left column, open or closed, and keeps its natural size there rather than taking a share of the
 * column the way the right column's tools do: it is a form of six fields and a button, and 45% of
 * a 260px column is a scroller two fields tall.
 *
 * What pays for that height is the column itself, which scrolls (.left-panel in css/load.css), and
 * the floor under the tabs panel beside it. Both were the report this rule answers -- measured in a
 * browser against the deployed server at 1600x900, where the column is the 260px floor
 * .main-content carries: the tabs panel, free to shrink, was squeezed to 2px and took the whole
 * device form off the page, and this panel ran 114px past the bottom of a column that clipped, with
 * its own Extract button on the far side of that edge and no scrollbar anywhere to reach it.
 */
.left-panel .param-tool {
    flex: 0 0 auto;
}

/*
 * A disclosure marker of the panel's own. .panel-header is display: flex (css/common.css), and any
 * display other than list-item drops the ::marker triangle a browser draws beside a <summary> --
 * all three panels are served closed, so until this the only sign they opened was the pointer
 * cursor, which needs a hover to find. list-style: none says the native triangle is unwanted rather
 * than merely absent, so a browser that draws one anyway does not draw it next to ours.
 *
 * The caret, the turn and the transition are the Logs panel's (.panel-collapsible in css/load.css):
 * a section that folds should look the same wherever on the page it sits. It is scoped to
 * .param-tool > summary because .panel-header also heads plain <div> panels that never fold.
 */
.param-tool > summary {
    cursor: pointer;
    list-style: none;
}

.param-tool > summary .collapse-caret {
    margin-left: auto;
    color: var(--text-2);
    transition: transform var(--dur-fast) ease;
}

.param-tool:not([open]) > summary .collapse-caret {
    transform: rotate(-90deg);
}

.param-tool-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    overflow-y: auto;
    min-height: 0;
}

.param-tool-hint {
    margin: 0;
    font-size: var(--fs-100);
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.param-tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.autoupdate-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
    align-items: center;
}

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

.param-history {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--fs-100);
}

.param-history li {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border-bottom: 1px solid var(--border);
}

.param-history time {
    flex: 0 0 auto;
    color: var(--text-3);
}

.param-history .value {
    overflow-wrap: anywhere;
}

/* The Rules dialog (js/load/rules.js). js/modal.js owns visibility, focus and Escape. */
.rules-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.rules-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: min(900px, 92vw);
    max-height: 88vh;
    padding: var(--sp-6);
    overflow: auto;
    background: var(--surface-0);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
}

.rules-head,
.rules-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.rules-head h3 {
    margin: 0;
    font-size: var(--fs-400);
}

.rules-code {
    min-height: 220px;
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

.rules-status {
    margin: 0;
    font-size: var(--fs-200);
    color: var(--success-fg);
    overflow-wrap: anywhere;
}

.rules-status:empty {
    display: none;
}

.rules-status.is-error {
    color: var(--danger-fg);
}

.rules-help pre {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-200);
    white-space: pre-wrap;
    background: var(--surface-1);
    border-radius: var(--r-sm);
}