/*
 * sheets.css (W24-WEBREELS, round 2): the sheets the reel's rail opens
 * (sheets.js). Every colour is the app's, worked out by the app's own colour
 * rules for its two shipped themes (Core/Prefs.swift, Core/NoteSheet.swift,
 * Core/ControlPaint.swift); Light first, Dark under the phone's dark setting
 * or <html data-theme="dark">, as /shared/tokens.css does.
 */

:root {
  --sheet-wash-a: #E9EEF2;      /* the sheet's wash, top left ... */
  --sheet-wash-b: #E2E7EB;      /* ... to bottom right (Prefs.swift) */
  --sheet-ink: #0B1014;
  --sheet-ink-rgb: 11, 16, 20;
  --note-card: #D1D7DB;         /* NoteSheet: the card, 1.17:1 to the sheet */
  --note-pill: #C1C7CB;         /* one card lift */
  --note-pill-ink: #4B5054;
  --note-source: #50565A;
  --note-link: #565E65;
  --note-credit: #646E76;       /* the second accent, at 0.75 */
  --sheet-divider: #AEB4B8;
  --switch-off: #DEE3E7;
  --seg-chosen-ink: #FFFFFF;
  --pill-fill-a: #0B1014;       /* the volume pill's fill: the ink under the */
  --pill-fill-b: #0D1115;       /* theme's wash (SettingsPanel.volumePill) */
  --accent-a: #0B1014;          /* the accent (the ink at full strength) */
  --accent-b: #0A0F12;          /* ... 8 % deeper (ControlPaint.litRamp) */
  --knob-lit: #FFFFFF;          /* SwitchPaint.knob: white reads on the lit track */
  --switch-edge: #CCD1D5;       /* SwitchPaint.offEdge: 0.145 toward #14181C */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sheet-wash-a: #0D1216;
    --sheet-wash-b: #15191D;
    --sheet-ink: #FFFFFF;
    --sheet-ink-rgb: 255, 255, 255;
    --note-card: #21262B;
    --note-pill: #2D3238;
    --note-pill-ink: #A0A3A5;
    --note-source: #909295;
    --note-link: #858D93;
    --note-credit: #757E84;
    --sheet-divider: #3A4044;
    --switch-off: #414548;
    --seg-chosen-ink: #14181C;
    --pill-fill-a: #FFFFFF;
    --pill-fill-b: #FFFFFF;
    --accent-a: #FFFFFF;
    --accent-b: #EBEBEB;
    --knob-lit: #0B1014;        /* white cannot be seen on white: the page */
    --switch-edge: rgba(255, 255, 255, 0.06);
  }
}

:root[data-theme="dark"] {
  --pill-fill-a: #FFFFFF;
  --pill-fill-b: #FFFFFF;
  --accent-a: #FFFFFF;
  --accent-b: #EBEBEB;
  --knob-lit: #0B1014;
  --switch-edge: rgba(255, 255, 255, 0.06);
  --sheet-wash-a: #0D1216;
  --sheet-wash-b: #15191D;
  --sheet-ink: #FFFFFF;
  --sheet-ink-rgb: 255, 255, 255;
  --note-card: #21262B;
  --note-pill: #2D3238;
  --note-pill-ink: #A0A3A5;
  --note-source: #909295;
  --note-link: #858D93;
  --note-credit: #757E84;
  --sheet-divider: #3A4044;
  --switch-off: #414548;
  --seg-chosen-ink: #14181C;
}

/* ------------------------------------------------------------ the frame */

.sheet-layer {
  position: absolute;
  z-index: 20;
  overflow: hidden;
  pointer-events: auto;
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* SheetPanel's veil, black at 0.45 (none under the notes, whose reel plays
   on above them; the bare layer still takes the tap that closes it) */
.sheet-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.32s ease-out;
}

.sheet-layer[data-in="1"] .sheet-dim[data-on="1"] {
  opacity: 0.45;
}

.sheet-layer[data-in="0"] .sheet-dim {
  transition-duration: 0.26s;
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(to bottom right, var(--sheet-wash-a), var(--sheet-wash-b));
  color: var(--sheet-ink);
  outline: none;
  overflow: hidden;
}

.sheet-layer[data-motion="fade"] .sheet {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.sheet-layer[data-motion="fade"][data-in="1"] .sheet {
  opacity: 1;
}

.sheet-layer[data-motion="fade"][data-in="0"] .sheet {
  opacity: 0;
}

/* the head: the grabber 9 down, the title 22 down and 20 in, then the
   content 8 under it; a pull here takes the sheet down */
.sheet-head {
  position: relative;
  flex: none;
  padding: 22px 20px 8px;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.sheet-grab {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 38px;
  height: 5px;
  margin-left: -19px;
  border-radius: 2.5px;
  background: rgba(var(--sheet-ink-rgb), 0.28);
}

.sheet-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  color: var(--sheet-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-foot {
  flex: none;
  padding-bottom: var(--safe-bottom, 0px);
}

/* the sheet's x (round 3): a 30-point circled cross 14 from the right, on
   the title's line, in the notes' cancel ink, with the app's 44-point finger
   round it; the title stops short of it */
.sheet-head[data-close="1"] {
  padding-right: 56px;
}

.sheet-close {
  position: absolute;
  top: 17px;
  right: 14px;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sheet-close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}

.sheet-close svg {
  display: block;
}

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

/* ------------------------------------------------------------ the notes */

/* the verse, and "3 notes" closing its row (StudyPanel): 19 pt in the ink at
   0.92, then 17 pt semibold in the ink at 0.45, 18 above it */
.note-verse {
  padding: 11px 20px;
}

.note-verse-words {
  font-size: var(--n-verse, 19px);
  line-height: normal;
  color: rgba(var(--sheet-ink-rgb), 0.92);
}

.note-header {
  font-size: var(--n-header, 17px);
  font-weight: 600;
  line-height: normal;
  color: rgba(var(--sheet-ink-rgb), 0.45);
}

.note-verse-words + .note-header {
  margin-top: 18px;
}

/* one card a note: the search list's group radius 15, 16 in from the sides,
   5 above and below, its words 14 in and 11 down */
.note-card {
  position: relative;
  margin: 5px 16px;
  padding: 11px 14px;
  border-radius: 15px;
  background: var(--note-card);
}

/* the kind in a capsule at the card's top left (NoteSheet S7): 12 pt
   semibold, 20 tall, 9.82 of air a side, a card lift off the card */
.note-pill {
  display: inline-block;
  height: var(--n-pill-h, 20px);
  padding: 0 var(--n-pill-pad, 9.82px);
  border-radius: calc(var(--n-pill-h, 20px) / 2);
  background: var(--note-pill);
  color: var(--note-pill-ink);
  font-size: var(--n-pill, 12px);
  font-weight: 600;
  line-height: var(--n-pill-h, 20px);
  white-space: nowrap;
  vertical-align: top;
}

.note-words[data-under-pill="1"] {
  margin-top: var(--n-gap-pill, 6px);
}

/* the hook, 18 semibold in the ink; 2 under it the body, 17 in the ink at 0.9 */
.note-hook {
  font-size: var(--n-hook, 18px);
  font-weight: 600;
  line-height: normal;
  color: var(--sheet-ink);
  margin-bottom: var(--n-gap-hook, 2px);
}

.note-body {
  font-size: var(--n-body, 17px);
  line-height: normal;
  color: rgba(var(--sheet-ink-rgb), 0.9);
}

/* our own note's source, 13 medium, 2 under the body; its reference the
   link, underlined in its own ink */
.note-source {
  margin-top: var(--n-gap-source, 2px);
  font-size: var(--n-small, 13px);
  font-weight: 500;
  line-height: normal;
  color: var(--note-source);
}

.note-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--note-link);
  text-decoration: underline;
  text-decoration-color: var(--note-link);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.note-link:focus-visible,
.note-cancel:focus-visible {
  outline: 2px solid var(--note-link);
  outline-offset: 3px;
  border-radius: 4px;
}

.note-empty {
  padding: 11px 20px;
  font-size: var(--n-empty, 16px);
  line-height: normal;
  white-space: pre-line;
  color: rgba(var(--sheet-ink-rgb), 0.45);
}

/* the credit, once, pinned at the foot: 13 medium in the second accent at
   0.75, centred, 12 over it and 8 under it (NoteSheet S1) */
.note-credit {
  padding: var(--n-credit-above, 12px) 20px 8px;
  font-size: var(--n-small, 13px);
  font-weight: 500;
  line-height: normal;
  text-align: center;
  color: var(--note-credit);
  opacity: 0.75;
}

/* the countdown's outline and its x (NoteLinks L5, L6) */
.note-outline {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.note-outline path {
  fill: none;
  stroke: var(--note-link);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-outline-track {
  opacity: 0.2;
  animation: note-track-in 0.2s ease-out;
}

@keyframes note-track-in {
  from { opacity: 0; }
  to { opacity: 0.2; }
}

.note-cancel {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: note-cancel-in 0.2s ease-out;
}

/* the app's 44-point finger round it */
.note-cancel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}

.note-cancel svg {
  display: block;
}

.note-cancel-disc {
  fill: rgba(var(--sheet-ink-rgb), 0.12);
  stroke: rgba(var(--sheet-ink-rgb), 0.16);
  stroke-width: 1;
}

.note-cancel-cross {
  fill: none;
  stroke: rgba(var(--sheet-ink-rgb), 0.78);
  stroke-width: 1.6;
  stroke-linecap: round;
}

@keyframes note-cancel-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .note-cancel {
    animation: none;
  }
}

/* ---------------------------------------------------- the settings pages */

/* SettingsPanel: the page 20 in from the sides with 6 of air at its top;
   a heading 13 medium in the ink at 0.55; rows 52 tall, 4 apart, their
   titles 16 medium in the ink */
.set-page {
  padding: 6px 20px 14px;
}

.set-heading {
  padding: 8px 0 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: rgba(var(--sheet-ink-rgb), 0.55);
}

.set-heading:not(:first-child) {
  margin-top: 6px;
}

.set-row {
  display: flex;
  align-items: center;
  min-height: 52px;
  gap: 12px;
}

.set-row + .set-row {
  margin-top: 4px;
}

.set-row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: var(--sheet-ink);
}

/* a sound's row: its name, the speaker 8 before the pill, the pill 0.46 of
   the row */
.set-volume {
  display: grid;
  grid-template-columns: 1fr 22px 46%;
  column-gap: 8px;
}

.set-volume-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--sheet-ink);
}

.set-volume-icon[data-look="silent"] {
  color: rgba(var(--sheet-ink-rgb), 0.28);
}

.set-volume-icon svg {
  display: block;
  overflow: visible;
}

/* VolumePill: 28 tall, a capsule, its track the ink at 0.16, no knob; the
   finger is taken 10 above and below it */
.volume-pill {
  position: relative;
  height: 28px;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.volume-pill::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

.volume-track {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(var(--sheet-ink-rgb), 0.16);
}

.volume-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(to bottom right, var(--pill-fill-a), var(--pill-fill-b));
}

.volume-pill:focus-visible .volume-track {
  outline: 2px solid var(--sheet-ink);
  outline-offset: 2px;
}

/* --------------------------------------------- the Settings sheet's controls */
/* SegmentPaint: a 36-tall track of equal segments, radius 10 with 2 of
   padding, the ink at 0.14 and a one-point edge of the ink at 0.10; the
   chosen segment's pill, radius 8, in the accent run 8 % deeper toward its
   foot, lifted 0 1 4 at 0.25, its word in the ink that reads on it; the
   other words 13 semibold in the ink at 0.70, cross-fading over 0.2 s as
   the pill slides. */
.seg {
  position: relative;
  display: flex;
  height: 36px;
  margin-top: 4px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(var(--sheet-ink-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--sheet-ink-rgb), 0.10);
}

.seg-pill {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  border-radius: 8px;
  background: linear-gradient(to bottom, var(--accent-a), var(--accent-b));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.32s cubic-bezier(0.22, 0.95, 0.32, 1);
}

.seg-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(var(--sheet-ink-rgb), 0.70);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease-out;
}

.seg-item[aria-checked="true"] {
  color: var(--seg-chosen-ink);
}

.seg-item:focus-visible {
  outline: 2px solid var(--sheet-ink);
  outline-offset: 1px;
}

/* SwitchPaint, the whole row the control (SettingsPanel.toggle): a 51 x 31
   track with a 27-point knob 2 in, travelling 20; unlit, the page stepped
   toward its far extreme with its edge; lit, the accent run 8 % deeper;
   the knob white with Firmament's 0 3 8 shadow at 0.25, or the page's own
   colour on a lit track white cannot be seen on (Dark). The track fades
   over 0.25 s. */
.set-switch {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.set-switch:focus-visible {
  outline: 2px solid var(--sheet-ink);
  outline-offset: 2px;
  border-radius: 8px;
}

.switch {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 15.5px;
  background: var(--switch-off);
  box-shadow: inset 0 0 0 1px var(--switch-edge);
}

.switch-lit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--accent-a), var(--accent-b));
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.switch-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.32s cubic-bezier(0.22, 0.95, 0.32, 1), background-color 0.25s ease-out;
}

.set-switch[aria-checked="true"] .switch-lit {
  opacity: 1;
}

.set-switch[aria-checked="true"] .switch-knob {
  transform: translateX(20px);
  background: var(--knob-lit);
}

/* the page's rule, one point in a 17-point strip; and 8 of air */
.set-divider {
  position: relative;
  height: 17px;
}

.set-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 1px;
  background: var(--sheet-divider);
}

.set-gap {
  height: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .seg-pill,
  .seg-item,
  .switch-lit,
  .switch-knob {
    transition: none;
  }
}

/* -------------------------------------------------------- the Share sheet */
/* SharePanel: the rows 4 under the title and 12 in from the sides; a row
   64 tall when it carries a line under its title, its icon 24 square 10 in,
   the words 16 after it, the title 16 medium in the ink and the link 12
   regular in the ink at 0.45 one point under it. A press dims the row to
   0.5. */
.share-list {
  padding: 4px 12px 0;
}

.share-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  margin: 0;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--sheet-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease-out;
}

.share-row:active {
  opacity: 0.5;
  transition: opacity 0.1s ease-out;
}

.share-row:focus-visible {
  outline: 2px solid var(--sheet-ink);
  outline-offset: -2px;
}

.share-icon {
  flex: none;
  display: flex;
  width: 24px;
  height: 24px;
  margin-right: 16px;
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.35));
}

.share-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.share-title {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.share-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: rgba(var(--sheet-ink-rgb), 0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the old copy command's field: there to be selected, never seen */
.share-copy-buffer {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  pointer-events: none;
}

/* ------------------------------------------------------------- the popup */
/* Round 4 (the owner: "it should popup overtop of the reel in the center to
   download the app"): the bookmark's Save and the feed's own offer, a card in
   the middle of the reel over its dimmed picture, in the app's card look
   (ShareAsk.swift, look A): sides 24, the content 40 down, the app's icon 56
   (its corners 22.5 %, AppIconArt's), 14 under it "Scrollible" in the page
   serif 22 semibold, 10 under that the one line in the reading face 17, 24
   before the stores; corners 22, the sheets' wash and ink. sheets.js sets
   its width (min(400, the stage less 48)), its place and its in and out. */
.sheet-popup {
  right: auto;
  bottom: auto;
  display: block;
  box-sizing: border-box;
  border-radius: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.2s ease-out, transform 0.32s cubic-bezier(0.22, 0.95, 0.32, 1);
}

.sheet-layer[data-mode="popup"][data-in="1"] .sheet-popup {
  opacity: 1;
  transform: none;
}

.sheet-layer[data-mode="popup"][data-in="0"] .sheet-popup {
  opacity: 0;
  transform: scale(0.96);
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: ease-in, ease-in;
}

.sheet-layer[data-mode="popup"] .sheet-dim {
  transition-duration: 0.2s;
}

/* Reduce Motion: it only fades */
.sheet-layer[data-mode="popup"][data-motion="fade"] .sheet-popup {
  transform: none;
  transition: opacity 0.2s ease-out;
}

.popup-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 24px;
  text-align: center;
}

.popup-icon {
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 22.5%;
}

.popup-title {
  margin: 14px 0 0;
  font: 600 22px/1.2 var(--font-serif);
  color: var(--sheet-ink);
}

.popup-line {
  margin: 10px 0 0;
  max-width: 100%;
  font: 400 17px/1.35 var(--font-serif);
  color: var(--sheet-ink);
  text-wrap: balance;
}

html.reel-dev-font .popup-title,
html.reel-dev-font .popup-line {
  font-family: "Scrollible Dev New York", var(--font-serif);
}

/* the page's own store lines for the visitor's phone, centred, one under
   the other (no dot between two "coming soon" lines), 24 under the line; the
   "coming soon" words 14 medium in the card's ink at 0.72 */
.popup-body .stores {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 24px 0 0;
}

.popup-body .stores .store-soon {
  color: rgba(var(--sheet-ink-rgb), 0.72);
}

.popup-body .stores .store-soon + .store-soon::before {
  content: none;
}

.popup-body a.store:focus-visible {
  outline: 2px solid var(--sheet-ink);
  outline-offset: 2px;
}

/* its x ("Close"): the sheets' circled cross, 12 in from the top right
   corner, inside the app's 44-point finger */
.sheet-popup > .popup-close {
  top: 12px;
  right: 12px;
}