/* Home dialogs' innards: the book's Properties sheet (detail-ui.js), login,
   "Tủ sách" lists, Send-to-Kindle. Frames, title bars and z-order live in
   style.css; this file lays out what goes inside them. */

/* ===== Book Properties =====
   Only the middle scrolls: the title bar and the button row stay put, so the
   actions are always one tap away however long the blurb is, and no text
   ever scrolls across the window's frame. */
#detail { padding: var(--s4) var(--s4) calc(var(--taskbar-h) + var(--safe-b) + var(--s4)); }
.detail-card { display: flex; flex-direction: column; width: min(680px, 100%); max-height: 100%; }
.detail-card > .dlg-title { flex: none; margin: 0; }
.detail-scroll { flex: 0 1 auto; overflow: auto; overscroll-behavior: contain; }
.detail-body { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s5); padding: var(--s5) var(--s5) var(--s4); }
.detail-cover { width: 140px; height: 204px; box-shadow: var(--cover-shadow); }
.detail-name { margin: 0; font: 600 24px/1.25 var(--font-book); letter-spacing: -.005em; overflow-wrap: anywhere; }
.detail-en { margin: var(--s1) 0 0; font: italic 400 var(--t-md)/1.45 var(--font-book); color: var(--muted); }
.detail-by { margin: var(--s2) 0 0; font: 500 var(--t-md)/1.45 var(--font-ui); color: var(--text-2); }
.detail-by .linkish { font-weight: 600; }
dl.props {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s4);
  margin: var(--s4) 0 0; padding-top: var(--s3); font-size: var(--t-sm);
  border-top: 1px solid var(--shadow); box-shadow: inset 0 1px var(--light);
}
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#detail-list-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
/* A long list name wraps inside its chip instead of pushing the sheet sideways. */
.chip.list-chip {
  --py: 2px; --px: 8px; min-height: 22px; max-width: 100%; font-size: var(--t-xs);
  white-space: normal; overflow-wrap: anywhere; text-align: left; justify-content: flex-start;
}
.detail-blurb {
  margin: 0 var(--s5) var(--s4); padding: var(--s3) var(--s4); max-height: 232px; overflow: auto;
  background: var(--paper); box-shadow: var(--bevel-field); font: 400 15px/1.7 var(--font-book);
}
.detail-blurb p { margin: 0; max-width: 64ch; }
.detail-foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s3) var(--s4);
  background: var(--face); border-top: 1px solid var(--shadow); box-shadow: inset 0 1px var(--light);
}
.detail-shelf { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t-sm); line-height: 1.45; }
.detail-shelf > img { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
.detail-shelf > span { flex: 1 1 200px; min-width: 0; }
.detail-shelf label { color: var(--muted); }
.detail-shelf [aria-busy="true"] { cursor: progress; }   /* saving: still usable, the last choice wins */
.shelf-fav-btn { --px: 10px; }
.shelf-fav-btn:not(.active) img { filter: grayscale(1); opacity: .55; }   /* the red heart lights up when pressed */
.detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-left: auto; }

/* ===== Login ===== */
#login-users { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 var(--s3) var(--s3); }
#login-users:empty { display: none; }
.login-user { --px: 12px; }
/* Win95 logon: "Tên:" / "PIN:" labels left of their fields, buttons below. */
#login-form { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3); margin: 0 var(--s3) var(--s3); }
#login-form label { font-size: var(--t-sm); }
.login-error, .login-actions { grid-column: 1 / -1; }
.login-error { color: var(--danger); font-size: var(--t-sm); }
.login-error[hidden] { display: none; }
.login-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }
#login-submit, #login-cancel { --px: 18px; min-width: 88px; }

/* ===== "Tủ sách" lists ===== */
#lists-panel-body { flex: 1; min-height: 0; overflow: auto; margin: 0 3px 3px; padding: var(--s2) var(--s3) var(--s3); background: var(--paper); box-shadow: var(--bevel-field); }
.lists-clear-btn { margin: var(--s1) 0 var(--s1); }
.lists-group-title { margin: var(--s4) 0 var(--s2); font: 400 var(--d-sm)/1.1 var(--font-display); letter-spacing: .02em; color: var(--sel); }
.lists-group-items { display: flex; flex-wrap: wrap; gap: var(--s1); }
.lists-item-btn { --px: 10px; justify-content: flex-start; text-align: left; white-space: normal; }

/* ===== Send to Kindle ===== */
#kindle-modal > *:not(.dlg-title) { margin-left: var(--s3); margin-right: var(--s3); }
.kindle-addrs { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s2); }
.kindle-addr { display: flex; align-items: center; gap: var(--s2); }
.kindle-pick, .kindle-del { --px: 10px; }
/* A long address wraps inside its button, so every × stays at the right edge, in reach. */
.kindle-pick { flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.kindle-del { flex: none; }
.kindle-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin: var(--s3); }
.kindle-note { color: var(--muted); font-size: var(--t-xs); margin-bottom: var(--s2); }
/* Busy or sent: dimmed like :disabled, but still focusable, so the picker and
   the message box can hand focus back to it (kindle-ui.js). */
#detail-kindle[aria-disabled="true"] { color: var(--shadow); text-shadow: 1px 1px var(--light); cursor: default; }
#detail-kindle[aria-disabled="true"]:active { box-shadow: var(--bevel-out); padding: var(--py) var(--px); }

/* ===== Touch: small controls grow to a full tap ===== */
@media (pointer: coarse) {
  #detail-login, .chip.list-chip { min-height: var(--tap); }
  /* The link sits mid-sentence: its taller box hangs over the lines around it
     instead of pushing them apart, and stays on top of them for taps. */
  #detail-login { position: relative; margin-block: calc((1lh - var(--tap)) / 2); }
  dl.props { align-items: baseline; }   /* "Tủ sách" lines up with the taller chip's text */
}

/* ===== Phones, upright or on their side: Properties becomes a sheet ===== */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  #detail { align-items: flex-end; padding: var(--s4) 0 calc(var(--taskbar-h) + var(--safe-b)); }
  /* Full height from the start: the blurb arriving later fills it instead of
     growing a bottom-anchored sheet, which pushed the title bar up ~30px. */
  .detail-card { width: 100%; height: 100%; }
  .detail-scroll { flex: 1 1 auto; }
  .detail-body { grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3) var(--s4); padding: var(--s4); }
  .detail-art { grid-row: span 3; }
  .detail-cover { width: 92px; height: 134px; }
  .detail-name { font-size: 19px; }
  dl.props { grid-column: 1 / -1; margin-top: 0; }
  .detail-main { display: contents; }
  .detail-main > :not(dl) { grid-column: 2; }
  .detail-blurb { margin: 0 var(--s4) var(--s3); max-height: none; }
  .detail-actions { width: 100%; margin: 0; }
  .detail-actions .btn { flex: 1 1 auto; }
}
/* On their side the sheet keeps the desktop width, and the buttons sit beside the
   shelf line when both fit (a guest's two do; signed in, the three wrap below it),
   so the scrolling middle keeps its height. */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 641px) {
  .detail-card { width: min(680px, 100%); }
  .detail-actions { width: auto; margin-left: auto; }
}