/* What comes down from the tabs of Your sessions (Chris, 24 Oct): a drag down from the tab bar brings each tab's drawer over its pane. The New
   tab's is its lane of session cards (work.js), Crew works' a lane of the crew's works and Sessions' the live numbers (mine.js makeDrop). */

/* The lanes run out to the window's edges, so the next card is seen coming and no card is cut at the pane's padding. */
/* The thread's scroller runs the window's whole width (its words keep their own padding), or it clips the lane at the pane's padding. */
.pane-new .work-scroll, .pane-crew .work-scroll { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.panel-tabs { -webkit-user-select: none; user-select: none; touch-action: pan-x; }
.pane-new .work-strip, .pane-crew .work-strip, .mine-drop .work-strip { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; -webkit-overflow-scrolling: touch; }
/* No snapping: it fought the wheel and drag and held the lane short of its last buttons (New, Archived). A spacer gives the end its room. */
.work-strip::after { content: ''; flex: 0 0 16px; }
/* A thread shorter than its pane hugs the foot, the lane alone at the top: opening or closing the lane no longer carries the thread and the
   working line up and down with it (Chris, 29 Oct). The spacer takes the free room; a longer thread has none, and scrolls as before. */
.work-scroll:not(.welcoming) { display: flex; flex-direction: column; }
.work-scroll:not(.welcoming) > * { flex: none; }
.work-scroll:not(.welcoming) > .work-strip { order: -2; }
.work-scroll:not(.welcoming)::before { content: ''; order: -1; flex: 1 0 0; }
/* On a new session's screen the lane lies over the welcome instead of in the flow above it: the welcome's centred coin and greeting stay
   where they are as the lane opens and closes (Chris, 29 Oct: the screen moved up and down with it). */
.work-scroll.welcoming { position: relative; }
.work-scroll.welcoming > .work-strip { position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0; padding-top: 10px; }
.work-scroll.welcoming > .work-strip .work-strip-item { background: var(--panel); }
/* A finger on the lane carries the cards along it and nothing else: without this a slightly slanted swipe went to the thread's own scroll, and
   the lane (overflow-x makes its y scroll too) took a few pixels up and down, so the cards did not follow the finger (Chris, 1 Nov). */
.work-strip { touch-action: pan-x; overflow-y: hidden; }
/* A card's words wrap inside it; the state line never runs past its edge. */
.detail .work-strip-item { min-width: 0; }
/* One line, always: a countdown that wrapped made its card taller and, with it, the whole lane (Chris, 25 Oct). */
.work-strip-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.work-strip-item.live .work-strip-meta::before { display: inline-block; margin-right: 6px; vertical-align: middle; }

.mine-drop { position: sticky; top: 0; z-index: 6; margin: -4px -16px 10px; padding: 10px 16px 8px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22); contain: layout paint; }
.mine-drop[hidden] { display: none; }
.mine-drop.dropping { animation: mine-drop 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); will-change: transform, opacity; }
@keyframes mine-drop { from { transform: translate3d(0, -12px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mine-drop.dropping { animation: none; } }
.mine-drop h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mine-drop .mine-usage { margin: 8px 0 0; }
.mine-drop-now { margin: 0; font: 600 17px/1.3 var(--font); }
.mine-drop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.mine-drop-stamp { flex: 1 1 auto; min-width: 0; }
.mine-drop-stamp { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* Sessions' drawer, compact (Chris, 25 Oct): two slim gauges side by side, one line of counts, the sessions that wait on him as chips. */
.mine-drop-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mine-drop-gauges .mine-lane-card { width: auto; min-width: 0; padding: 7px 10px; background: linear-gradient(160deg, var(--panel-2), transparent); }
.mine-drop-line { display: flex; justify-content: space-between; gap: 10px; margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.mine-drop-needs { color: var(--warn, #e0a33f); font-weight: 600; }
.mine-drop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mine-drop-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 0; padding: 5px 11px; border: 1px solid var(--warn, #e0a33f); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.mine-drop-chip .mine-dot { background: var(--warn, #e0a33f); }
.mine-drop-chip .mine-drop-item-title { font-size: 13.5px; max-width: 46vw; }
.mine-drop-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mine-drop .mine-drop-foot { margin-top: 6px; }

/* The hour in Limassol over the office picture (25 Oct). */
.hero-clock { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(8, 12, 20, 0.62); color: #e8eef8; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; pointer-events: none; }

/* Sessions tab, 25 Oct (Chris): the week's limit is one slim line across the whole width and never takes a vertical swipe; starred sessions
   have a lane of their own above it; the last five hours, a reset he was given and the projects' marks are in the drawer. */
.mine-lane { overflow: visible; touch-action: auto; }
.mine-lane > .mine-lane-card.slim { flex: 1 1 auto; width: auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-radius: 999px; }
.mine-lane-card.slim .mine-gauge-head { flex: none; gap: 8px; font-size: 12.5px; white-space: nowrap; }
.mine-lane-card.slim .mine-gauge-bar { flex: 1 1 60px; min-width: 40px; }
.mine-lane-card.slim .meta { flex: 0 1 auto; min-width: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.mine-stars { display: flex; gap: 6px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; }
.mine-stars::-webkit-scrollbar { display: none; }
.mine-stars[hidden] { display: none; }
.mine-star { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 190px; min-height: 0; padding: 4px 12px 4px 5px; border: 1px solid rgba(229, 175, 79, 0.45); border-radius: 999px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.mine-star.live { border-color: rgba(111, 211, 143, 0.55); }
.mine-star-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); font: 700 11px/1 var(--font); overflow: hidden; }
.mine-star-mark .sm-icon, .mine-star-mark svg { width: 16px; height: 16px; margin: 0; opacity: 1; }
.mine-star-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-drop { touch-action: pan-x; }
.mine-drop-gift { margin: 8px 2px 0; font-size: 12.5px; color: var(--ok); }
.mine-drop-gift b { font-weight: 700; }
.mine-drop-marks { display: flex; align-items: center; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.mine-drop-marks::-webkit-scrollbar { display: none; }
.mine-clear { margin: 0 0 10px; }
.mine-quick-acts .mine-remove { margin-left: auto; }
.mine-draft { display: flex; align-items: stretch; gap: 6px; margin: 0 0 6px; }
.mine-draft-open { flex: 1 1 auto; min-width: 0; margin: 0; }
.mine-draft-del { flex: none; min-width: 40px; margin: 0; font-size: 18px; }
.mine-lane-menu-job { margin-left: 6px; font-size: 12px; color: var(--muted); }
.mine-lane-menu-words { display: grid; gap: 3px; min-width: 0; }
/* What a crew member can do: tags apart from the name and position, green for a thing he can, grey for one he cannot (Chris, 25 Oct). */
.mine-can { display: flex; flex-wrap: wrap; gap: 4px; }
.mine-can-tag { padding: 1px 7px; border-radius: 999px; font: 600 10.5px/1.5 var(--font); letter-spacing: .02em; border: 1px solid var(--line); white-space: nowrap; }
.mine-can-tag.code, .mine-can-tag.web { color: var(--ok); border-color: currentColor; }
.mine-can-tag.none { color: var(--faint); }

/* 25 Oct (Chris): the week's limit runs from edge to edge of the window; the VS Code icon sits on each project's header. */
.mine-lane { margin-left: -16px; margin-right: -16px; }
.mine-lane > .mine-lane-card.slim { border-radius: 0; border-left: 0; border-right: 0; padding: 6px 16px; }
.mine-proj { position: relative; }
.mine-proj:has(.mine-proj-vs) .mine-proj-head { padding-right: 46px; }
.mine-proj-vs { position: absolute; right: 8px; top: 0; height: 56px; width: 34px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; z-index: 1; }
.mine-proj-vs:hover, .mine-proj-vs:focus-visible { color: var(--gold); outline: none; }

/* The lane in every state is one box (Chris, 30 Oct: "when I bring the card lane in or out the chat moves slightly up and down"; it had gained a
   background instead of moving up to close the gap under the tabs). Pinned over the thread, in its own place, or lying over the welcome, it has
   the same margin and padding, so pinning or letting go changes where it sits and nothing else: no line of the thread moves. Nothing behind
   the cards, and its top is as near the tab row as the pane allows. */
.work-scroll > .work-strip, .work-scroll > .work-strip.pinned, .work-scroll.welcoming > .work-strip {
  margin-top: 0; margin-bottom: 0; padding-top: 6px; padding-bottom: 6px; background: transparent;
}
.work-scroll.welcoming > .work-strip { top: 0; }

/* Nothing between the tab row and the first thing under it (Chris, 30 Oct: full screen was attached, the normal window kept a gap): the panes
   of Sessions, New and Crew works start at the tab row's edge as they do in full screen, and the New lane has no margin or padding above it. */
.detail.tabbed #pane-sessions, .detail.tabbed .pane-new, .detail.tabbed .pane-crew { padding-top: 0; }
.detail.tabbed .pane-new .work-scroll, .detail.tabbed .pane-crew .work-scroll { margin-top: 0; }
.detail.tabbed .pane-new .work-scroll > .work-strip, .detail.tabbed .pane-crew .work-scroll > .work-strip { padding-top: 0; }