/* ============================================================================
   Ehopto admin density layer
   One overlay stylesheet, loaded on every panel page, that compresses the
   custom pages' oversized banners, paddings, radii and tiles into small tight
   sections. Geometry-only (!important beats the per-page inline styles that
   load after this file); colours and behaviour stay with each page.
   ============================================================================ */

/* ---- Page heroes: fat gradient banners become slim strips ---- */
.dept-hero, .studio-hero {
    padding: 14px 18px !important;
    border-radius: 14px !important;
}
.dept-hero h2, .studio-hero h2 {
    font-size: 19px !important;
    letter-spacing: -.03em !important;
    margin: 6px 0 4px !important;
    line-height: 1.1 !important;
}
.dept-hero p, .studio-hero p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}
.dept-kicker { padding: 4px 8px !important; font-size: 10px !important; }

.wh-head { padding: 12px 16px !important; border-radius: 14px !important; }
.wh-head h2 { font-size: 19px !important; }
.wh-head p { font-size: 12px !important; margin-top: 3px !important; }
.wh-pill { padding: 5px 9px !important; font-size: 11px !important; }

.webflow-top { padding: 10px 14px !important; border-radius: 14px !important; gap: 8px !important; }
.webflow-head h2 { font-size: 18px !important; }
.webflow-head p { font-size: 12px !important; margin-top: 2px !important; }

/* ---- Tiles and cards: kill min-heights and shrink padding ---- */
.dept-card, .dept-note, .dept-manager { padding: 12px 14px !important; border-radius: 14px !important; }
.dept-card { min-height: 0 !important; gap: 5px !important; }
.dept-card b { font-size: 14px !important; }
.dept-card p, .dept-note p, .dept-manager p { font-size: 12px !important; line-height: 1.4 !important; }
.dept-note h3, .dept-manager h3 { font-size: 15px !important; margin-bottom: 3px !important; }
.dept-pill { padding: 3px 7px !important; font-size: 10px !important; margin-top: 6px !important; }
.dept-tools { gap: 10px !important; }
.dept-wrap { gap: 12px !important; }

.wh-grid { gap: 10px !important; }
.wh-card { min-height: 0 !important; padding: 12px 14px !important; border-radius: 14px !important; gap: 5px !important; }
.wh-card b { font-size: 14px !important; }
.wh-card span { font-size: 12px !important; }
.wh-card small { padding: 4px 8px !important; font-size: 10px !important; }
.wh-line { padding: 8px !important; border-radius: 14px !important; gap: 6px !important; }
.wh-step { padding: 6px 8px !important; border-radius: 10px !important; }

/* ---- My Websites cards ---- */
.studio-wrap { gap: 12px !important; }
.site-grid { gap: 12px !important; }
.site-card { padding: 12px !important; border-radius: 16px !important; }
.site-card h3 { font-size: 16px !important; }
.site-card p { font-size: 12px !important; line-height: 1.45 !important; margin: 4px 0 !important; }
.site-cover { height: 150px !important; margin: -12px -12px 12px !important; border-radius: 16px 16px 0 0 !important; }
.badge { padding: 4px 8px !important; font-size: 10px !important; }
.actions { gap: 6px !important; margin-top: 10px !important; }
.btn { padding: 6px 10px !important; font-size: 11px !important; }
.assembly-strip { gap: 4px !important; margin-top: 8px !important; }
.assembly-strip a { padding: 5px 4px !important; font-size: 9px !important; border-radius: 8px !important; }
.site-progress { margin-top: 8px !important; }
.hint { display: none !important; }

/* ---- Create Website wizard ---- */
.webflow { gap: 10px !important; }
.wf-stage { padding: 12px 14px !important; border-radius: 16px !important; }
.wf-stage h3 { font-size: 16px !important; }
.wf-stage p { font-size: 12px !important; line-height: 1.45 !important; margin-top: 4px !important; }
.wf-rail { gap: 6px !important; }
.wf-step { min-height: 0 !important; padding: 7px 9px !important; border-radius: 11px !important; }
.wf-step b { font-size: 11px !important; }
.wf-step span { font-size: 9px !important; margin-top: 2px !important; }
.wf-btn { padding: 7px 11px !important; font-size: 11px !important; }
.wf-choice { padding: 12px !important; border-radius: 14px !important; }
.wf-choice b { font-size: 15px !important; }
.wf-choice span { font-size: 12px !important; margin-top: 4px !important; }
.wf-choice-grid, .wf-grid { gap: 10px !important; margin-top: 10px !important; }
.wf-template-search { padding: 10px !important; border-radius: 14px !important; margin-top: 10px !important; gap: 8px !important; }
.wf-template-layout { gap: 10px !important; margin-top: 10px !important; }
.wf-selected { padding: 10px !important; border-radius: 14px !important; gap: 8px !important; }
.wf-scout { padding: 10px !important; border-radius: 14px !important; gap: 8px !important; margin-top: 10px !important; }
.wf-source-actions { gap: 6px !important; }
.wf-source-actions a, .wf-source-actions button { padding: 8px !important; border-radius: 12px !important; font-size: 11px !important; }
.wf-source-actions span { font-size: 9px !important; }
.wf-summary { gap: 8px !important; margin-top: 10px !important; }
.wf-summary div { padding: 9px !important; border-radius: 12px !important; }
.wf-asset-workbench { gap: 8px !important; margin-top: 10px !important; }
.wf-asset-card { padding: 10px !important; border-radius: 14px !important; gap: 8px !important; }
.wf-footer-actions { margin-top: 10px !important; }
.wf-field input, .wf-field textarea, .wf-field select { padding: 9px 11px !important; border-radius: 11px !important; }
.wf-field label { margin-bottom: 4px !important; font-size: 10px !important; }

/* ---- Technical: portfolio manager + import ---- */
.portfolio-library { padding: 10px !important; border-radius: 14px !important; margin-top: 10px !important; }
.portfolio-library-grid { gap: 8px !important; margin-top: 8px !important; max-height: 380px !important; }
.portfolio-library-card { min-height: 0 !important; padding: 10px !important; border-radius: 12px !important; gap: 7px !important; }
.portfolio-library-card strong { font-size: 13px !important; }
.portfolio-library-card span { font-size: 11px !important; }
.portfolio-admin-grid { gap: 10px !important; margin-top: 10px !important; }
.portfolio-admin-btn { padding: 7px 10px !important; font-size: 11px !important; }
.portfolio-demo-row { padding: 8px 10px !important; border-radius: 12px !important; }
.portfolio-demo-list { max-height: 380px !important; }
.portfolio-admin-field input, .portfolio-admin-field textarea { padding: 8px 10px !important; border-radius: 11px !important; }
.portfolio-admin-field label { font-size: 10px !important; margin-bottom: 3px !important; }

/* ---- Collapsible section pattern used by the compact pass ---- */
details.ehopto-collapse { border: 1px solid rgba(15, 23, 42, .1); border-radius: 14px; background: #fff; padding: 0; overflow: hidden; }
details.ehopto-collapse > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: 13px; font-weight: 900; color: #0f172a; display: flex; align-items: center; gap: 8px; }
details.ehopto-collapse > summary::-webkit-details-marker { display: none; }
details.ehopto-collapse > summary:before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: #f1f5f9; color: #475569; font-weight: 800; }
details.ehopto-collapse[open] > summary:before { content: "\2212"; }
details.ehopto-collapse > summary small { color: #94a3b8; font-weight: 700; font-size: 11px; }
details.ehopto-collapse > .ehopto-collapse-body { padding: 0 14px 12px; }
details.ehopto-collapse > .ehopto-collapse-body > *:first-child { margin-top: 0 !important; }

/* Inline "More" action menus on cards */
details.ehopto-more { position: relative; display: inline-block; }
details.ehopto-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 999px; padding: 6px 10px; background: #fff; color: #0f172a; font-size: 11px; font-weight: 900; }
details.ehopto-more > summary::-webkit-details-marker { display: none; }
details.ehopto-more[open] > summary { background: #0f172a; color: #fff; border-color: #0f172a; }
details.ehopto-more > .ehopto-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 4px; min-width: 190px; border: 1px solid rgba(15, 23, 42, .12); border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(15, 23, 42, .16); padding: 6px; }
details.ehopto-more > .ehopto-more-menu > * { width: 100%; justify-content: flex-start !important; text-align: left; }