/* Design system v2 — sidebar and panel chrome (round 26, UIX-6).
   Transparent title strip with a hairline below (inset shadow), hairline above the footer,
   neutral close button with hover/focus-visible, and a 12px scroll fade via mask-image.
   Colour, shadow and mask only; no size or typography.
   Run 27a (r.79–81): the title is never blue and the close button is neutral everywhere,
   also in the editor sidebars and the editor bar; (0,3,0) beats the later, lazily loaded
   visual-editor.css without needing it. */

.siteclick-container .siteclick-panel-title {
    box-shadow: inset 0 -1px 0 var(--sc-color-hairline);
}
.siteclick-container .siteclick-panel-title-in {
    background: transparent;
}
.siteclick-container .siteclick-panel-title-title {
    color: var(--sc-color-text-strong);
}
.siteclick-container .siteclick-panel-footer {
    border-top-color: transparent;
    box-shadow: inset 0 1px 0 var(--sc-color-hairline);
}
.siteclick-container .siteclick-panel-close,
.siteclick-container :is(.siteclick-editor-sidebars, .siteclick-editor-sidebars-sub) .siteclick-panel-close,
.siteclick-container .siteclick-ve-close.siteclick-panel-close {
    background: transparent;
    color: var(--sc-color-text-subtle);
    border-radius: var(--sc-radius-sm);
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out),
                color var(--sc-dur-fast) var(--sc-ease-out),
                box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}
.siteclick-container .siteclick-panel-close:hover,
.siteclick-container :is(.siteclick-editor-sidebars, .siteclick-editor-sidebars-sub) .siteclick-panel-close:hover,
.siteclick-container .siteclick-ve-close.siteclick-panel-close:hover {
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-strong);
}
.siteclick-container .siteclick-panel-close:focus-visible {
    outline: none;
    box-shadow: var(--sc-ring);
}
.siteclick-container .siteclick-panel-content {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}