/* One presentation layer for both the public and activity-scoped diary. */
.playon-diary-ui {
  --diary-ink: #203448;
  --diary-blue: #006fcf;
  --diary-line: #e5eaf0;
  box-sizing:border-box;
  width:100% !important;
  min-width:0 !important;
  max-width:100vw;
  padding: 1rem 0;
}
.playon-diary-ui > .content-wrap { box-sizing:border-box; width:100%; min-width:0; max-width:1400px; margin-left:auto; margin-right:auto; padding-top:1.5rem; padding-bottom:2rem; }
.playon-diary-ui .playon-diary-heading { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.playon-diary-ui .playon-diary-heading > h2 { flex:0 0 auto; margin:0; }
.playon-diary-ui .playon-scope-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:1rem; flex:1 1 auto; min-width:0; }
.playon-diary-ui .playon-activity-banner { display:flex; flex:1 1 auto; align-items:center; gap:.75rem; min-width:0; max-width:760px; margin:0; padding:.65rem 1rem; border-left:4px solid var(--diary-blue); border-radius:0 10px 10px 0; background:#f1f7fc; }
.playon-diary-ui .playon-activity-banner[hidden], .playon-diary-ui .scope-reset[hidden], .playon-diary-ui .scope-search-error[hidden] { display:none !important; }
.playon-diary-ui .playon-activity-eyebrow { flex:0 0 auto; color:#52677a; font-size:.75rem; font-weight:700; letter-spacing:.04em; }
.playon-diary-ui .main-title .playon-activity-banner .playon-activity-eyebrow { display:inline; margin:0; color:#52677a; font-size:.75rem; font-weight:700; line-height:1.4; }
.playon-diary-ui .playon-activity-title { min-width:0; margin:0; color:#152e46; font-size:1rem; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.playon-diary-ui .playon-global-exit { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-height:44px; margin:0; padding:.55rem .9rem; border:1px solid #355a7a; border-radius:8px; color:#244763; font-weight:700; text-decoration:none; white-space:nowrap; }
.playon-diary-ui .playon-global-exit:hover { background:#eaf2f8; }
.playon-diary-ui .playon-global-exit:focus-visible, .playon-diary-ui .scope-reset:focus-visible, .playon-diary-ui .playon-card-link:focus-visible, .playon-diary-ui .pagination a:focus-visible { outline:3px solid #e19a27; outline-offset:3px; }
.playon-diary-ui .content-body.play { min-width:0; }
.playon-diary-ui .search-bar-area { box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; width:100%; height:auto; min-height:48px; padding:0 8px 0 0; }
.playon-diary-ui #inp-vol-keyword { box-sizing:border-box; flex:1 1 0; width:auto !important; min-width:0 !important; height:42px !important; min-height:42px; padding-right:.5rem; }
/* Keep the familiar small magnifier, but give its button a reliable touch target. */
.playon-diary-ui #btn-vol-search { position:static !important; top:auto; right:auto; transform:none; box-sizing:border-box; display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center; width:44px !important; min-width:44px; height:44px !important; min-height:44px; margin:0; padding:0; background-color:transparent; background-position:center; background-size:20px 20px; }
.playon-diary-ui .scope-reset { flex:0 0 auto; min-width:44px; min-height:44px; padding:0 .75rem; border:0; background:transparent; color:#244763; font-weight:700; cursor:pointer; }
.playon-diary-ui .scope-search-error { flex:1 1 100%; color:#9b3434; font-size:.875rem; }
.playon-diary-ui .search-bar-area > .scope-search-error { flex-basis:100%; }
.playon-diary-ui .status_menu a[aria-disabled="true"] { cursor:pointer; }
.playon-diary-ui .grid-item > a.playon-card-link { display:block; height:100%; color:inherit; text-decoration:none; }
.playon-diary-ui .grid-item > a.playon-card-link:hover { color:inherit; }
.playon-diary-ui .grid-item > a.playon-card-link:focus-visible { border-radius:8px; }
.playon-diary-ui .grid-item > a.playon-card-link > img.grid-img.review-grid-img { display:block; width:100%; object-fit:cover; }
.playon-diary-ui .grid-item > a.playon-card-link > img.grid-img.review-grid-img.is-fallback { object-fit:contain; }
#ly-diary-popup #diary-popup-meta[hidden] { display:none !important; }
.playon-diary-ui .pagination { display:flex; justify-content:center; align-items:center; gap:0; padding:0; }
.playon-diary-ui .pagination li { box-sizing:border-box; flex:0 0 36px; width:36px; min-width:0; margin-left:0; margin-right:0; padding:0; }
.playon-diary-ui .pagination li > a { display:flex; box-sizing:border-box; width:36px; min-width:36px; height:36px; min-height:36px; align-items:center; justify-content:center; margin:0; padding:0; color:var(--diary-ink); font-size:14px; line-height:1.2; text-indent:0; }
.playon-diary-ui .pagination li.active > a { border-radius:50%; background:var(--diary-blue); color:#fff; }
.playon-diary-ui .pagination li.disabled > a { color:#a3acb5; cursor:default; }
.playon-diary-ui .pagination[hidden] { display:none !important; }
.playon-diary-ui .scope-status { grid-column:1/-1; padding:2.5rem 1rem; color:#52677a; text-align:center; }
.playon-diary-ui .scope-status[hidden] { display:none !important; }

@media (max-width:780px) {
  .playon-diary-ui { padding:.5rem 0; }
  .playon-diary-ui > .content-wrap { padding:.5rem 1rem 1.5rem; }
  .playon-diary-ui .playon-diary-heading { align-items:stretch; flex-direction:column; gap:.75rem; margin-bottom:1.25rem !important; }
  .playon-diary-ui .playon-diary-heading > h2 { font-size:24px; }
  .playon-diary-ui .playon-scope-toolbar { align-items:stretch; flex-direction:column; gap:.625rem; }
  .playon-diary-ui .playon-activity-banner { width:100%; max-width:none; padding:.7rem .85rem; }
  .playon-diary-ui .playon-global-exit { width:100%; white-space:normal; }
  .playon-diary-ui .pagination { flex-wrap:nowrap; width:100%; max-width:100%; gap:0; }
  .playon-diary-ui .pagination > li { flex:0 0 30px; box-sizing:border-box; width:30px !important; min-width:0; height:30px; margin:0 !important; padding:0; }
  .playon-diary-ui .pagination > li.active { width:30px !important; height:30px !important; }
  .playon-diary-ui .pagination > li > a { display:flex; box-sizing:border-box; width:30px !important; min-width:30px; height:30px !important; min-height:30px; padding:0; line-height:30px !important; }
}

/* The legacy generic mobile grid forces every card list into two narrow
   columns. Diary entries need a full-width reading row on phone-sized screens. */
@media (max-width:600px) {
  .playon-diary-ui #ly-playon-list {
    box-sizing:border-box;
    width:100% !important;
    min-width:0;
    max-width:100%;
    margin-left:0 !important;
    margin-right:0 !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:16px !important;
    padding:0 !important;
  }
  .playon-diary-ui #ly-playon-list > .grid-item {
    box-sizing:border-box;
    width:100%;
    min-width:0;
  }
  .playon-diary-ui #ly-playon-list > .grid-item .grid-img {
    height:180px !important;
  }
}

/* Keep the shared diary dialog above the fixed site header on compact screens;
   a fixed, full-size close target remains reachable while long details scroll. */
@media (max-width:780px), (max-height:500px) {
  #ly-diary-popup { z-index:10010; }
  #ly-diary-popup .pop-close {
    position:fixed;
    top:max(16px, env(safe-area-inset-top, 0px));
    right:max(16px, env(safe-area-inset-right, 0px));
    width:44px;
    height:44px;
    background-size:23px 23px;
    z-index:10011;
  }
}
@media (min-width:781px) and (max-height:500px) {
  #ly-diary-popup .pop-close { top:calc(15vh + 16px); }
}