/* =========================================================================
   The share rail: Facebook, Reddit, Threads and X at the inline-start edge
   (api/share.py has the why, templates/share/rail.html the markup)

   * where the margin beside the content holds it, four round buttons stand
     in a column in the middle of the edge, never touching the content
   * everywhere else a tab sits flush with the edge and opens the four as a
     stack: 56px tall, 40px wide, 44 where the margin beside the content
     holds that with 6px to spare (owner 2026-10-25: «share кнопку на
     мобилке больше сделай», the 16x48 sliver was too small). It changes no
     layout: on a phone it lies over the edge of the content (24px at the
     game's 16px gutter) and the page scrolls under it
   * the game's tab sits low, 6px above the bottom edge: under Play every
     start screen leaves the edge free, on a phone upright and sideways, on a
     short phone and in a long language, where the middle of the edge meets
     the tagline or the apps' block. The journal and the plain pages have no
     screen that holds still (they all scroll), so theirs stays in the middle
   * the page's own tokens (brand.css), with fallbacks for the plain pages,
     which load none; the network's colour only on hover and focus
   * hidden in a frame, under any sheet, dialog or menu of the game, over a
     match on a phone, and in print. Those rules carry !important, so no
     rule that shows the rail can ever win against them. The game's tab
     steps aside (share.js, .aside) while the foot of its articles, with
     the catalogues' badges, is under it
   ========================================================================= */

.share {
  /* the notch of a phone held sideways is outside the page's own edge */
  --share-edge: env(safe-area-inset-left, 0px);
  position: fixed;
  inset-inline-start: var(--share-edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 7; /* over the page, under the game's veil (8), sheets and toast */
  display: block;
  margin: 0;
  padding: 0;
  font: 400 14px/1 var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
[dir="rtl"] .share { --share-edge: env(safe-area-inset-right, 0px); }
.share *, .share *::before, .share *::after { box-sizing: border-box; }
/* a phone's own tap flash would paint the handle blue */
.share-handle, .share-link { -webkit-tap-highlight-color: transparent; }

/* -------------------------------- handle ---------------------------------- */
/* The tab is as wide as .share, which is 40px, or 44 where the content
   starts 50px in or more: the free margin less 6px, clamped. On a fixed box
   100% is the viewport without its scrollbar, the width the page is laid
   out in, so a classic scrollbar never makes it wider than the margin. The
   columns are the pages' own: the game's 1200px grid (16px gutter on a
   phone), the journal's 1120px .wrap (18px), the plain pages' 760px (20px).
   Where a whole rail fits, its own rules below set the width back to auto */
.share[data-fit="game"] { width: clamp(40px, max(16px, (100% - 1200px) / 2) - 6px, 44px); }
.share[data-fit="journal"] { width: clamp(40px, max(18px, (100% - 1120px) / 2) - 6px, 44px); }
.share[data-fit="page"] { width: clamp(40px, max(20px, (100% - 760px) / 2) - 6px, 44px); }

.share-handle {
  display: grid;
  place-items: center;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line, #ddd);
  border-inline-start: 0;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  background: var(--bg, #fff);
  color: var(--ink-2, #484848);
  box-shadow: var(--shadow-md, 0 6px 16px rgba(0, 0, 0, .12));
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.share-handle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-handle[aria-expanded="true"] { background: var(--bg-soft, #f7f7f7); color: var(--ink, #222); }
@media (hover: hover) { .share-handle:hover { background: var(--bg-soft, #f7f7f7); color: var(--ink, #222); } }
.share-handle:focus-visible { outline: 2px solid var(--ink-2, #484848); outline-offset: 2px; }

/* ------------------------------ the four ---------------------------------- */
/* Behind the handle: a stack beside it, 8px off the tab, shown while it is open */
.share-list {
  display: none;
  position: absolute;
  inset-inline-start: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share.open .share-list { display: flex; animation: share-in .14s ease-out; }
.share.open .share-link { box-shadow: var(--shadow-md, 0 6px 16px rgba(0, 0, 0, .12)); }
@keyframes share-in { from { opacity: 0; } to { opacity: 1; } }
.share-list li { display: block; margin: 0; padding: 0; }

.share-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line, #ddd);
  border-radius: 50%;
  background: var(--bg, #fff);
  color: var(--ink-2, #484848);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .08));
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.share-link svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-link svg.fill, .share-link svg .dot { fill: currentColor; stroke: none; }
/* the names are for screen readers, the icons and the title for the eye */
.share-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.share-link:focus-visible { outline: 2px solid var(--ink-2, #484848); outline-offset: 2px; }
/* the network's own colour, only under the pointer or the keyboard's focus */
.share-link:focus-visible { color: #fff; }
.share-link[data-net="facebook"]:focus-visible { background: #1877f2; border-color: #1877f2; }
.share-link[data-net="reddit"]:focus-visible { background: #ff4500; border-color: #ff4500; }
.share-link[data-net="threads"]:focus-visible,
.share-link[data-net="x"]:focus-visible { background: #000; border-color: #000; }
@media (hover: hover) {
  .share-link:hover { color: #fff; }
  .share-link[data-net="facebook"]:hover { background: #1877f2; border-color: #1877f2; }
  .share-link[data-net="reddit"]:hover { background: #ff4500; border-color: #ff4500; }
  .share-link[data-net="threads"]:hover,
  .share-link[data-net="x"]:hover { background: #000; border-color: #000; }
}

/* --------------------------- the game's tab, low -------------------------- */
/* 6px above the bottom edge (and the home indicator), in the strip under
   Play that every start screen leaves free; the stack opens upwards from
   the tab's foot, so all four stay on a 320px tall screen */
@media (max-width: 1351.98px) {
  .share[data-fit="game"] { top: auto; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .share[data-fit="game"] .share-list { top: auto; bottom: 0; transform: none; }
}

/* ------------------------- a rail in a free margin ------------------------ */
/* The widths where the margin beside each kind of page's content is at least
   76px (16 to the edge, 44 of buttons, 16 to the content); api/share.py FITS */
@media (min-width: 1352px) {
  .share[data-fit="game"] { inset-inline-start: calc(var(--share-edge) + 16px); width: auto; }
  .share[data-fit="game"] .share-handle { display: none; }
  .share[data-fit="game"] .share-list { display: flex; position: static; transform: none; animation: none; }
  .share[data-fit="game"] .share-link { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .08)); }
}
@media (min-width: 1272px) {
  .share[data-fit="journal"] { inset-inline-start: calc(var(--share-edge) + 16px); width: auto; }
  .share[data-fit="journal"] .share-handle { display: none; }
  .share[data-fit="journal"] .share-list { display: flex; position: static; transform: none; animation: none; }
  .share[data-fit="journal"] .share-link { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .08)); }
}
@media (min-width: 872px) {
  .share[data-fit="page"] { inset-inline-start: calc(var(--share-edge) + 16px); width: auto; }
  .share[data-fit="page"] .share-handle { display: none; }
  .share[data-fit="page"] .share-list { display: flex; position: static; transform: none; animation: none; }
  .share[data-fit="page"] .share-link { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .08)); }
}

/* ------------------------------ when not ---------------------------------- */
/* Inside any frame (share/head.html marks it before the body is drawn), and on
   a stranger's page or a copy of the site, where the game shows only the way
   to us (style.css, html.elsewhere) */
html.share-framed .share, html.elsewhere .share { display: none !important; }

/* The game (index.html, where the rail comes after every sheet in the body):
   a sheet, a dialog or a menu is open, so the page is inert and so is this.
   The veil is under every one of them but sign-in on a phone, which is a
   whole screen of its own */
.veil:not([hidden]) ~ .share,
.screen.auth:not([hidden]) ~ .share { display: none !important; }

/* Off the landing (a match, the search, a room, the streak and rating pages)
   the edges of a phone belong to the keyboard and the avatars beside the rows */
body.in-play > .share { display: none; }
/* On a computer the result panel slides in from the far side with no veil,
   and the board moves into the free part: the handle is clear of both */
@media (min-width: 1100px) {
  body.in-play > .sheetb:not([hidden]) ~ .share { display: block; }
}
/* Where the margin holds a whole rail, it stays through the match as well */
@media (min-width: 1352px) {
  body.in-play > .share[data-fit="game"] { display: block; }
}

/* The game's foot (the catalogues' badges, the WordleLike rating among them,
   and the last lines) scrolled under the low tab: share.js steps the tab
   aside until the page goes back up. Visibility, so nothing moves */
.share.aside { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .share-handle, .share-link { transition: none; }
  .share.open .share-list { animation: none; }
}

@media print {
  .share { display: none !important; }
}