/* app.css — what the Android app adds to the pages, and the public Privacy
   and Licences pages. Colours only through tokens.css; every rule is scoped
   under the view or component it belongs to. */

/* ---- the boot screen when the phone's library does not open */
.boot.boot-failed { padding: var(--s5); text-align: center; color: var(--text); }
.boot.boot-failed img { animation: none; }
.boot.boot-failed span { color: var(--text-2); font-weight: 600; max-width: 34ch; }

/* ---- the library on a phone, before its first book */
.route-library .lib-first { gap: var(--s3); padding-top: var(--s7); }
.route-library .lib-first .lib-empty-bear { width: 140px; margin-bottom: var(--s2); }
.route-library .lib-first > p.muted { max-width: 34ch; }
.route-library .lib-first .lib-first-add { min-width: min(100%, 280px); margin-top: var(--s3); }
.route-library .lib-first .lib-formats { margin: 0; }
.route-library .lib-first > .btn-ghost { margin-top: var(--s4); }

/* ---- notices at the top of the library (a server that did not answer) */
.route-library .lib-notices:empty { display: none; }
.route-library .lib-notices { margin-bottom: var(--s4); }
.route-library .lib-unreachable { align-items: center; flex-wrap: wrap; }
.route-library .lib-unreachable .grow { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.route-library .lib-unreachable .btn-group { margin-left: auto; }

/* ---- Settings → Libraries */
.route-settings .lb-list { margin: calc(var(--s4) * -1) calc(var(--s4) * -1) 0; }
.route-settings .lb-row[data-current="true"] .lb-icon { background: var(--accent-soft); color: var(--accent-deep); }
.route-settings .lb-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-sm); background: var(--bg-sunk); color: var(--text-2);
}
.route-settings .lb-row { flex-wrap: wrap; }
.route-settings .lb-row .grow { flex: 1 1 200px; }
.route-settings .lb-row > .st-row-actions, .route-settings .lb-row > .btn, .route-settings .lb-row > .badge { margin-left: auto; }
.route-settings .lb-row .st-row-actions:has(.confirm2) { flex: 1 1 100%; justify-content: flex-start; }
.route-settings .lb-row .sub { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* On a phone a server's buttons sit on their own line under its address. */
  .route-settings .lb-row > .st-row-actions { width: 100%; padding-left: 52px; justify-content: flex-start; margin-left: 0; }
}
.route-settings .lb-plain { display: flex; align-items: center; gap: 4px; color: var(--text-2); }
.lb-connect { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.lb-connect h3 { font-size: var(--fs-lg); }
.lb-connect .lb-warn, .lb-dialog .lb-warn { margin: 0; font-size: var(--fs-sm); }
.lb-dialog { display: flex; flex-direction: column; gap: var(--s4); }
.lb-dialog .lb-connect { border-top: 0; padding-top: 0; }

/* ---- Settings → About links, Storage → Backups */
.route-settings .st-about-links { display: flex; gap: var(--s2); flex-wrap: wrap; }
.route-settings .st-backup { margin-top: var(--s4); }

/* ---- Privacy and Licences */
/* A full-screen route is position: fixed, so the page scrolls inside it (on a phone the policy runs to several screens). */
.route-privacy, .route-licences { overflow: auto; overscroll-behavior: contain; }
.legal { min-height: 100dvh; background: var(--bg); color: var(--text); }
.legal-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); background: var(--bg); border-bottom: 1px solid var(--line);
}
.legal-brand { display: block; width: 44px; }
.legal-bear { width: 44px; }
.legal-body { max-width: 68ch; margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); display: flex; flex-direction: column; gap: var(--s5); line-height: 1.6; }
.legal-body h1 { font-family: var(--font-brand); font-size: var(--fs-3xl); line-height: 1.1; }
.legal-lead { font-size: var(--fs-lg); color: var(--text-2); margin-top: calc(var(--s3) * -1); }
.legal-section { display: flex; flex-direction: column; gap: var(--s3); }
.legal-section h2 { font-family: var(--font-brand); font-size: var(--fs-xl); }
.legal-section ul { padding-left: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.legal-section a { color: var(--accent-deep); font-weight: 700; }
.legal-parts { list-style: none; padding: 0 !important; gap: var(--s3) !important; }
.legal-part { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.legal-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.legal-text {
  width: 100%; max-height: 50vh; overflow: auto; margin: 0; padding: var(--s3);
  font: var(--fs-xs)/1.5 ui-monospace, 'SFMono-Regular', Menlo, monospace; white-space: pre-wrap;
  background: var(--bg-sunk); border-radius: var(--r-sm); color: var(--text-2);
}
@media (max-width: 640px) {
  .legal-body { padding-top: var(--s5); }
  .legal-body h1 { font-size: var(--fs-2xl); }
}