/* =====================================================================
   ISLAMICSTUDIES.INFO — APP ADDITIONS
   Styles for the "Save offline" buttons, the Saved page and the small
   pop-up messages. Loaded after library.css; uses the same colour names.
   ===================================================================== */

/* Save offline / Saved button inside each book box:
   a small rounded pill on its own line, shaded slightly darker than the box */
.item { position: relative; }
button.save {
  display: table;               /* own line, only as wide as its text */
  margin-top: 10px;
  padding: 3px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  font: 600 11.5px/1.4 var(--f-sans);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
button.save:hover {
  border-color: var(--line);
  color: var(--accent);
}
button.save.on {
  background: var(--accent-soft);
  color: var(--accent);
}
button.save:disabled { opacity: .7; cursor: progress; }
/* single-link book: right after the PDF badge, on the title line */
.badges {
  align-items: center;        /* badges keep their own height next to the button */
}
.badges button.save {
  display: inline-block;
  margin: 0 0 0 4px;
  padding: 2px 9px;
  font-size: 11px;
  vertical-align: middle;
}

/* inside the row of link buttons, right after the link it saves:
   Text pages  ↓ Save Text pages   Scanned pages */
.subs button.save {
  display: inline-block;
  margin: 0 12px 0 0;         /* extra space before the next link */
  padding: 3px 8px;
  font-size: 11px;
}
.item.is-saved { border-left-color: var(--accent); }

/* "★ 3 saved books" strip on the home page */
.saved-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 22px 0 0;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius);
  color: var(--ink);
}
.saved-strip:hover { text-decoration: none; border-color: var(--accent); }
.saved-strip span { color: var(--accent); font-weight: 600; }

/* While offline: books that need internet are dimmed, saved ones stay bright */
html.offline .item:not(.is-saved) { opacity: .45; }
html.offline .item:not(.is-saved) button.save { display: none; }

/* Pop-up message at the bottom of the screen */
#toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  max-width: min(92vw, 460px);
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--hdr);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Inside the installed app there is no browser address bar, so keep content
   clear of the phone's notch / gesture bar. */
@media (display-mode: standalone) {
  .site-foot { padding-bottom: env(safe-area-inset-bottom); }
}

/* Back button in the header (added by library.js; hidden on the home screen) */
.iconbtn[hidden] { display: none; }
.backbtn svg { width: 20px; height: 20px; }