/* CD viewer control panel (partials/viewer/_cd_viewer_section.html, cd-control-panel.js).
   Collapsible sections over the glass panel; gold (.cdp-op) = operator only.
   Plan: displacement_branch/docs/2026-11-02-cd-control-panel-mockup/control-panel-final.html */

.cdp {
    padding: 8px;
    font-size: 0.875rem;
    color: var(--clr-white);
}
.cdp .cdp-muted { color: rgba(var(--white-rgb), 0.62); }
.cdp .cdp-num { min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.cdp .cdp-spinner { width: 1rem; height: 1rem; color: rgba(var(--white-rgb), 0.5); }

/* ---- Sections ---- */
.cdp-sec {
    position: relative;
    margin-bottom: 8px;
    border: 1px solid rgba(var(--white-rgb), 0.14);
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.03);
}
.cdp-sec:last-child { margin-bottom: 0; }
.cdp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.08);
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-radius 0.15s;
}
/* The panel's round close button sits over the first head's right end. */
.cdp > .cdp-sec:first-child > .cdp-head { padding-right: 56px; }
.cdp-head:hover { background: rgba(var(--white-rgb), 0.12); }
.cdp-head:focus-visible { outline: 2px solid var(--clr-action); outline-offset: -2px; }
.cdp-sec.is-open > .cdp-head {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.1);
}
.cdp-title { flex: 1 1 auto; min-width: 0; }
.cdp-chev {
    color: rgba(var(--white-rgb), 0.62);
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}
.cdp-sec.is-open > .cdp-head .cdp-chev,
.cdp-gsd.is-open .cdp-gsd-head .cdp-chev { transform: rotate(90deg); }

/* Open / close: the body's grid row animates from 0fr to 1fr. */
.cdp-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}
.cdp-sec.is-open > .cdp-body { grid-template-rows: 1fr; opacity: 1; }
.cdp-inner {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    visibility: hidden;
    padding: 0 12px;
    transition: visibility 0s linear 0.25s, padding 0.25s ease;
}
.cdp-sec.is-open > .cdp-body > .cdp-inner {
    visibility: visible;
    padding: 10px 12px 12px;
    transition: visibility 0s, padding 0.25s ease;
}
/* Once open, dropdowns and focus rings may leave the section. */
.cdp-sec.is-open.is-settled > .cdp-body > .cdp-inner { overflow: visible; }

/* (i) after the title: dim until hovered */
.cdp-info {
    color: rgba(var(--white-rgb), 0.62);
    opacity: 0.55;
    font-weight: 400;
    cursor: help;
    transition: opacity 0.15s;
}
.cdp-info:hover { opacity: 1; }

/* Reveal animation for blocks shown by display toggling (lab body, layer settings) */
.cdp-reveal { animation: cdp-reveal 0.24s ease-out; }
@keyframes cdp-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cdp-body, .cdp-inner, .cdp-chev, .cdp-op-tip { transition: none; }
    .cdp-reveal { animation: none; }
}

/* ---- Operator only: a gold outline, nothing else; the "Operator only" hint shows on hover ---- */
.cdp-op { position: relative; border: 1px solid var(--clr-operator) !important; }
.cdp-op-tip {
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 3;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--clr-operator-hint);
    color: var(--clr-operator-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}
.cdp-op:hover > .cdp-op-tip,
.cdp-op:hover > .cdp-head > .cdp-op-tip { opacity: 1; transform: none; }
/* Operator Panel: its groups one under the other (hidden ones take no space) */
.cdp-stack { display: flex; flex-direction: column; gap: 12px; }
.cdp-opgroup .cdp-btnrow:first-child { margin-top: 0; }

/* ---- Buttons ---- */
.cdp .cdp-btn,
.cdp .cdp-btn-primary,
.cdp .cdp-btn-gold,
.cdp .cdp-btn-gold-line,
.cdp .cdp-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    font-size: 0.8125rem;
}
.cdp .cdp-btn {
    border: 1px solid rgba(var(--white-rgb), 0.14);
    background: rgba(var(--white-rgb), 0.06);
    color: var(--clr-white);
}
.cdp .cdp-btn:hover:not(:disabled) { background: rgba(var(--white-rgb), 0.12); color: var(--clr-white); }
.cdp .cdp-btn-primary { border: 1px solid var(--clr-action); background: var(--clr-action); color: var(--clr-white); }
.cdp .cdp-btn-primary:hover:not(:disabled) { background: var(--clr-action-hover); border-color: var(--clr-action-hover); color: var(--clr-white); }
.cdp .cdp-btn-gold { border: 1px solid var(--clr-operator); background: var(--clr-operator); color: var(--clr-operator-ink); font-weight: 600; }
.cdp .cdp-btn-gold:hover:not(:disabled) { filter: brightness(1.08); color: var(--clr-operator-ink); }
.cdp .cdp-btn-gold-line { border: 1px solid var(--clr-operator); background: transparent; color: var(--clr-operator); }
.cdp .cdp-btn-gold-line:hover:not(:disabled) { background: rgba(var(--clr-operator-rgb), 0.12); color: var(--clr-operator); }
.cdp .cdp-btn-danger { border: 1px solid rgba(var(--clr-danger-rgb), 0.6); background: transparent; color: var(--clr-danger); }
.cdp .cdp-btn-danger:hover:not(:disabled) { background: rgba(var(--clr-danger-rgb), 0.14); color: var(--clr-danger); }
.cdp .btn:disabled { opacity: 0.45; }
.cdp-btnrow { display: flex; gap: 6px; margin-top: 8px; }
.cdp-btnrow > .btn { flex: 1 1 0; min-width: 0; }

/* Segmented controls (Before / After, Boxes / Dots / Hidden, lab modes) */
.cdp .cdp-seg > .btn {
    flex: 1 1 0;
    border-color: rgba(var(--white-rgb), 0.14);
    background: rgba(var(--white-rgb), 0.05);
    color: rgba(var(--white-rgb), 0.75);
    font-size: 0.8125rem;
}
.cdp .cdp-seg > .btn:hover { background: rgba(var(--white-rgb), 0.1); color: var(--clr-white); }
.cdp .cdp-seg > .btn-check:checked + .btn {
    background: var(--clr-action);
    border-color: var(--clr-action);
    color: var(--clr-white);
}
.cdp .cdp-seg > .btn-check:disabled + .btn { opacity: 0.4; }

/* Form controls: the glass look, not Bootstrap's grey */
.cdp .form-select,
.cdp .form-control {
    background-color: rgba(var(--white-rgb), 0.06);
    border-color: rgba(var(--white-rgb), 0.14);
    color: var(--clr-white);
    font-size: 0.8125rem;
}
.cdp .form-select option { background: var(--dark-panel-bg); color: var(--clr-white); }
.cdp .form-control:disabled,
.cdp .form-control[readonly] { background-color: transparent; }
.cdp .form-range { accent-color: var(--clr-action); }
.cdp .form-check-input:checked { background-color: var(--clr-action); border-color: var(--clr-action); }

.cdp-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0 0;
    margin: 0;
    min-height: 0;
}
.cdp-switch-row .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
/* Image: the processed-images row only takes space when it is shown */
.cdp-after-seg { margin-top: 8px; }

.cdp-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cdp-row-label { color: rgba(var(--white-rgb), 0.62); min-width: 70px; margin: 0; }
.cdp-field { margin-bottom: 10px; }
.cdp-label { display: block; margin-bottom: 3px; color: rgba(var(--white-rgb), 0.62); }
.cdp-line { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cdp-line > label { flex: 0 0 auto; min-width: 84px; margin: 0; color: rgba(var(--white-rgb), 0.62); white-space: nowrap; }
.cdp-line > .form-select,
.cdp-line > .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
.cdp-line > .cdp-unit { flex: 0 0 68px; }
.cdp-saved { color: var(--clr-success); }

/* Tile surveys pick their tile here (no timeline) */
.cdp-survey-only { display: none; }
body.iris-survey .cdp-survey-only { display: block; }

/* ---- Image: when the shown frame was taken ---- */
.cdp-shown {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    color: rgba(var(--white-rgb), 0.62);
    font-size: 0.8125rem;
}
.cdp-shown[hidden] { display: none; }
.cdp-shown-time { color: var(--clr-white); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Layers ---- */
.cdp-layer { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cdp-layer-name { flex: 1 1 auto; color: rgba(var(--white-rgb), 0.62); }
.cdp-eye-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cdp-eye {
    display: inline-flex;
    padding: 2px 5px;
    border-radius: 4px;
    color: rgba(var(--white-rgb), 0.62);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.cdp-eye:hover { background: rgba(var(--white-rgb), 0.08); color: var(--clr-white); }
.cdp-eye-input:focus-visible + .cdp-eye { outline: 2px solid var(--clr-action); }
.cdp-eye .bi-eye,
.cdp-eye-input:checked + .cdp-eye .bi-eye-slash { display: none; }
.cdp-eye-input:checked + .cdp-eye .bi-eye { display: inline; }
.cdp-eye-input:checked + .cdp-eye { color: var(--clr-white); }
.cdp-layer:has(.cdp-eye-input:checked) .cdp-layer-name { color: var(--clr-white); }
.cdp-layer-sub { padding: 2px 0 8px; }
.cdp-layers-empty { display: none; }
.cdp-layers-empty.is-shown { display: block; }

/* ---- Change Detection ---- */
.cdp-scope { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: rgba(var(--white-rgb), 0.62); }
.cdp-scope b { color: var(--clr-white); font-weight: 600; }
.cdp-vrows { margin: 0 -6px 6px; }
.cdp-vrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.cdp-vrow:hover { background: rgba(var(--white-rgb), 0.07); }
.cdp-vrow .form-check-input { margin: 0; flex: 0 0 auto; cursor: pointer; }
.cdp-vrow:has(.form-check-input:not(:checked)) { opacity: 0.55; }
.cdp-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.cdp-swatch.is-pending { background: var(--clr-warning); }
.cdp-swatch.is-validated { background: var(--clr-danger); }
.cdp-swatch.is-false-alarm { background: var(--clr-success); }
.cdp-vname { flex: 1 1 auto; }
.cdp-vcount { font-weight: 600; font-variant-numeric: tabular-nums; }

.cdp-browse {
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.14);
    border-radius: 6px;
    margin-top: 2px;
}
.cdp-browse > button {
    width: 38px;
    height: 30px;
    border: 0;
    background: rgba(var(--white-rgb), 0.05);
    color: var(--clr-white);
}
.cdp-browse > button:hover:not(:disabled) { background: rgba(var(--white-rgb), 0.12); }
.cdp-browse > button:disabled { opacity: 0.35; }
.cdp-browse-n {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(var(--white-rgb), 0.14);
    border-right: 1px solid rgba(var(--white-rgb), 0.14);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cdp-browse > .cdp-browse-fit { border-left: 1px solid rgba(var(--white-rgb), 0.14); }

/* Operator Panel: Suggested by later frames, set off from the buttons above by a thin line */
.cdp-fwd { padding-top: 10px; border-top: 1px solid rgba(var(--white-rgb), 0.1); }
.cdp-stack > .cdp-fwd:first-child,
.cdp-stack > .cdp-opgroup.d-none + .cdp-fwd { padding-top: 0; border-top: 0; }
.cdp-goldbox-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-weight: 600; }
/* The Accept button turned into its own confirm: same outline and place as the button. */
.cdp-confirm {
    padding: 6px 8px;
    border: 1px solid var(--clr-operator);
    border-radius: var(--bs-border-radius-sm, 4px);
}
.cdp-confirm p { white-space: pre-line; font-variant-numeric: tabular-nums; }
.cdp-confirm .cdp-btnrow { margin-top: 0; }

/* Operator Panel: Manual detection, set off like the later-frames box */
.cdp-manual { padding-top: 10px; border-top: 1px solid rgba(var(--white-rgb), 0.1); }
.cdp-stack > .cdp-manual:first-child,
.cdp-stack > .cdp-opgroup.d-none + .cdp-manual { padding-top: 0; border-top: 0; }

/* Manual detection drawing bar over the image (cd-manual-detect.js) */
.cdm-bar {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 25;
    width: min(560px, calc(100% - 32px));
    padding: 10px 12px;
    border: 1px solid var(--clr-operator);
    border-radius: 8px;
    background: rgba(var(--brand-primary-rgb), 0.92);
    color: var(--clr-white);
    font-size: 0.875rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.cdm-title { font-weight: 600; }
.cdm-help { margin: 2px 0 8px; color: rgba(var(--white-rgb), 0.72); font-size: 0.8125rem; }
.cdm-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cdm-row .cdm-label { width: auto; flex: 1 1 120px; min-width: 0; }
.cdm-row .form-select option { background: var(--dark-panel-bg); color: var(--clr-white); }
.cdm-btn {
    border: 1px solid rgba(var(--white-rgb), 0.2);
    background: rgba(var(--white-rgb), 0.06);
    color: var(--clr-white);
}
.cdm-btn:hover:not(:disabled) { background: rgba(var(--white-rgb), 0.14); color: var(--clr-white); }
.cdm-btn-go {
    margin-left: auto;
    border: 1px solid var(--clr-operator);
    background: var(--clr-operator);
    color: var(--clr-operator-ink);
    font-weight: 600;
}
.cdm-btn-go:hover:not(:disabled) { filter: brightness(1.08); color: var(--clr-operator-ink); }
.cdm-bar .btn:disabled { opacity: 0.45; }
.cdm-error { margin-top: 8px; color: var(--clr-danger); font-size: 0.8125rem; }
/* The change window: Redraw outline bar under the image, the points in its SVG layer */
.cdm-bar.cdm-bar-modal { bottom: 56px; z-index: 1001; }
#modal-image-container.cdm-editing #bbox-rect,
#modal-image-container.cdm-editing #obj-cluster-layer { display: none; }
#obj-edit-layer .cdm-area { fill: rgba(var(--brand-accent-rgb), 0.22); stroke: var(--brand-accent); stroke-linejoin: round; }
#obj-edit-layer .cdm-open { fill: none; stroke: var(--clr-operator); stroke-linejoin: round; }
#obj-edit-layer .cdm-pt { fill: var(--brand-accent); stroke: var(--dark-panel-bg); }
#obj-edit-layer .cdm-pt-open { fill: var(--clr-operator); }
/* The change window's operator box: a control-panel section (.cdp-op: thin gold outline,
   "Operator only" on hover); its buttons stay neutral. */
.obj-opbox {
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(var(--white-rgb), 0.03);
}
.obj-opbox .obj-manual-line { color: rgba(var(--white-rgb), 0.62); }
.obj-opbox .obj-opbox-btn {
    border: 1px solid rgba(var(--white-rgb), 0.14);
    background: rgba(var(--white-rgb), 0.06);
    color: var(--clr-white);
}
.obj-opbox .obj-opbox-btn:hover:not(:disabled) { background: rgba(var(--white-rgb), 0.12); color: var(--clr-white); }
/* Add to favorites: neutral; gold on hover and once it is a favourite */
.obj-fav-btn {
    border: 1px solid rgba(var(--white-rgb), 0.14);
    background: rgba(var(--white-rgb), 0.06);
    color: var(--clr-white);
}
.obj-fav-btn:hover:not(:disabled),
.obj-fav-btn.active,
.obj-fav-btn[aria-pressed="true"] { border-color: var(--clr-operator); background: rgba(var(--clr-operator-rgb), 0.12); color: var(--clr-operator); }

/* While drawing, the image is framed in the operator colour. */
body.cdm-drawing .interactive-canvas-shell { outline: 2px solid var(--clr-operator); outline-offset: -2px; }
@media (max-width: 480px) {
    .cdm-bar { bottom: 8px; padding: 8px; }
    .cdm-btn-go { margin-left: 0; flex: 1 1 100%; }
}

/* ---- Tools: plain rows split by a thin line, no boxes ---- */
.cdp-tgroup + .cdp-tgroup { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(var(--white-rgb), 0.1); }
.cdp-tlabel { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cdp-tgroup .cdp-btnrow > .d-none { display: none !important; }
.cdp-history { margin-top: 8px; font-size: 0.8125rem; }
.cdp-history > summary { cursor: pointer; color: rgba(var(--white-rgb), 0.62); }
.cdp-history > summary:hover { color: var(--clr-white); }
.cdp-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid rgba(var(--white-rgb), 0.14);
    color: rgba(var(--white-rgb), 0.62);
}
.cdp-history-row:first-child { margin-top: 6px; }
.cdp-history-group { margin-top: 8px; font-size: 0.75rem; font-weight: 600; color: rgba(var(--white-rgb), 0.62); }
.cdp-history-group + .cdp-history-row { margin-top: 2px; }
.cdp-history-row a { color: var(--clr-white); text-decoration: none; padding: 0 4px; }
.cdp-history-row a:hover { color: var(--clr-action); }
/* The site's official monthly reports: the newest as a full row, the earlier ones as history rows. */
.cdp-official { margin-top: 10px; font-size: 0.8125rem; }
.cdp-official-head { font-weight: 600; color: rgba(var(--white-rgb), 0.62); margin-bottom: 6px; }
.cdp-official-latest {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--clr-action);
    border-radius: var(--bs-border-radius-sm, 4px);
    background: rgba(var(--white-rgb), 0.04);
    color: var(--clr-white);
    font-weight: 600;
    text-decoration: none;
}
.cdp-official-latest > span { flex: 1 1 auto; min-width: 0; }
.cdp-official-latest:hover { background: var(--clr-action); color: var(--clr-white); }
.cdp-official-latest:focus-visible { outline: 2px solid var(--clr-action); outline-offset: 2px; }
.cdp-official .cdp-history-row:first-of-type { margin-top: 6px; }

/* One tool per row: icon, name, optional value on the right */
.cdp-titem {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% + 12px);
    margin: 0 -6px;
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--clr-white);
    font: inherit;
    text-align: left;
}
.cdp-titem:hover:not(:disabled) { background: rgba(var(--white-rgb), 0.07); }
.cdp-titem:focus-visible { outline: 2px solid var(--clr-action); outline-offset: -2px; }
.cdp-titem .bi:not(.cdp-chev) { font-size: 1rem; color: rgba(var(--white-rgb), 0.62); }
.cdp-titem + .cdp-gsd { margin-top: 2px; }
.cdp-gsd + .cdp-gsd { margin-top: 2px; }
.cdp-opens .cdp-saved { margin-left: 4px; }
.cdp-gsd-val { margin-left: auto; color: rgba(var(--white-rgb), 0.62); font-size: 0.75rem; white-space: nowrap; }
.cdp-gsd-form { padding: 6px 0 2px; }
.cdp-gsd-form:not([hidden]) { animation: cdp-reveal 0.24s ease-out; }

/* ---- Detection Lab ---- */
.cdp-labmode .form-check-label { font-weight: 600; }
.cdp-labmode .form-check-input:checked { background-color: var(--clr-operator); border-color: var(--clr-operator); }
.cdp-lg { padding: 10px 0 4px; border-top: 1px solid rgba(var(--white-rgb), 0.1); }
#cd-lab-body > .cdp-lg:first-of-type { margin-top: 8px; }
.cdp-lg h5 {
    margin: 0 0 6px;
    color: rgba(var(--white-rgb), 0.62);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cdp-lab-status { max-width: 60%; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cdp-sl { margin-bottom: 6px; }
.cdp-sl-head { display: flex; align-items: center; gap: 8px; }
.cdp-sl-head > label { margin: 0; color: rgba(var(--white-rgb), 0.8); }
.cdp-sl-head .form-check-input { margin: 0; flex: 0 0 auto; }
.cdp .cdp-sl-num { flex: 0 0 66px; width: 66px; padding: 1px 4px; text-align: right; }
#cd-lab-map-legend:empty,
#cd-lab-result:empty { display: none; }

/* ---- Hover tips: one box over everything, never cut by the panel ---- */
.cdp-tipbox {
    position: fixed;
    z-index: 12000;
    max-width: 240px;
    padding: 7px 9px;
    border: 1px solid rgba(var(--white-rgb), 0.14);
    border-radius: 6px;
    background: rgba(var(--black-rgb), 0.9);
    color: var(--clr-white);
    font-size: 0.75rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}
.cdp-tipbox.is-on { opacity: 1; }

/* Phones (viewer-mobile.css): the sheet has its own strip for the close button; bigger touch targets */
@media (max-width: 767.98px), (max-height: 500px) and (pointer: coarse) {
    #viewer-view .cdp > .cdp-sec:first-child > .cdp-head { padding-right: 12px; }
    .cdp-head { padding: 12px; }
    .cdp-vrow { padding: 9px 6px; }
    .cdp-titem { padding: 10px 6px; }
    .cdp-browse > button { width: 44px; height: 38px; }
    .cdp-eye { padding: 6px 8px; font-size: 1.15rem; }
    .cdp-op-tip { display: none; }
}