/* ============================================================================================
   📅 ✉ THE TIMELINE'S TWO ACTION PANELS (29 Oct 2026; Rossi: "retrieve those features and integrate them in the
   timeline and ensure Zin can perform those tasks within the timeline and when a timeline card is opened").
   The calendar panel (styles-calendar.css) and the email composer (styles-email-composer.css) were built for the swipe
   feed's phone frame, where they sit `absolute` inside it. On the timeline they sit over the whole window, above an
   opened card (.tl-portal, z-index 2100) and the call bar, so the card stays open underneath and comes back when the
   panel closes. Phone: a sheet from the bottom, 95% tall like every other sheet. Wider: a centred panel.
   Driven by src/timeline/timeline-actions.js.
   ============================================================================================ */
.gv-acts #cal-backdrop, .gv-acts #ec-backdrop { position: fixed; z-index: 2400; }
.gv-acts #cal-sheet, .gv-acts #ec-sheet { position: fixed; z-index: 2401; width: min(95vw, 560px); height: 95svh; max-height: 95svh; }
@media (min-width: 720px) {
  .gv-acts #cal-sheet, .gv-acts #ec-sheet {
    top: 50%; bottom: auto; height: min(88svh, 720px); border-radius: 22px;
    transform: translate(-50%, calc(-50% + 40px)); opacity: 0; transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .28s ease;
  }
  .gv-acts #cal-sheet.is-open, .gv-acts #ec-sheet.is-open { transform: translate(-50%, -50%); opacity: 1; }
}

/* the buttons on an opened card: the same outline as its "Ouvrir" link, a calendar or an envelope in front */
.tl-sheet-gvacts { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-sheet-body > .tl-sheet-gvacts { margin-top: 14px; }
.tl-gvact { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--tl-rule2); background: var(--tl-card); color: var(--tl-ctl); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tl-gvact:hover { border-color: var(--tl-ctl); }
.tl-gvact:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
.tl-gvact svg { width: 17px; height: 17px; flex: none; }
/* the computer's card panel (navy, on the right of the timeline) carries them too: outlined on the navy, as its own
   "Seulement ici" is, a little smaller */
.tl-call .tl-sheet-gvacts { margin-top: 14px; }
.tl-call .tl-gvact { min-height: 40px; font-size: 13.5px; padding: 0 14px; border-color: var(--navy-rule2); background: transparent; color: var(--on-navy); }
.tl-call .tl-gvact:hover { border-color: var(--on-navy); }

/* (29 Oct, evening) "Abonnés" on a subscribers' feature, for a reader who does not subscribe (timeline-actions.js) */
.tl-gvact-tag { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: rgba(58, 208, 236, .16); color: #0B6F82; }
.tl-call .tl-gvact-tag { background: rgba(58, 208, 236, .16); color: #3AD0EC; }

/* the "for subscribers" panel: GenevAI's own navy and the bar's cyan, the colours of the Homes switch. Phone: a sheet
   from the bottom. Wider: a small centred card. It opens in place of a composer that could only fail at the last step. */
.pw-backdrop { position: fixed; inset: 0; z-index: 2400; background: rgba(6, 14, 30, .55); }
/* (30 Oct) Rossi: "too densed ... Double the height of this panel on desktop, and on mobile, set the height of this
   panel to 90%". A phone: a sheet from the bottom, 90% of the screen, its list scrolling and the buttons pinned. */
.pw-sheet { position: fixed; z-index: 2401; left: 50%; bottom: 0; transform: translateX(-50%); box-sizing: border-box; width: min(100vw, 520px);
  height: 90vh; height: 90dvh; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: #0A1830; color: #fff;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); overflow: hidden; }
.pw-sheet[hidden], .pw-backdrop[hidden] { display: none; }
/* (31 Oct) its cross: the only way out besides "Plus tard" now that a press beside it does nothing (Rossi: "the user should
   only be able to close this ligthbox by cliking the cross sign"); the sign-in box's cross, same size and place */
.pw-x { position: absolute; top: 19px; right: 16px; z-index: 1; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #E9EFF8; cursor: pointer; }
.pw-x:hover { background: rgba(255, 255, 255, .16); }
.pw-x:focus-visible { outline: 2px solid #3AD0EC; outline-offset: 2px; }
.pw-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pw-body { flex: 1 1 auto; overflow-y: auto; padding: 26px 22px 8px; }
/* a computer: centred, twice the old height (about 330px then), never past the screen */
@media (min-width: 720px) {
  .pw-sheet { top: 50%; bottom: auto; transform: translate(-50%, -50%); height: min(740px, calc(100vh - 48px)); border-radius: 22px; }
  .pw-body { padding: 32px 34px 8px; }
  .pw-x { top: 25px; right: 24px; }   /* centred on the "Abonnés" tag's line */
}
.pw-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; background: rgba(58, 208, 236, .14); color: #3AD0EC; }
.pw-title { text-wrap: balance; margin: 14px 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; color: #fff; }
.pw-text { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: #B9C7DC; }
.pw-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 16px; }
.pw-list li { display: flex; align-items: flex-start; gap: 14px; }
.pw-list li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pw-list b { font-size: 16px; line-height: 1.3; color: #fff; }
.pw-list span { font-size: 14.5px; line-height: 1.5; color: #B9C7DC; }
.pw-list svg { width: 22px; height: 22px; flex: none; color: #3AD0EC; padding: 9px; border-radius: 12px; background: rgba(58, 208, 236, .12); box-sizing: content-box; }
.pw-list li:first-child b { color: #3AD0EC; }
.pw-foot { flex: none; display: flex; gap: 10px; padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); background: #0A1830; }
@media (min-width: 720px) { .pw-foot { padding: 18px 34px 22px; } }
.pw-later, .pw-go { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 999px; font-size: 15.5px; font-weight: 700; cursor: pointer; text-align: center; }
.pw-later { flex: 0 0 auto; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.pw-later:hover { border-color: #fff; }
.pw-go { flex: 1 1 auto; padding: 0 12px; white-space: nowrap; background: #3AD0EC; color: #0C1D3A; }
.pw-go:hover { background: #5EDBF1; }
.pw-later:focus-visible, .pw-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* (29 Oct) a locked school menu: the list line keeps the days, the open card says what the plan adds and offers it */
.tl-vsum.tl-vmenu.tl-vlocked > span { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; white-space: normal; overflow: visible; text-overflow: clip; }
/* (29 Oct) the Deals chip stays in sight while its twenty shelves scroll beside it */
.tl-chips > .tl-chip.has-ext { position: sticky; left: 0; z-index: 2; }
.tl-menu-lock { display: grid; gap: 12px; justify-items: start; }
.tl-menu-lock p { margin: 0; }
.tl-menu-lock .tl-gvact { flex: none; }
.tl-call .tl-menu-lock p { color: var(--on-navy); }
/* (30 Oct) Rossi: "not currently visually obvious that this is a paid wall ... display that inside a light red background
   panel" and "a more stand out CTA bright color button, typical of an ecommerce store". The same light card on the
   white sheet and on the navy right-hand panel, so the wall reads the same everywhere. */
.tl-menu-lock.tl-paywall { gap: 10px; padding: 16px 16px 14px; border-radius: 14px; background: #FFF1F0; border: 1px solid #F7C4C0; color: #5B1C17; }
.tl-call .tl-menu-lock.tl-paywall p, .tl-menu-lock.tl-paywall p { color: #5B1C17; font-size: 14.5px; line-height: 1.5; }
.tl-menu-lock.tl-paywall .tl-pw-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #B42318; }
.tl-call .tl-menu-lock.tl-paywall .tl-pw-h { color: #B42318; }
.tl-pw-h svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.tl-menu-lock.tl-paywall .tl-pw-note { font-size: 13px; color: #7A3A33; }
.tl-call .tl-menu-lock.tl-paywall .tl-pw-note { color: #7A3A33; }
.tl-buy { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 18px;
  border-radius: 12px; background: #FFC21A; color: #1A1206; font-size: 16px; font-weight: 800; cursor: pointer; text-align: center;
  box-shadow: 0 2px 0 #D99A00, 0 6px 16px rgba(255, 170, 0, .32); transition: transform .06s ease, background .15s ease; }
.tl-buy:hover { background: #FFB300; }
.tl-buy:active { transform: translateY(1px); box-shadow: 0 1px 0 #D99A00; }
.tl-buy:focus-visible { outline: 3px solid #B42318; outline-offset: 2px; }
.tl-buy-tag { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #1A1206; color: #FFC21A; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .gv-acts #cal-sheet, .gv-acts #ec-sheet, .gv-acts #cal-backdrop, .gv-acts #ec-backdrop { transition: none; }
}