/* The bookmark strip's and bookmark button's styles (views/core/bookmarks.php), linked by the shared head after the overlay. */
/* The strip: the control that keeps this page, the pages kept (bordered card tabs, orange active frame + tint, full labels that fold into
   a ⋯ when they run out of room), and "Keep open". Hidden until the bookmark button opens it; below the ribbon, pushing the page down.
   All rules scoped to #esWorkspaceTabs so they can't leak onto other bars. */
#esWorkspaceTabs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: var(--es-grey-300, #C7CCD4);                                  /* fallback ≈ darker step */
    background: color-mix(in srgb, var(--es-grey-50, #F1F2F7) 90%, #000);     /* 10% darker than grey-50 */
    padding: 8px 16px; min-height: 48px;
    font-family: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
    border-bottom: 1px solid var(--es-grey-100, #E1E6EB);
}
#esWorkspaceTabs[hidden] { display: none; }
/* The pages kept take the rest of the row, and a row of their own on a phone, where they fold into their ⋯ */
#esWorkspaceTabs .es-wstrip-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1 1 240px; min-width: 0; }
#esWorkspaceTabs .es-wstrip-mark,
#esWorkspaceTabs .es-wstrip-keep {
    display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 32px; padding: 6px 12px;
    border: 1.5px solid var(--es-border-control-subtle); border-radius: 6px; background: var(--es-white);
    color: var(--es-grey-700); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
#esWorkspaceTabs .es-wstrip-mark:hover,
#esWorkspaceTabs .es-wstrip-keep:hover { border-color: var(--es-blue-600); color: var(--es-blue-800); }
#esWorkspaceTabs .es-wstrip-mark > i { color: var(--es-orange-600); }
/* "Keep open" says it is on by its weight, its fill and an upright pin, not by colour alone */
#esWorkspaceTabs .es-wstrip-keep > i { transform: rotate(45deg); }
#esWorkspaceTabs .es-wstrip-keep[aria-pressed="true"] { border-color: var(--es-blue-600); background: var(--es-blue-tint); color: var(--es-blue-900); font-weight: 600; }
#esWorkspaceTabs .es-wstrip-keep[aria-pressed="true"] > i { transform: none; }
#esWorkspaceTabs .es-wtab {
    position: relative; display: inline-flex; align-items: center; user-select: none; flex: none;   /* folds into the ⋯ rather than shrinking */
    max-width: 240px;   /* autofit to the label, but cap so long titles ellipsise */
    border: 1.5px solid var(--es-grey-300, #C7CCD4); border-radius: 8px; background: #fff;
    transition: background .14s cubic-bezier(.2,0,0,1), border-color .14s cubic-bezier(.2,0,0,1);
}
/* On a phone the pages that never fold (pinned, this one) leave room for the ⋯ */
@media (max-width: 575.98px) { #esWorkspaceTabs .es-wtab { max-width: 140px; } }
#esWorkspaceTabs .es-wtab-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
    min-width: 0; overflow: hidden;   /* let the link shrink so the × stays inside the tab */
    padding: 6px 4px 6px 7px; white-space: nowrap; text-decoration: none;
    font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--es-grey-700, #4D4D4D);
}
#esWorkspaceTabs .es-wtab-lead { font-size: 13px; width: 15px; text-align: center; flex-shrink: 0; color: var(--es-grey-400, #9F9F9F); }
#esWorkspaceTabs .es-wtab-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#esWorkspaceTabs .es-wtab:not(.is-active):hover { border-color: var(--es-blue-600, #5481E0); }
#esWorkspaceTabs .es-wtab:not(.is-active):hover .es-wtab-link { color: var(--es-blue-800, #4265AF); }
#esWorkspaceTabs .es-wtab:not(.is-active):hover .es-wtab-lead { color: var(--es-blue-800, #4265AF); }
#esWorkspaceTabs .es-wtab.is-active { border-color: var(--es-orange-500, #FA650D); background: var(--es-orange-50, #FEE8D8); }
#esWorkspaceTabs .es-wtab.is-active .es-wtab-link { color: var(--es-blue-900, #293F6D); font-weight: 600; }
#esWorkspaceTabs .es-wtab.is-active .es-wtab-lead { color: var(--es-orange-600, #C14800); }
#esWorkspaceTabs .es-wtab-x {
    width: 26px; height: 26px; margin: 0 4px 0 2px; border: none; background: transparent; border-radius: 6px;
    color: var(--es-text-muted, #6B6B6B); cursor: pointer; font-size: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .14s, color .14s;
}
#esWorkspaceTabs .es-wtab-x:hover { background: var(--es-red-50, #FDDCDC); color: var(--es-red-700, #A01010); }
#esWorkspaceTabs .es-wtab-pin { font-size: 11px; color: var(--es-orange-600, #C14800); margin: 0 5px 0 2px; transform: rotate(40deg); flex-shrink: 0; }
#esWorkspaceTabs .es-wtab.dragging { opacity: .4; }
#esWorkspaceTabs .es-wtab.drop-target { box-shadow: inset 3px 0 0 0 var(--es-orange-500, #FA650D); }

/* Context menu (appended to <body>) */
.es-wctx {
    position: fixed; z-index: 1080; min-width: 208px; background: #fff;
    border: .5px solid rgba(10,26,47,.10); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(10,26,47,.14); padding: 6px;
    font-family: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
}
.es-wctx button {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    border: none; background: transparent; font-size: 13px; font-weight: 500;
    color: var(--es-grey-700, #4D4D4D); padding: 8px 11px; border-radius: 6px; cursor: pointer;
}
.es-wctx button:hover:not(:disabled) { background: var(--es-aqua-50, #DFF4FC); color: var(--es-blue-900, #293F6D); }
.es-wctx button:hover:not(:disabled) i { color: var(--es-aqua-500, #00AEEF); }
.es-wctx button:disabled { color: var(--es-grey-300, #C7CCD4); cursor: default; }
.es-wctx button i { width: 15px; text-align: center; font-size: 12px; color: var(--es-grey-400, #9F9F9F); }
.es-wctx .es-wctx-sep { height: 1px; background: var(--es-grey-100, #E1E6EB); margin: 5px 4px; }
/* In-place rename. The tab keeps its own size and chrome; only the label becomes editable, so
   nothing jumps when editing starts. */
.es-wtab.is-renaming .es-wtab-title {
    outline: 2px solid var(--es-blue-600, #5481E0); outline-offset: 1px; border-radius: 3px;
    background: #fff; cursor: text; min-width: 40px;
}
.es-wtab.is-renaming .es-wtab-link { cursor: default; }

/* ---- The bookmark button: a white icon just before Shortcuts, filled while pages are kept; no shadow on it, so the focus ring shows ---- */
.es-bookmark { display: flex; align-items: center; border-radius: 8px; }
.es-bookmark-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 34px; height: 34px; padding: 0 8px;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--es-white); font-size: 15px; line-height: 1; cursor: pointer;
    transition: background-color var(--es-dur) var(--es-ease);
}
.es-bookmark-btn:hover,
.es-bookmark-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
/* In the folded bar at phone width it is a row like Shortcuts, its word beside the icon */
.es-bookmark-word { font-size: 14px; font-weight: 500; }