/* The Weekly AI Debrief (debrief.js): a small news card, fixed at the top
   right, below the nav. --debrief-top clears the nav.

   Two grounds, set on the <aside> as data-ground (debrief.js fills it in
   when the page does not):
     dark   a navy card, for dark pages
     light  a white card with a navy border, for light pages
   Every text color meets WCAG AA on its card. The card is opaque, so it
   reads the same over any section. Emerald is used as text only on navy. */

.dbf{
  --debrief-top:calc(var(--nav-h,72px) + 12px);
  --dbf-bg:var(--card-navy); --dbf-ink:var(--on-navy); --dbf-muted:var(--muted-navy);
  --dbf-line:var(--line-navy); --dbf-accent:var(--emerald); --dbf-dot:var(--red-on-navy);
  --dbf-fill:rgba(255,255,255,.08);
  position:fixed;z-index:150;
  top:calc(env(safe-area-inset-top,0px) + var(--debrief-top));
  right:max(12px,env(safe-area-inset-right,0px));
  font-family:"Public Sans",system-ui,sans-serif;color:var(--dbf-ink);
}
.dbf[hidden]{display:none}
.dbf[data-ground="light"]{
  --dbf-bg:#fff; --dbf-ink:var(--on-cream); --dbf-muted:var(--muted-cream);
  --dbf-line:var(--navy); --dbf-accent:var(--navy); --dbf-dot:var(--amber-on-cream);
  --dbf-fill:rgba(14,31,59,.06);
}
.dbf p{margin:0}
.dbf button{font:inherit;color:inherit;cursor:pointer}
.dbf :focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.dbf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- the card */

.dbf-card{
  width:320px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:6px;
  padding:10px 14px 8px;
  background:var(--dbf-bg);border:1px solid var(--dbf-line);border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
}
.dbf[data-ground="dark"] .dbf-card{border-color:rgba(255,255,255,.16)}
.dbf-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dbf-name{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:13px;line-height:1.2}
.dbf-week{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;line-height:1.4;color:var(--dbf-muted)}
.dbf-ic{
  flex:none;display:inline-grid;place-items:center;width:24px;height:24px;padding:0;
  border:1px solid var(--dbf-line);border-radius:50%;background:none;
}
.dbf[data-ground="dark"] .dbf-ic{border-color:rgba(255,255,255,.2)}
.dbf-ic:hover{background:var(--dbf-fill)}
.dbf-ic svg{width:13px;height:13px}

/* one item: headline (two lines), publication and date, the quote (two
   lines), the link */
.dbf-stage{min-height:0;overflow:hidden}
.dbf-item{display:grid;gap:3px}
.dbf-h{
  font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:14px;line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.dbf-meta{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;line-height:1.4;color:var(--dbf-muted)}
.dbf-q{
  font-size:12.5px;line-height:1.4;color:var(--dbf-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.dbf-who{font-weight:600}
.dbf-read{
  font-size:12px;font-weight:600;line-height:1.4;color:var(--dbf-accent);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  justify-self:start;
}
.dbf[data-ground="light"] .dbf-read{text-decoration-color:var(--emerald);text-decoration-thickness:2px}

@media (prefers-reduced-motion:no-preference){
  .dbf-slide.in-right{animation:dbf-in-r .35s ease-out}
  .dbf-slide.in-left{animation:dbf-in-l .35s ease-out}
}
@keyframes dbf-in-r{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes dbf-in-l{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

/* the controls: dots, previous, pause/play, next, All this week */
.dbf-ctl{display:flex;align-items:center;gap:6px;padding-top:4px;border-top:1px solid var(--dbf-fill)}
.dbf-dots{display:flex;align-items:center;gap:2px;margin-right:auto;flex-wrap:wrap;min-width:0}
.dbf-pip{width:14px;height:20px;padding:0;border:0;background:none;display:grid;place-items:center}
.dbf-pip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dbf-muted);opacity:.55}
.dbf-pip[aria-current="true"]::before{background:var(--dbf-accent);opacity:1;width:8px;height:8px}
.dbf .dbf-all{
  border:0;background:none;padding:4px 2px;margin-left:2px;
  font-size:12px;font-weight:600;color:var(--dbf-accent);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}

/* ------------------------------------------------- all items this week */

.dbf-card--list{max-height:min(70vh,460px)}
.dbf-listbar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;color:var(--dbf-muted)}
.dbf .dbf-back{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:4px 2px;font-family:"Public Sans",system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--dbf-accent)}
.dbf-back svg{width:12px;height:12px}
.dbf-list{list-style:none;margin:0;padding:0 4px 0 0;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:0;min-height:0}
.dbf-list .dbf-item{padding:10px 0;border-top:1px solid var(--dbf-fill)}
.dbf-list .dbf-h,.dbf-list .dbf-q{-webkit-line-clamp:unset;display:block}

/* ------------------------------------------------------ minimized */

.dbf-fab{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;height:44px;padding:0 12px;box-sizing:border-box;
  border:1px solid var(--dbf-line);border-radius:999px;background:var(--dbf-bg);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.dbf[data-ground="dark"] .dbf-fab{border-color:rgba(255,255,255,.2)}
.dbf-dot{width:8px;height:8px;border-radius:50%;background:var(--dbf-dot)}
.dbf-n{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12px;line-height:1}

/* phones: it starts as the round button, and opens nearly full width */
@media (max-width:767px){
  .dbf{--debrief-top:calc(var(--nav-h,72px) + 10px)}
  .dbf-card{width:calc(100vw - 24px)}
  .dbf-card--list{max-height:calc(100dvh - var(--debrief-top) - 24px)}
}