/* Additions to the graphics of the area (css/area.css) for what the website already produces:
   messages of the page scripts, cookie banner, forms on the glass. Loaded after css/area.css. */

/* Messages written by the page scripts (Bootstrap markup: alert alert-info|danger|success|warning),
   drawn like the alerts of the area (.m-alert) */
.alert { --c: var(--ink-2); position: relative; display: block; margin: 0; padding: 12px 40px 12px 40px; border-radius: var(--r-md); background: var(--surface); border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); color: var(--ink); font-size: 14px; line-height: 1.45; text-align: left; }
.alert::before { content: ''; position: absolute; left: 16px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.alert-info { --c: var(--s1); }
.alert-success { --c: var(--ok); }
.alert-warning { --c: var(--warn); }
.alert-danger { --c: var(--critical); }
.alert .close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.alert .close:hover { color: var(--ink); background: var(--line); }
[id$="ResultMsg"]:empty { display: none; }

/* Cookie banner (js/cookie_consent.js) */
#cookie-msg { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; width: min(640px, calc(100% - 24px)); transform: translateX(-50%); padding: 14px 16px; border-radius: var(--r-lg); background: rgba(31, 31, 37, 0.95); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
#cookie-msg a { color: var(--ink); }
#cookie-msg a.btn-accept { display: inline-flex; align-items: center; min-height: 36px; margin-left: 6px; padding: 0 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-weight: 500; text-decoration: none; }

/* Aspetto (dark, light, as the system) in the footer of every page */
.m-theme { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.m-theme .m-input { width: auto; min-height: 36px; padding: 0 36px 0 12px; font-size: 13px; background-position: right 12px center; }

/* Title of a page with the sign of its section in front, as in the watchlist (.m-wl-head) */
.m-title-row { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.m-title-row .m-h1 { min-width: 0; }

/* Folders in the list of the files (courses where folders and files share the numbering): the color of the folders */
.m-file-icon.folder { color: var(--violet); }

/* Home without the column of the latest contents: the greeting alone, with the subscription under it */
.m-hero.is-solo { grid-template-columns: minmax(0, 1fr); }
.m-hero-head { display: grid; justify-items: start; gap: 16px; }
.m-subscription { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* Cards of the home: they are links, and a.m-card (display: block) wins on the grid of .m-place, which leaves the
   content against the sign. The grid back, with the space between sign and content */
a.m-place { display: grid; }
/* Card of a section the user cannot open (with Floow only): a lock in place of the arrow, the content a bit faded */
.m-place.is-locked > :not(.m-place-go) { opacity: 0.6; }

/* Glass of the Telegram Mini App login (login_telegram.php): the Disobey sign turning above the title, centered */
.m-glass-wait { justify-items: center; gap: 20px; text-align: center; }

/* Forms on the glass (manual login) */
.m-glass-form { display: grid; gap: 16px; width: 100%; }
.m-glass-form .m-field { width: 100%; }
.m-recaptcha { min-height: 78px; }

/* Video player (shared_material_viewer.php): when Google does not recognize the account in this browser the
   message takes the place of the video, and the frame grows to fit it (on phones 16:9 is too short) */
.m-viewer-denied { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px; padding: clamp(24px, 5vw, 48px); text-align: center; background: #070707; }
.m-viewer-denied .m-h3, .m-viewer-denied .m-small { max-width: 52ch; }
.m-viewer-denied .m-actions { justify-content: center; margin-top: 4px; }
.m-viewer[data-state="denied"] { aspect-ratio: auto; min-height: 280px; }
.m-viewer[data-state="denied"] .m-viewer-denied { position: relative; inset: auto; min-height: inherit; }
.m-viewer[data-state="denied"] .m-viewer-loading,
.m-viewer[data-state="denied"] .m-watermark { display: none; }

/* Booking of the consultation: the calendar of Google in a card. Google has no dark version of the booking page
   and its page cannot be styled from here: the whole frame is inverted (white becomes the dark of the cards)
   and the hues are turned back, so blue stays blue */
.m-calendar { display: block; width: 100%; height: min(78dvh, 720px); border: 0; background: #FFFFFF; filter: invert(0.9) hue-rotate(180deg); }

/* A card with a message and its button: how to buy the consultation (not Master users), the shared area only from
   a browser (Telegram Mini App) */
.m-message { display: grid; justify-items: start; gap: 20px; }

/* Choice of the watchlist (Altcoin, Floow) at the right of the title, as the choice of the wallet (.wallet-picker of
   wallet_app/styles.css, with the colors of the area). With one watchlist only its name, without menu */
.m-wl-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.m-wl-picker { position: relative; z-index: 5; }
.m-wl-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 16px 4px 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; transition: border-color var(--dur) var(--ease), transform 200ms var(--ease); }
button.m-wl-pick { cursor: pointer; }
button.m-wl-pick:hover { border-color: var(--line-strong); }
button.m-wl-pick:active { transform: scale(0.97); }
.m-wl-pick .m-i { width: 14px; height: 14px; color: var(--muted); transition: transform 400ms var(--ease); }
.m-wl-pick[aria-expanded="true"] .m-i:not(.m-lock) { transform: rotate(180deg); }
.m-wl-pick .m-i.m-lock { width: 13px; height: 13px; margin-left: -4px; }
.m-wl-mark { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--surface-3); color: var(--ink); font-size: 14px; font-weight: 600; }
.m-wl-mark.sm { width: 32px; height: 32px; font-size: 13px; }
.m-wl-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 270px; padding: 6px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); transform-origin: top right; animation: m-wl-menu-in 400ms var(--ease); }
.m-wl-menu a { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 8px; border-radius: 16px; color: var(--ink); font-size: 14.5px; text-decoration: none; transition: background-color 250ms var(--ease); }
.m-wl-menu a:hover { background: var(--surface-2); }
.m-wl-menu a[aria-current="true"] { background: var(--violet-soft); }
.m-wl-menu small { display: block; color: var(--muted); font-size: 12px; }
/* A watchlist the user does not have (Floow for Elite, Altcoin with Floow only): with a lock, it opens how to unlock it */
.m-wl-menu a.is-locked { grid-template-columns: 32px 1fr auto; }
.m-wl-menu a.is-locked .m-wl-mark { color: var(--muted); }
.m-wl-menu .m-lock { width: 14px; height: 14px; color: var(--muted); }
.m-async[data-state="locked"] > [data-when="locked"] { display: block; }
@keyframes m-wl-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .m-wl-menu { animation: none; } }
/* Phones: title and choice stay on one row (also when they stay at the top, below), the choice without its letter */
@media (max-width: 560px) {
  .m-wl-head { gap: 12px; }
  .m-wl-pick { gap: 8px; padding: 0 14px; }
  .m-wl-pick .m-wl-mark { display: none; }
}
@media (max-width: 370px) {
  .m-wl-head > .m-mark { width: 40px; height: 40px; }
}

/* With the choice, scrolling down title and choice stay at the top, as the title and the choice of the wallet
   (.masthead of wallet_app/styles.css): the bar of the area scrolls away and the head stays 16px from the top
   (its top padding goes above the screen). On phones it stays under the floating row of the sections
   (css/area_nav.css, 8px to 68px), and the veil goes up behind the row. The veil of the background only while
   stuck (is-stuck, watchlist_app/watchlist.js): before, it would hide the light of the background */
.m-wl-head:has(> .m-wl-picker:not([hidden])) { position: sticky; top: calc(16px - clamp(36px, 5vw, 56px)); z-index: 6; }
.m-wl-head.is-stuck::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--bg) calc(100% - 28px), color-mix(in srgb, var(--bg) 0%, transparent)); animation: m-wl-veil-in var(--dur) var(--ease); }
@keyframes m-wl-veil-in { from { opacity: 0; } }
@media (min-width: 761px) {
  body:has(.m-wl-picker:not([hidden])) .m-header { position: relative; top: 0; }
}
@media (max-width: 760px) and (min-height: 501px) {
  .m-wl-head:has(> .m-wl-picker:not([hidden])) { top: 56px; }
  .m-wl-head.is-stuck::before { top: -56px; }
}