/* Photo leads; the reading decision unfolds below it while the CTA stays fixed. */
body:has(#article-preview[open]){overflow:hidden;}
#article-preview{position:fixed;inset:0;box-sizing:border-box;width:min(620px,calc(100vw - 32px));
  height:min(720px,calc(100dvh - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;
  border:1px solid var(--sentence-glass-line);border-radius:22px;overflow:hidden;
  background:var(--sentence-glass-solid);color:var(--sentence-glass-ink);box-shadow:var(--sentence-glass-shadow);}
#article-preview::backdrop{background:var(--sentence-glass-scrim);}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #article-preview{background:var(--sentence-glass-surface);backdrop-filter:blur(18px) saturate(112%);
    -webkit-backdrop-filter:blur(18px) saturate(112%);}
}
.ap-sheet{display:flex;flex-direction:column;height:100%;min-height:0;}
/* Content scrolls from the photo into the summary; hide only scrollbar chrome. */
.ap-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;}
.ap-scroll::-webkit-scrollbar{display:none;}
.ap-hero{height:min(44dvh,360px);min-height:190px;background:var(--sentence-glass-action);position:relative;overflow:hidden;}
.ap-hero img{display:block;width:100%;height:100%;object-fit:cover;}
.ap-hero img[hidden]{display:none;}
.ap-art{position:absolute;inset:0;display:grid;place-items:center;color:var(--sentence-glass-muted);}
.ap-art svg{width:min(46%,190px);height:min(70%,190px);}
.ap-hero:has(img:not([hidden])) .ap-art{display:none;}
.ap-content{padding:20px 24px 24px;overflow-wrap:anywhere;}
.ap-source{margin:0 0 14px;color:var(--sentence-glass-muted);font:600 12px/1.4 var(--ui);
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.ap-title{font:600 clamp(22px,3.8vw,29px)/1.3 var(--display);color:var(--sentence-glass-ink);margin:0 0 18px;}
.ap-summary{font:400 15px/1.75 var(--ui);color:var(--sentence-glass-ink);margin:0;}
.ap-summary[hidden]{visibility:hidden;min-height:5em;}
.ap-close{position:absolute;z-index:1;top:10px;right:10px;width:44px;height:44px;
  border:1px solid var(--sentence-glass-line);border-radius:50%;background:var(--sentence-glass-solid);
  color:var(--sentence-glass-ink);font:16px var(--ui);cursor:pointer;}
.ap-actions{flex:none;padding:8px 22px max(16px,env(safe-area-inset-bottom));}
.ap-status{margin:0 0 8px;min-height:1.4em;color:var(--sentence-glass-muted);font:400 12px/1.4 var(--ui);}
.ap-start{width:100%;min-height:48px;border:1px solid var(--sentence-glass-line);border-radius:16px;
  background:var(--sentence-glass-action);
  color:var(--sentence-glass-ink);font:600 15px var(--ui);cursor:pointer;}
.ap-start:hover{background:var(--sentence-glass-action-hover);}
.ap-start:disabled{cursor:progress;opacity:.65;}
#article-preview:focus{outline:none;}
#article-preview button:focus-visible{outline:2px solid var(--sentence-glass-muted);outline-offset:3px;}
@media(max-height:480px){
  .ap-hero{min-height:120px;height:42dvh;}
  .ap-content{padding:16px 22px 0;}
  .ap-source{padding-right:42px;}
}
@media(prefers-reduced-motion:no-preference){
  #article-preview[open]{animation:ap-enter 140ms ease-out;}
  @keyframes ap-enter{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
}

/* Loading occupies deliberate placeholders; final failure promotes source text.
   Outer dialog/CTA stay fixed across all three states. */
#article-preview[data-metadata="loading"] .ap-summary[hidden]{visibility:visible;color:transparent;border-radius:7px;
  background:linear-gradient(100deg,transparent 20%,var(--sentence-glass-line-soft) 48%,transparent 76%),var(--sentence-glass-action);background-size:220% 100%;}
#article-preview[data-metadata="fallback"] .ap-summary[hidden]{display:none;}

/* Explicit optional-AI state; the original excerpt and Read button stay usable. */
.ap-metadata-status{display:flex;align-items:center;gap:7px;min-height:20px;margin:0 0 8px;
  color:var(--sentence-glass-muted);font:500 12px/1.4 var(--ui);}
.ap-metadata-status[hidden]{display:none;}
.ap-metadata-label{flex:1;}
.ap-metadata-spinner{display:none;width:12px;height:12px;flex:none;border:2px solid var(--sentence-glass-line);
  border-top-color:currentColor;border-radius:50%;}
#article-preview[data-metadata="loading"] .ap-metadata-spinner{display:block;}
.ap-retry{flex:none;position:relative;padding:3px 0;border:0;background:none;color:var(--sentence-glass-ink);
  font:600 12px/1.4 var(--ui);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.ap-retry::before{content:'';position:absolute;inset:-12px -4px;}
.ap-retry[hidden]{display:none;}
@media(prefers-reduced-motion:no-preference){
  #article-preview[data-metadata="loading"] .ap-metadata-spinner{animation:ap-spin .85s linear infinite;}
  #article-preview[data-metadata="ready"] .ap-summary{animation:ap-reveal 300ms ease-out;}
  @keyframes ap-spin{to{transform:rotate(360deg);}}
  @keyframes ap-reveal{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
}

.ap-summary-card{position:relative;overflow:hidden;padding:16px 17px 18px;border:1px solid var(--sentence-glass-line-soft);border-radius:16px;background:var(--sentence-glass-action);}
.ap-summary-heading{margin:0 0 11px;color:var(--sentence-glass-muted);font:600 12px/1.4 var(--ui);}
.ap-summary-card .ap-summary[hidden]{display:block;}
#article-preview[data-metadata="fallback"] .ap-summary[hidden]{display:none;}
.ap-summary-card .ap-metadata-status{margin-bottom:10px;}
#article-preview[data-metadata="fallback"] .ap-metadata-status{margin-bottom:0;}
.ap-summary-card .ap-retry{font-weight:500;}
.ap-status:empty{display:none;}
@media(prefers-reduced-motion:no-preference){
  #article-preview[data-metadata="loading"] .ap-summary[hidden]{animation:ap-shimmer 1.8s ease-in-out infinite;}
  @keyframes ap-shimmer{from{background-position:120% 0;}to{background-position:-120% 0;}}
}