/* The bottom sheet: a Share button on a white page, and the sheet that rises from the bottom over a darkened
   page. The sheet is white with round corners on top; its width stops at 560 pixels on wide screens. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #16161a;           /* text, the button */
  --muted: #7d7d86;
  --soft: #f2f2f5;          /* the round buttons, a row pressed */
  --line: #ececf0;
  --accent: #2f6bff;        /* the link copied */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

/* quick taps never become a double tap that zooms the page */
html {
  touch-action: manipulation;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

/* ---------------------------------------------------------------- the button that opens it */
.open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.open svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.open:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* the focus comes back here when the sheet closes: after a finger or the mouse, without the ring */
html[data-using='pointer'] .open:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------------- the dialog: the whole screen, see-through */
/* overflow: clip, not hidden: a hidden box can still be scrolled, and Safari scrolls the dialog to show the first
   button while the panel is still below the screen */
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: clip;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.sheet::backdrop {
  background: transparent;
}

/* the focus goes to the panel (the script puts it there): no outline on it, nor on the whole dialog */
.sheet:focus,
.sheet__panel:focus {
  outline: none;
}

.sheet__shade {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 18, 0.46);
  opacity: 0;
}

/* the panel: moved up and down by the script. It runs on 160 pixels below the screen's edge (the script knows it
   as UNDER), so stretched upwards past the top it never shows a gap underneath */
.sheet__panel {
  --under: 160px;
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--under));
  width: min(560px, 100%);
  max-height: calc(92svh + var(--under));
  padding: 0 0 calc(max(18px, env(safe-area-inset-bottom)) + var(--under));
  overflow: hidden auto;
  border-radius: 28px 28px 0 0;
  background: var(--page);
  box-shadow: 0 -10px 40px rgba(14, 14, 18, 0.14);
  translate: -50% 0;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.sheet.is-dragging .sheet__panel {
  cursor: grabbing;
}

/* too tall for the screen: the panel scrolls with the finger, and only its top drags it */
.sheet.is-scrolly .sheet__panel {
  touch-action: pan-y;
}

.sheet.is-scrolly .sheet__grab,
.sheet.is-scrolly .sheet__head {
  touch-action: none;
}

/* the grip on top: a real button (more or less of the sheet), and it stretches while the sheet is dragged */
.sheet__grab {
  display: grid;
  place-items: center;
  width: 100%;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}

.sheet__grab span {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: #d6d6dc;
}

.sheet__grab:focus-visible span {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 20px 0 24px;
}

.sheet__title {
  margin: 0;
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.sheet__sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.sheet__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sheet__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- the four round buttons */
.sheet__apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 22px 16px 22px;
  border-bottom: 1px solid var(--line);
}

.app {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app__ring {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--soft);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.app__ring svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app__name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.app.is-copied .app__ring {
  background: var(--accent);
  color: #fff;
}

.app.is-copied .app__name {
  color: var(--accent);
}

/* ---------------------------------------------------------------- the rows */
.sheet__rows {
  margin: 0;
  padding: 8px 8px 0;
  list-style: none;
}

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 560;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease;
}

.row svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.row--quiet {
  color: #d23b3b;
}

@media (hover: hover) and (pointer: fine) {
  .row:hover,
  .app:hover .app__ring,
  .sheet__close:hover {
    background: #e9e9ee;
  }

  .app.is-copied:hover .app__ring {
    background: var(--accent);
  }
}

.app:focus-visible,
.row:focus-visible,
.sheet__close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.app:focus-visible {
  outline-offset: 4px;
  border-radius: 12px;
}