/* Floating curation progress pill. Domain colours come from app.css. */
.pp { position: fixed; right: 16px; bottom: var(--pp-bottom, 96px); z-index: 900; font-size: .85rem; color: #fff; user-select: none; }
.pp.dragging { cursor: grabbing; }
.pp.dragging .pp-pill { box-shadow: 0 14px 34px rgba(0,0,0,.65); }

.pp-pill { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 13px 0 6px; border-radius: 19px; border: 1px solid #3a3a3a; background: #232323; color: #fff; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.45); cursor: grab; touch-action: none; white-space: nowrap; }
.pp-pill:focus-visible, .pp-btn:focus-visible, .pp-link:focus-visible, .pp-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp-level { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: 13px; background: var(--color-energy); color: #161616; font-weight: 800; font-size: .78rem; }
.pp-level-big { min-width: 38px; height: 38px; border-radius: 19px; font-size: 1rem; flex: none; }
.pp-dots { display: inline-flex; align-items: flex-end; gap: 4px; height: 18px; }
.pp-dots i { display: block; width: 6px; border-radius: 2px; }

.pp-toast { position: absolute; right: 0; bottom: calc(100% + 8px); background: #232323; border: 1px solid var(--color-energy); border-radius: 10px; padding: 8px 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.pp[data-ay="t"] .pp-toast { bottom: auto; top: calc(100% + 8px); }
.pp[data-ax="l"] .pp-toast { right: auto; left: 0; }

.pp-panel { position: absolute; width: 340px; max-height: min(80vh, 640px); overflow-y: auto; box-sizing: border-box; padding: 14px; border-radius: 16px; background: #232323; border: 1px solid #4a4a4a; box-shadow: 0 14px 36px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 12px; }
.pp[data-ay="b"] .pp-panel, .pp:not([data-ay]) .pp-panel { bottom: calc(100% + 8px); }
.pp[data-ay="t"] .pp-panel { top: calc(100% + 8px); }
.pp[data-ax="r"] .pp-panel, .pp:not([data-ax]) .pp-panel { right: 0; }
.pp[data-ax="l"] .pp-panel { left: 0; }

.pp-head { display: flex; align-items: center; gap: 12px; cursor: grab; touch-action: none; }
.pp-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-head-text small, .pp-sub, .pp-muted, .pp-step small, .pp-lvl small, .pp-need small { color: #b0b0b0; font-size: .74rem; }
.pp-close { border: 0; background: transparent; color: #b0b0b0; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 6px; }

.pp-meter { display: block; height: 6px; border-radius: 3px; background: #3a3a3a; overflow: hidden; }
.pp-meter > b { display: block; height: 100%; border-radius: 3px; }
.pp-meter-big { height: 8px; }

.pp-domains { display: flex; flex-direction: column; gap: 8px; }
.pp-domain { display: grid; grid-template-columns: 56px 1fr 40px; gap: 10px; align-items: center; font-size: .78rem; }
.pp-domain > span:first-child { font-weight: 600; }
.pp-domain > span:last-child { text-align: right; }

.pp-tiles { display: flex; gap: 8px; }
.pp-tiles > div { flex: 1; background: #1c1c1c; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.pp-tiles b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.pp-tiles span { color: #b0b0b0; font-size: .72rem; }

.pp-block { border-top: 1px solid #3a3a3a; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pp-cap { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #a8a8a8; font-weight: 600; }
.pp-cap-row { display: flex; justify-content: space-between; align-items: center; }
.pp-need { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.pp-need.met { color: #92d050; }

.pp-notice { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 10px; background: #1c2630; border: 1px solid #2f4a63; font-size: .8rem; }
.pp-mission-title { font-weight: 600; }
.pp-mission-bar { display: flex; align-items: center; gap: 10px; }
.pp-mission-bar .pp-meter { flex: 1; }
.pp-mission-bar small { color: #b0b0b0; font-variant-numeric: tabular-nums; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.pp-btn { border: 0; border-radius: 8px; height: 30px; padding: 0 12px; font-weight: 700; font-size: .78rem; background: #2c2c2c; color: #e6e6e6; cursor: pointer; }
.pp-btn.pp-primary { background: var(--color-energy); color: #161616; }
.pp-link { border: 0; background: transparent; color: #b0b0b0; font-size: .78rem; text-decoration: underline; cursor: pointer; padding: 2px 4px; }

.pp-step { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.pp-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-step-text b { font-weight: 600; font-size: .82rem; }
.pp-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #5a5a5a; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; flex: none; color: #161616; }
.pp-step.done .pp-check { background: #92d050; border-color: #92d050; }
.pp-step.done .pp-step-text b { color: #b0b0b0; text-decoration: line-through; }

.pp-foot { display: flex; justify-content: space-between; border-top: 1px solid #3a3a3a; padding-top: 8px; }
.pp-levels { display: flex; flex-direction: column; gap: 4px; }
.pp-lvl { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; opacity: .7; }
.pp-lvl > div { display: flex; flex-direction: column; font-size: .8rem; }
.pp-lvl .pp-level { background: #3a3a3a; color: #ddd; }
.pp-lvl.done .pp-level { background: #92d050; color: #14210a; }
.pp-lvl.now { opacity: 1; background: #2a2406; }
.pp-lvl.now .pp-level { background: var(--color-energy); color: #161616; }

@media (max-width: 720px) {
    /* phones: bottom centre, no dragging */
    .pp { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--pp-bottom, 96px); }
    .pp-panel { width: min(340px, calc(100vw - 24px)); left: 50%; right: auto !important; transform: translateX(-50%); }
    .pp-pill, .pp-head { cursor: pointer; }
}
@media (prefers-reduced-motion: no-preference) {
    .pp-meter > b { transition: width .25s ease; }
}

/* first steps: the next one stands out, the closed pill pulses until the panel was opened once */
.pp-step.next { background: rgba(255,255,255,.06); border-radius: 8px; padding: 6px 8px; outline: 1px solid var(--color-energy); }
.pp-welcome { margin: 0 0 8px; font-size: .8rem; color: #d8d8d8; }
.pp-pill.pp-pulse { animation: pp-pulse 2.2s ease-in-out infinite; }
@keyframes pp-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { .pp-pill.pp-pulse { animation: none; } }