/* Shared pick boxes and the bottom copy shelf. Thirumurai's reader.css imports this
   and then repeats the same shelf rules, so the reader pages keep their own cascade. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/thirumurai/fonts/source-serif-4-400.woff2") format("woff2");
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pick {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.pick input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--mark);
}
html[data-subset] .pick { display: none; }
.share-shelf[hidden] { display: none !important; }
.share-shelf {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(46rem, 100%);
  display: grid;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--shelf, var(--soft));
  border-top: 1px solid var(--line);
  font-family: "Noto Serif Tamil", "Source Serif 4", serif;
}
.share-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}
.share-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.share-clear-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.share-shelf .share-count {
  display: flex;
  align-items: center;
  margin: 0;
  min-width: 0;
  min-height: 44px;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
  white-space: nowrap;
}
.share-dot {
  display: none;
}
.share-shelf #reorder,
.share-shelf #clear-sel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--mark);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
  padding: 0 0.15rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mark) 40%, transparent);
  text-underline-offset: 0.22em;
  white-space: nowrap;
}
.share-shelf #clear-sel { min-width: 44px; }
.share-shelf #reorder { flex: none; }
.share-shelf #reorder[hidden] { display: none !important; }
.share-url {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  user-select: all;
  font-family: "Source Serif 4", "Noto Serif Tamil", serif;
}
@media (max-width: 640px) {
  .share-url { display: none; }
  /* Phone only: count on its own line, then clear and reorder on one row.
     display:contents lifts those controls up to .share-top without moving them in the DOM.
     reader.css repeats .share-shelf later, so the gap rule needs the extra class. */
  .share-shelf.share-shelf { gap: 0.35rem; }
  .share-shelf .share-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
  }
  .share-shelf .share-lead,
  .share-shelf .share-clear-pair { display: contents; }
  .share-shelf .share-count,
  .share-shelf #reorder,
  .share-shelf #clear-sel,
  .share-dot { font-size: 0.92rem; }
  .share-shelf .share-count {
    flex: 1 0 100%;
    min-height: 0;
    padding-bottom: 0.15rem;
  }
  .share-shelf #clear-sel,
  .share-shelf #reorder { padding-left: 0; padding-right: 0; }
}
.share-shelf .share-url,
.share-shelf .share-actions { min-width: 0; }
.share-shelf .share-actions { display: flex; justify-content: flex-start; }
.share-shelf #copy-link {
  width: 100%;
  min-height: 50px;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--mark);
  background: var(--mark);
  color: var(--paper);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 641px) {
  .share-shelf #copy-link {
    width: max-content;
    min-width: 15rem;
    min-height: 44px;
  }
}
.pick input:focus-visible,
.share-shelf #copy-link:focus-visible,
.share-shelf #clear-sel:focus-visible,
.share-shelf #reorder:focus-visible,
.reorder-panel button:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}
body.reorder-open { overflow: hidden; }
.reorder-backdrop[hidden],
.reorder-panel[hidden] { display: none !important; }
.reorder-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(20, 14, 12, 0.38);
}
html[data-theme="dark"] .reorder-backdrop { background: rgba(0, 0, 0, 0.55); }
.reorder-panel {
  position: fixed;
  z-index: 21;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  background: var(--soft);
  color: var(--ink);
  font-family: "Source Serif 4", "Noto Serif Tamil", serif;
  font-weight: 400;
  box-shadow: 0 -8px 32px rgba(43, 33, 27, 0.18);
}
html[data-theme="dark"] .reorder-panel {
  background: var(--shelf);
  border: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
}
.reorder-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.5rem 0.35rem 1.15rem;
}
.reorder-title {
  margin: 0;
  font-family: "Noto Serif Tamil", serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
}
.reorder-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.reorder-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.5rem 1rem 0.75rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.reorder-list.is-dragging { user-select: none; }
.reorder-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.35rem;
  padding: 0.45rem 0.25rem 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--paper);
  transition: transform 0.18s ease;
}
.reorder-num {
  flex: none;
  width: 1.3rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.reorder-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Noto Serif Tamil", serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--ink);
}
.reorder-handle {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 0.5rem;
  cursor: grab;
  touch-action: pan-y;
}
.reorder-row.is-lifted {
  position: relative;
  z-index: 2;
  border-color: var(--mark);
  background: var(--soft);
  transition: none;
  box-shadow: 0 10px 28px rgba(43, 33, 27, 0.22), 0 2px 6px rgba(43, 33, 27, 0.12);
}
html[data-theme="dark"] .reorder-row.is-lifted {
  background: color-mix(in srgb, var(--soft) 92%, white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}
.reorder-row.is-lifted .reorder-handle { color: var(--mark); cursor: grabbing; }
.reorder-drop {
  display: block;
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 2px;
  border-radius: 1px;
  background: var(--mark);
  pointer-events: none;
  z-index: 4;
}
.reorder-drop[hidden] { display: none !important; }
.reorder-foot {
  flex: none;
  display: grid;
  gap: 0.4rem;
  border-top: 1px solid var(--line);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
}
.reorder-foot .share-url { margin: 0; }
.reorder-copy {
  width: 100%;
  min-height: 50px;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--mark);
  background: var(--mark);
  color: var(--paper);
  font-family: "Noto Serif Tamil", "Source Serif 4", serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
@media (max-width: 759.98px) {
  .reorder-panel {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(80dvh, 40rem);
    border-radius: 1.1rem 1.1rem 0 0;
    border-bottom: 0;
  }
  html[data-theme="dark"] .reorder-panel { border-bottom: 0; }
  .reorder-panel::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 4px;
    flex: none;
    align-self: center;
    border-radius: 2px;
    background: var(--line);
    margin: 0.55rem auto 0;
  }
}
@media (min-width: 760px) {
  .reorder-panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 24rem;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: -8px 0 32px rgba(43, 33, 27, 0.14);
  }
  html[data-theme="dark"] .reorder-panel { box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5); }
  .reorder-head { padding: 1.25rem 0.75rem 0.5rem 1.4rem; }
  .reorder-list { padding: 0.5rem 1.25rem 0.75rem; }
  .reorder-drop { left: 1.25rem; right: 1.25rem; }
  .reorder-foot { padding: 1rem 1.25rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reorder-row { transition: none; }
}
html[data-subset-pending] .picked { display: none; }
.picked { display: grid; gap: 1.15rem; }
.picked .book-title {
  margin: 0.2rem 0 0;
  font-family: "Noto Serif Tamil", serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  line-height: 1.3;
  color: var(--ink);
}
.picked .songs, .picked .pathikams { display: grid; gap: 1.6rem; }
.picked section.song h2,
.picked section.song h3 {
  margin: 0 0 0.5rem;
  font-family: "Noto Serif Tamil", serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mark);
}
.picked div.verse {
  --hang: 1.1em;
  width: auto;
  max-width: 100%;
  margin: 0;
  font-family: "Noto Serif Tamil", serif;
  font-weight: 500;
  text-align: start;
}
.picked .verse .l { display: block; padding-left: 1.1em; text-indent: -1.1em; }
.picked .verse .num { color: var(--muted); font-size: 0.82em; }
.picked .verse .nw { white-space: nowrap; }
@media (max-width: 759.98px) {
  .picked .verse.potri > .l + .l { margin-top: 0.4em; }
}
.picked .verse.tp > .l {
  --step: 1em;
  --hang: 2.5em;
  --lvl: 0;
  padding-left: calc(var(--lvl) * var(--step) + var(--hang));
  text-indent: calc(-1 * var(--hang));
}
.picked .verse.tp > .l.i1 { --lvl: 1; }
.picked .verse.tp > .l.i2 { --lvl: 2; }
.picked .verse.tp > .l.i3 { --lvl: 3; }
@media (min-width: 760px) {
  .picked .verse.tp > .l { --step: 1.5em; }
}
@media (min-width: 1000px) {
  .picked .verse { font-size: calc(1.4rem * var(--read-scale, 1)); line-height: 1.75; }
}