/* ================================================================
   showcase-poc.css  (delivery 3.3.29)
   ================================================================
   Marketing site showcase: five scripted replays the visitor picks
   between with a tab row; only the selected one plays.
     "create": Generate from Quick Actions (Generating Content overlay,
       draft preview with Sources Referenced and Quality Assessment,
       Queue for Approval), editing the queued post (Edit Post modal),
       publishing from the post detail modal.
     "topics": the Topics page (add a topic, Generate Suggestions, Save
       Topic, Discover Feeds modal, Add Selected Feeds), then the
       dashboard (pick topic and angle, Generate, the
       Generating Content overlay, the Research Monitor narrowing to the
       topic, the draft modal with Sources Referenced and Quality
       Assessment).
     "analytics": the Analytics page (program intelligence, amplification,
       posts table, performance by topic, posting time heatmap, follower
       demographics, narrative summary), then the Advocacy page (members,
       generate variants, a member approves a personalized variant).
     "linkedin": the LinkedIn Connection page (status, the OAuth grant,
       Publish as, Organization Page discovery) with an illustrative
       authorization step between.
     "imagestudio": Edit Post with the in-post Image Studio panel
       (Story Lens, prompt, Generate, preview, Attach to Post), Save,
       publish from the post detail modal, then the post in the feed.
   Rendered at the top of site_templates/alpha-index.html.

   Layout (3.3.7)
     - One recording, centered, 871px wide (3.3.9: 20 percent over the
       726px of 3.3.7), wrapped in the site's .shot-window frame with
       .shot-window-bar. The event caption lives in the window bar,
       centered over the recording, clear of the three dots on the left.
     - The headline and the recording share one left edge through the
       .spos-inner column. There is no footnote under the recording, by
       decision (3.3.24); do not add one.
     - Headline treatment: three lines in a stepped cadence; the phrase
       "Source-Backed" carries an underline that draws itself once on
       load, and the closing line is set in the cyan to green gradient
       the dashboard title uses, so the eye lands on "Confidence".
       Reduced motion viewers get the finished state with no drawing.
     - The recording's browser window is 1000 CSS px wide, which is
       under the dashboard's 1100px breakpoint: the main grid drops to
       two columns (minmax(0,1fr) 260px, as in app.css) and the
       Activity Log column wraps below the fold, where the fixed stage
       height clips it. The window shows only Queue and Quick Actions.

   Design notes
     - Every selector is prefixed spos- and scoped under #showcase-pos.
       The marketing page already loads /app/styles/app.css, whose
       .header, .btn, .stat-card and .composer-* rules would otherwise
       restyle this reproduction; the prefix keeps the two apart.
     - Color, radius and font tokens come from app.css :root so the
       replay tracks the product theme without duplicating values.
     - No inline style attributes anywhere in the markup: the page CSP
       is style-src 'self'. Geometry the script computes at run time is
       written through the CSSOM (element.style.left, custom
       properties), which the CSP permits.
     - Motion timing is expressed relative to --spos-rate. The script
       sets it to the playback speed so cursor travel, ripples and the
       modal fade all slow down together with the timeline.
   ================================================================ */

#showcase-pos {
  --spos-rate: 1; /* set by showcase-poc.js to the playback rate */
  --spos-cursor-ms: 0.9s;
  --spos-fade-ms: 0.22s;
  --spos-ripple-ms: 0.55s;
  padding: 2.5rem 0 1.5rem;
  position: relative;
  z-index: 1;
}

#showcase-pos .spos-inner { max-width: 871px; margin: 0 auto; }
/* alpha.css caps every .shot-window at 560px and centers it with
   margin auto. The recording must fill the .spos-inner column instead,
   so the cap is lifted here; without this line the column width above
   has no effect and the 560px window sits at the column's left edge. */
#showcase-pos .spos-display { max-width: none; width: 100%; margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ---------- Headline ---------- */
#showcase-pos .spos-headline {
  display: flex; flex-direction: column; gap: 0.15em;
  margin: 0 0 1.5rem; padding: 0;
  font-family: var(--font-body); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  color: var(--text-primary);
}
#showcase-pos .spos-headline-line { display: block; }
#showcase-pos .spos-headline-line:nth-child(1) { color: var(--text-secondary); font-weight: 500; }
#showcase-pos .spos-headline-line:nth-child(2) { padding-left: 0.6em; }
#showcase-pos .spos-headline-line:nth-child(3) { padding-left: 1.2em; }
#showcase-pos .spos-headline-mark {
  position: relative; white-space: nowrap;
  background-image: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 3px;
  animation: spos-underline 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}
@keyframes spos-underline { to { background-size: 100% 3px; } }
#showcase-pos .spos-headline-close {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-green) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 600px) {
  #showcase-pos .spos-headline-line:nth-child(2), #showcase-pos .spos-headline-line:nth-child(3) { padding-left: 0; }
}

/* ---------- Player bar (below the window; media player conventions) ---------- */
#showcase-pos .spos-player {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0; padding: 0.45rem 0.6rem;
  background: var(--bg-secondary); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px;
}
#showcase-pos .spos-pbtn {
  appearance: none; border: 0; background: transparent; color: var(--text-primary); width: 34px; height: 34px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s;
}
#showcase-pos .spos-pbtn svg { width: 20px; height: 20px; fill: currentColor; }
#showcase-pos .spos-pbtn:hover { background: var(--bg-card-hover); color: var(--accent-cyan); }
#showcase-pos .spos-pbtn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
#showcase-pos .spos-pbtn[disabled] { opacity: 0.4; cursor: default; }
#showcase-pos .spos-ctl-play .spos-ico-pause { display: none; }
#showcase-pos .spos-ctl-play.spos-playing .spos-ico-play { display: none; }
#showcase-pos .spos-ctl-play.spos-playing .spos-ico-pause { display: block; }
#showcase-pos .spos-seek { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; cursor: pointer; }
#showcase-pos .spos-seek:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 4px; }
#showcase-pos .spos-seek-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--border); }
#showcase-pos .spos-seek:hover .spos-seek-track { height: 6px; }
#showcase-pos .spos-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--accent-cyan); }
#showcase-pos .spos-seek-knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2); opacity: 0; transition: opacity 0.15s; }
#showcase-pos .spos-seek:hover .spos-seek-knob, #showcase-pos .spos-seek:focus-visible .spos-seek-knob { opacity: 1; }
#showcase-pos .spos-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; min-width: 6.5rem; text-align: right; }
#showcase-pos .spos-seeking, #showcase-pos .spos-seeking * { transition: none !important; animation-duration: 0s !important; }

/* The caption is centered over the recording, not left aligned after the
   dots: it is taken out of the bar's flex flow and spans the full bar
   width, with side padding that keeps it clear of the three dots.
   alpha.css styles every span in the bar as a 10px dot; that is undone
   here. The bar becomes the positioning context. */
#showcase-pos .shot-window-bar { position: relative; min-width: 0; padding: 0 10px;}
#showcase-pos .shot-window-bar .spos-callout {
  position: absolute; left: 0; right: 0; top: 0; height: 34px; line-height: 34px;
  padding: 0 64px; text-align: center; pointer-events: none;
  width: auto; border-radius: 0; background: none; margin: 0;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity calc(0.25s / var(--spos-rate));
}
#showcase-pos .shot-window-bar .spos-callout.spos-on { opacity: 1; }
#showcase-pos .shot-window-bar .spos-callout b { color: var(--accent-cyan); font-weight: 600; }

#showcase-pos .shot-window-bar span {
  width: 5px;
  height: 5px;
}

/* ---------- Picker and recording visibility ---------- */
#showcase-pos .spos-tabs { display: flex; gap: 0.5rem; margin: 0 0 0.9rem; flex-wrap: wrap; }
#showcase-pos .spos-tab {
  appearance: none; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#showcase-pos .spos-tab:hover { border-color: var(--border-active); color: var(--text-primary); }
#showcase-pos .spos-tab.spos-active { border-color: var(--accent-cyan); color: var(--text-primary); background: rgba(6, 182, 212, 0.12); }
#showcase-pos .spos-tab:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
#showcase-pos .spos-recording { display: none; }
#showcase-pos .spos-recording.spos-active { display: block; }

/* ---------- Frame ---------- */
#showcase-pos .spos-frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
}
#showcase-pos .spos-scaler { width: 100%; }
#showcase-pos .spos-stage {
  position: relative;
  width: 1000px;
  height: 620px;
  transform-origin: top left;
  color: var(--text-primary);
  font-family: var(--font-body);
}
#showcase-pos .spos-screen { position: absolute; inset: 0; overflow: hidden; }
#showcase-pos .spos-screen::before {
  content: ''; position: absolute; top: -20%; left: -10%; width: 60%; height: 60%;
  background: radial-gradient(ellipse, rgba(59, 130, 246, 0.06) 0%, transparent 70%); pointer-events: none;
}
#showcase-pos .spos-screen::after {
  content: ''; position: absolute; bottom: -20%; right: -10%; width: 50%; height: 50%;
  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.04) 0%, transparent 70%); pointer-events: none;
}

/* ---------- Dashboard reproduction ---------- */
#showcase-pos .spos-app { max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem; position: relative; z-index: 1; }
#showcase-pos .spos-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
#showcase-pos .spos-header-title {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-cyan) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#showcase-pos .spos-header-subtitle { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; font-family: var(--font-mono); }
#showcase-pos .spos-header-controls { display: flex; align-items: center; gap: 0.75rem; }
#showcase-pos .spos-mode { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-secondary); }
#showcase-pos .spos-track { width: 34px; height: 18px; border-radius: 9px; background: var(--border); position: relative; }
#showcase-pos .spos-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-secondary); }
#showcase-pos .spos-mode-value { font-family: var(--font-mono); font-weight: 600; color: var(--accent-amber); }
#showcase-pos .spos-logout { font-size: 0.75rem; color: var(--text-secondary); border: 1px solid var(--border); padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); }

#showcase-pos .spos-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
#showcase-pos .spos-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem; position: relative; overflow: hidden; }
#showcase-pos .spos-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
#showcase-pos .spos-stat:nth-child(1)::before { background: var(--accent-blue); }
#showcase-pos .spos-stat:nth-child(2)::before { background: var(--accent-green); }
#showcase-pos .spos-stat:nth-child(3)::before { background: var(--accent-amber); }
#showcase-pos .spos-stat:nth-child(4)::before { background: var(--accent-cyan); }
#showcase-pos .spos-stat-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
#showcase-pos .spos-stat-value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-mono); margin-top: 0.25rem; }
#showcase-pos .spos-stat-value-sm { font-size: 1rem; margin-top: 0.6rem; color: var(--accent-green); }
#showcase-pos .spos-stat-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.25rem; font-family: var(--font-mono); }

/* Two columns, mirroring app.css at max-width 1100px. The third child
   (Activity Log) auto-flows to a second row below the visible height. */
#showcase-pos .spos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; }
#showcase-pos .spos-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
#showcase-pos .spos-title-gap { margin-top: 1.1rem; }
#showcase-pos .spos-badge { background: var(--accent-blue); color: #fff; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 10px; font-family: var(--font-mono); }
#showcase-pos .spos-posts { display: flex; flex-direction: column; gap: 0.75rem; }
#showcase-pos .spos-post { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem; transition: border-color 0.2s, background 0.2s, opacity calc(0.4s / var(--spos-rate)), transform calc(0.4s / var(--spos-rate)); }
#showcase-pos .spos-badges { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; }
#showcase-pos .spos-topic { font-size: 0.68rem; font-family: var(--font-mono); padding: 0.1rem 0.45rem; border-radius: 6px; background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
#showcase-pos .spos-status { font-size: 0.68rem; font-family: var(--font-mono); padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--glow-amber); color: var(--accent-amber); }
#showcase-pos .spos-status-draft { background: rgba(136, 153, 176, 0.15); color: var(--text-secondary); }
#showcase-pos .spos-status-posted { background: var(--glow-green); color: var(--accent-green); }
#showcase-pos .spos-preview { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#showcase-pos .spos-actions { display: flex; gap: 0.4rem; margin-top: 0.55rem; }

#showcase-pos .spos-btn { padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; border: none; cursor: default; font-family: var(--font-body); transition: background 0.2s, transform 0.1s, filter 0.1s; }
#showcase-pos .spos-btn-tight { padding: 0.125rem 0.25rem; }
#showcase-pos .spos-btn-sm { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
#showcase-pos .spos-btn-full { width: 100%; }
#showcase-pos .spos-btn-grow { flex: 1; }
#showcase-pos .spos-btn-xs { font-size: 0.75rem; }
#showcase-pos .spos-btn-primary { background: var(--accent-blue); color: #fff; }
#showcase-pos .spos-btn-primary.spos-hover { background: #2563eb; }
#showcase-pos .spos-btn-primary.spos-pressed { transform: scale(0.97); filter: brightness(0.92); }
#showcase-pos .spos-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
#showcase-pos .spos-btn-approve { background: var(--accent-green); color: #fff; }
#showcase-pos .spos-btn-reject { background: transparent; border: 1px solid var(--accent-red); color: var(--accent-red); }
#showcase-pos .spos-btn-edit { background: transparent; border: 1px solid var(--accent-amber); color: var(--accent-amber); }
#showcase-pos .spos-hstack { display: flex; gap: 0.5rem; }
#showcase-pos .spos-vstack { display: flex; flex-direction: column; gap: 0.5rem; }

#showcase-pos .spos-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 1rem; }
#showcase-pos .spos-model-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; }
#showcase-pos .spos-model-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
#showcase-pos .spos-model-value { font-family: var(--font-mono); color: var(--accent-cyan); }
#showcase-pos .spos-select {
  width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-body); font-size: 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238899b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
}
#showcase-pos .spos-toggle-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; }
#showcase-pos .spos-toggle-on { color: var(--accent-green); }
#showcase-pos .spos-switch { width: 34px; height: 18px; border-radius: 9px; background: var(--accent-green); position: relative; }
#showcase-pos .spos-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
#showcase-pos .spos-cov-row { display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 0.45rem; }
#showcase-pos .spos-cov-count { font-family: var(--font-mono); color: var(--text-secondary); }
#showcase-pos .spos-cov-bar { height: 4px; border-radius: 2px; background: var(--border); margin-bottom: 0.7rem; overflow: hidden; }
#showcase-pos .spos-cov-bar i { display: block; height: 100%; background: var(--accent-cyan); }
#showcase-pos .spos-cov-78 i { width: 78%; }
#showcase-pos .spos-cov-52 i { width: 52%; }
#showcase-pos .spos-cov-24 i { width: 24%; }
#showcase-pos .spos-log { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); padding: 0.25rem 0; border-bottom: 1px solid rgba(42, 53, 72, 0.6); display: flex; gap: 0.5rem; }
#showcase-pos .spos-log time { color: var(--text-muted); flex: none; }
#showcase-pos .spos-log .spos-lvl { color: var(--accent-green); flex: none; }

/* ---------- Research Monitor card (mirrors the real middle column card) ---------- */
#showcase-pos .spos-title-flush { margin-bottom: 0; display: flex; align-items: baseline; gap: 0.35rem; }
#showcase-pos .spos-title-meta { font-size: 0.75rem; font-weight: 400; color: var(--text-secondary); }
#showcase-pos .spos-cyan { color: var(--accent-cyan); }
#showcase-pos .spos-research-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); margin: 0.25rem 0 0.5rem; }
#showcase-pos .spos-feed-list { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; }
#showcase-pos .spos-feed-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--text-secondary); transition: opacity calc(0.4s / var(--spos-rate)); }
#showcase-pos .spos-feed-row.spos-dim { opacity: 0.3; }
#showcase-pos .spos-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#showcase-pos .spos-feed-meta { display: flex; align-items: center; gap: 0.35rem; flex: none; }
#showcase-pos .spos-feed-tier { font-family: var(--font-mono); font-size: 0.55rem; padding: 0.05rem 0.3rem; border-radius: 4px; background: rgba(6, 182, 212, 0.12); color: var(--accent-cyan); }
#showcase-pos .spos-feed-count { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.6rem; }

/* ---------- Topics page (light theme, mirrors public/topics/index.html) ---------- */
#showcase-pos .spos-tp-screen { background: #f5f5f5; color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#showcase-pos .spos-tp-screen::before, #showcase-pos .spos-tp-screen::after { display: none; }
#showcase-pos .spos-tp-container { max-width: 900px; margin: 0 auto; padding: 0.9rem 2rem; }
#showcase-pos .spos-tp-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0.6rem; background: #fff; border-radius: 6px; padding: 0.3rem 0.4rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
#showcase-pos .spos-tp-nav-link { font-size: 0.8rem; color: #0073b1; padding: 0.3rem 0.6rem; border-radius: 4px; }
#showcase-pos .spos-tp-nav-link.spos-hover { background: rgba(0, 115, 177, 0.08); }
#showcase-pos .spos-tp-nav-active { color: #333; font-weight: 600; }
#showcase-pos .spos-tp-h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.5rem; color: #333; }
#showcase-pos .spos-tp-h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.75rem; color: #333; }
#showcase-pos .spos-tp-msg { display: none; padding: 0.55rem 0.75rem; border-radius: 4px; margin-bottom: 0.75rem; font-size: 0.85rem; background: #e8f5e9; color: #2e7d32; }
#showcase-pos .spos-tp-msg.spos-on { display: block; }
#showcase-pos .spos-tp-section { background: #fff; border-radius: 8px; padding: 0.75rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
#showcase-pos .spos-tp-section-head { display: flex; justify-content: space-between; align-items: center; }
#showcase-pos .spos-tp-section-head .spos-tp-h2 { margin: 0; }
#showcase-pos .spos-tp-btn { display: inline-block; padding: 0.4rem 0.85rem; border-radius: 4px; font-size: 0.85rem; line-height: 1.2; transition: background 0.15s, transform 0.1s, filter 0.1s; }
#showcase-pos .spos-tp-btn-primary { background: #0073b1; color: #fff; }
#showcase-pos .spos-tp-btn-primary.spos-hover { background: #005a8d; }
#showcase-pos .spos-tp-btn-secondary { background: #e0e0e0; color: #333; }
#showcase-pos .spos-tp-btn-secondary.spos-hover { background: #ccc; }
#showcase-pos .spos-tp-btn.spos-pressed { transform: scale(0.97); filter: brightness(0.92); }
#showcase-pos .spos-tp-btn.spos-busy { opacity: 0.5; }
#showcase-pos .spos-tp-form { display: none; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #eee; }
#showcase-pos .spos-tp-form.spos-open { display: block; }
#showcase-pos .spos-tp-row { margin-bottom: 0.45rem; }
#showcase-pos .spos-tp-label { display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.8rem; color: #555; }
#showcase-pos .spos-tp-input { padding: 0.35rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; background: #fff; color: #333; min-height: 1.9rem; white-space: nowrap; overflow: hidden; }
#showcase-pos .spos-tp-input.spos-focus { border-color: #0073b1; box-shadow: 0 0 0 2px rgba(0, 115, 177, 0.15); }
#showcase-pos .spos-tp-input-sm { width: 80px; }
#showcase-pos .spos-tp-ph { color: #999; }
#showcase-pos .spos-tp-input.spos-focus .spos-tp-ph, #showcase-pos .spos-tp-input.spos-typed-on .spos-tp-ph { display: none; }
#showcase-pos .spos-tp-input .spos-caret { display: none; width: 1px; height: 1em; background: #333; vertical-align: text-bottom; margin-left: 1px; animation: spos-caret 1s steps(2) infinite; }
#showcase-pos .spos-tp-input.spos-focus .spos-caret { display: inline-block; }
#showcase-pos .spos-tp-textarea { padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.82rem; line-height: 1.45; background: #fff; color: #333; white-space: pre-wrap; }
#showcase-pos .spos-tp-result { display: none; margin-top: 0.5rem; }
#showcase-pos .spos-tp-result.spos-open { display: block; }
#showcase-pos .spos-tp-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
#showcase-pos .spos-tp-card { border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.6rem; background: #fff; transition: opacity calc(0.35s / var(--spos-rate)), transform calc(0.35s / var(--spos-rate)); }
#showcase-pos .spos-tp-card.spos-enter { opacity: 0; transform: translateY(-6px); }
#showcase-pos .spos-t-new-card { display: none; }
#showcase-pos .spos-t-new-card.spos-shown { display: block; }
#showcase-pos .spos-tp-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
#showcase-pos .spos-tp-topic-name { font-weight: 600; font-size: 0.95rem; }
#showcase-pos .spos-tp-meta { font-size: 0.75rem; color: #888; margin-top: 0.15rem; }
#showcase-pos .spos-tp-scope { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.72rem; font-weight: 600; background: #f3e5f5; color: #7b1fa2; }
#showcase-pos .spos-tp-weight { display: inline-block; background: #fff3e0; color: #e65100; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.72rem; }
#showcase-pos .spos-tp-toggle { font-size: 0.75rem; color: #0073b1; text-decoration: underline; }
#showcase-pos .spos-tp-discover { color: #2e7d32; text-decoration: underline; }

/* ---------- Feed discovery modal (mirrors .discover-overlay / .discover-modal on the Topics page) ---------- */
#showcase-pos .spos-tp-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; opacity: 0; visibility: hidden; transition: opacity calc(var(--spos-fade-ms) / var(--spos-rate)) ease, visibility 0s linear calc(var(--spos-fade-ms) / var(--spos-rate)); }
#showcase-pos .spos-tp-overlay.spos-open { opacity: 1; visibility: visible; transition-delay: 0s; }
#showcase-pos .spos-tp-modal { width: 100%; max-width: 700px; max-height: 92%; overflow: hidden; background: #fff; border-radius: 8px; padding: 1.25rem 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); color: #333; }
#showcase-pos .spos-tp-modal .spos-tp-h2 { margin-bottom: 0.3rem; }
#showcase-pos .spos-tp-subtitle { font-size: 0.82rem; color: #666; margin: 0 0 0.75rem; }
#showcase-pos .spos-tp-loading { text-align: center; padding: 2rem; color: #999; font-size: 0.9rem; }
#showcase-pos .spos-tp-loading.spos-done { display: none; }
#showcase-pos .spos-tp-results { display: none; }
#showcase-pos .spos-tp-results.spos-open { display: block; }
#showcase-pos .spos-tp-dfeed { display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; transition: border-color 0.15s; }
#showcase-pos .spos-tp-dfeed.spos-hover { border-color: #0073b1; }
#showcase-pos .spos-tp-check { flex: none; width: 16px; height: 16px; margin-top: 0.15rem; border-radius: 3px; background: #0073b1; position: relative; }
#showcase-pos .spos-tp-check::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#showcase-pos .spos-tp-dfeed-info { flex: 1; min-width: 0; }
#showcase-pos .spos-tp-dfeed-name { font-weight: 600; font-size: 0.9rem; }
#showcase-pos .spos-tp-dtier { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; background: #fff3e0; color: #e65100; }
#showcase-pos .spos-tp-dfeed-url { font-size: 0.7rem; color: #999; word-break: break-all; }
#showcase-pos .spos-tp-dfeed-desc { font-size: 0.78rem; color: #555; margin-top: 0.15rem; font-style: italic; }
#showcase-pos .spos-tp-dfeed-rel { font-size: 0.76rem; color: #0073b1; margin-top: 0.2rem; }
#showcase-pos .spos-tp-dfeed-hl { font-size: 0.74rem; color: #666; margin: 0.25rem 0 0 1rem; padding: 0; }
#showcase-pos .spos-tp-dactions { display: none; gap: 0.75rem; margin-top: 0.9rem; }
#showcase-pos .spos-tp-dactions.spos-open { display: flex; }
#showcase-pos .spos-t-new-feed { display: none; }
#showcase-pos .spos-t-new-feed.spos-shown { display: flex; }

/* ---------- Analytics and Advocacy pages (light theme, mirror public/shared/manager-nav.css page styles) ---------- */
#showcase-pos .spos-an-screen, #showcase-pos .spos-ad-screen { overflow: hidden; }
#showcase-pos .spos-an-container { max-width: 1000px; }
#showcase-pos .spos-ad-container { max-width: 860px; }
#showcase-pos .spos-an-subtitle { font-size: 0.78rem; color: #888; margin: -0.3rem 0 0.9rem; }
#showcase-pos .spos-an-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
#showcase-pos .spos-an-toolbar-label { font-weight: 600; font-size: 0.85rem; color: #555; }
#showcase-pos .spos-an-select { display: inline-block; padding: 0.35rem 1.8rem 0.35rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right 0.5rem center; color: #333; }
#showcase-pos .spos-an-select.spos-hover { border-color: #0073b1; }
#showcase-pos .spos-an-spacer { flex: 1; }
#showcase-pos .spos-tp-btn.spos-tp-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
#showcase-pos .spos-an-note-lg { font-size: 0.75rem; color: #999; margin-bottom: 0.7rem; }
#showcase-pos .spos-an-badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; vertical-align: middle; }
#showcase-pos .spos-an-badge-computed { background: #ede7f6; color: #5e35b1; }
#showcase-pos .spos-an-badge-topic { background: #e3f2fd; color: #1565c0; }
#showcase-pos .spos-an-badge-pending { background: #fff3e0; color: #e65100; }
#showcase-pos .spos-an-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
#showcase-pos .spos-an-table th { text-align: left; color: #666; font-weight: 600; padding: 0.35rem 0.5rem; border-bottom: 2px solid #e0e0e0; white-space: nowrap; }
#showcase-pos .spos-an-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
#showcase-pos .spos-an-table th.spos-an-num, #showcase-pos .spos-an-table td.spos-an-num { text-align: right; font-variant-numeric: tabular-nums; }
#showcase-pos .spos-an-post-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#showcase-pos .spos-an-note { font-size: 0.7rem; color: #aaa; }
#showcase-pos .spos-hm { display: grid; grid-template-columns: 3.2rem repeat(24, 1fr); gap: 2px; font-size: 0.62rem; }
#showcase-pos .spos-hm-label { color: #888; display: flex; align-items: center; }
#showcase-pos .spos-hm-hour { color: #aaa; text-align: center; }
#showcase-pos .spos-hm-cell { height: 1.15rem; border-radius: 2px; background: #f0f0f0; }
#showcase-pos .spos-hm-1 { background: #d7e9f4; }
#showcase-pos .spos-hm-2 { background: #a6cbe4; }
#showcase-pos .spos-hm-3 { background: #5d9fc9; }
#showcase-pos .spos-hm-4 { background: #0073b1; }
#showcase-pos .spos-an-demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
#showcase-pos .spos-an-demo-col h3 { font-size: 0.85rem; color: #555; margin: 0 0 0.5rem; text-transform: capitalize; font-weight: 600; }
#showcase-pos .spos-an-demo-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.25rem 0; border-bottom: 1px solid #f5f5f5; color: #444; }
#showcase-pos .spos-an-demo-count { color: #333; font-weight: 600; font-variant-numeric: tabular-nums; }
#showcase-pos .spos-h-narrative-section { display: none; }
#showcase-pos .spos-h-narrative-section.spos-open { display: block; }
#showcase-pos .spos-an-narrative { white-space: pre-wrap; font-size: 0.86rem; line-height: 1.55; background: #fafafa; border: 1px solid #eee; border-radius: 6px; padding: 0.8rem 0.9rem; color: #333; }
#showcase-pos .spos-an-narrative-meta { font-size: 0.72rem; color: #999; margin-top: 0.5rem; }
#showcase-pos .spos-ad-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid #f2f2f2; font-size: 0.84rem; }
#showcase-pos .spos-ad-k { color: #666; }
#showcase-pos .spos-ad-v { color: #222; white-space: nowrap; }
#showcase-pos .spos-ad-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
#showcase-pos .spos-ad-pill-on { background: #e8f5e9; color: #2e7d32; }
#showcase-pos .spos-ad-pill-off { background: #ffebee; color: #c62828; }
#showcase-pos .spos-ad-pill-mode { background: #e3f2fd; color: #1565c0; }
#showcase-pos .spos-ad-toggle-wrap { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
#showcase-pos .spos-ad-toggle { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px; background: #fafafa; font-size: 0.82rem; text-align: center; color: #333; }
#showcase-pos .spos-ad-toggle-active { background: #0073b1; color: #fff; border-color: #0073b1; font-weight: 600; }
#showcase-pos .spos-ad-empty { color: #999; font-style: italic; font-size: 0.85rem; }
#showcase-pos .spos-h-queue-empty.spos-gone { display: none; }
#showcase-pos .spos-h-gen-status.spos-busy { color: #0073b1; font-style: normal; }
#showcase-pos .spos-h-gen-status.spos-done { color: #2e7d32; font-style: normal; }
#showcase-pos .spos-ad-variant { display: none; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.8rem; margin-bottom: 0.8rem; }
#showcase-pos .spos-ad-variant.spos-shown { display: block; }
#showcase-pos .spos-ad-variant.spos-approved { border-color: #2e7d32; background: #f4faf4; }
#showcase-pos .spos-ad-hint { font-size: 0.72rem; color: #999; margin-bottom: 0.2rem; }
#showcase-pos .spos-ad-variant-edit { min-height: 110px; margin: 0.5rem 0; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.84rem; line-height: 1.45; white-space: pre-wrap; background: #fff; color: #333; }
#showcase-pos .spos-ad-variant-edit.spos-focus { border-color: #0073b1; box-shadow: 0 0 0 2px rgba(0, 115, 177, 0.15); }
#showcase-pos .spos-ad-btn-danger { background: #ffebee; color: #c62828; margin-left: 0.5rem; }
#showcase-pos .spos-ad-label { display: block; font-size: 0.78rem; font-weight: 600; color: #555; margin: 0.7rem 0 0.25rem; }
#showcase-pos .spos-ad-select { width: 100%; }
#showcase-pos .spos-ad-actions { margin-top: 0.7rem; }
#showcase-pos .spos-ad-table { font-size: 0.8rem; }
#showcase-pos .spos-h-screen-analytics, #showcase-pos .spos-h-screen-advocacy { transition: opacity calc(0.3s / var(--spos-rate)); }
#showcase-pos .spos-h-screen-advocacy { opacity: 0; visibility: hidden; }
#showcase-pos .spos-h-screen-advocacy.spos-shown { opacity: 1; visibility: visible; }
#showcase-pos .spos-h-screen-analytics.spos-gone { opacity: 0; visibility: hidden; }
#showcase-pos .spos-tp-section.spos-hover { box-shadow: 0 0 0 2px rgba(0, 115, 177, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1); }

/* ---------- LinkedIn Connection page and the authorization step ---------- */
#showcase-pos .spos-li-screen { overflow: hidden; }
#showcase-pos .spos-li-container { max-width: 860px; }
#showcase-pos .spos-li-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
#showcase-pos .spos-li-hint { font-size: 0.72rem; color: #999; flex: 1; min-width: 200px; }
#showcase-pos .spos-l-disabled { opacity: 0.45; }
#showcase-pos .spos-ad-toggle.spos-hover:not(.spos-ad-toggle-active) { border-color: #0073b1; }
#showcase-pos .spos-l-org-row { display: none; }
#showcase-pos .spos-l-org-row.spos-shown { display: flex; }
#showcase-pos .spos-l-org-body.spos-gone { display: none; }
#showcase-pos .spos-li-consent { background: #f3f2ef; display: flex; align-items: flex-start; justify-content: center; padding-top: 3rem; opacity: 0; visibility: hidden; transition: opacity calc(0.3s / var(--spos-rate)); }
#showcase-pos .spos-li-consent::before, #showcase-pos .spos-li-consent::after { display: none; }
#showcase-pos .spos-li-consent.spos-shown { opacity: 1; visibility: visible; }
#showcase-pos .spos-l-screen-page { transition: opacity calc(0.3s / var(--spos-rate)); }
#showcase-pos .spos-l-screen-page.spos-gone { opacity: 0; visibility: hidden; }
#showcase-pos .spos-li-consent-card { width: 420px; background: #fff; border-radius: 8px; padding: 1.5rem 1.75rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); color: #191919; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#showcase-pos .spos-li-consent-brand { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
#showcase-pos .spos-li-consent-user { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; font-size: 0.85rem; }
#showcase-pos .spos-li-avatar { width: 36px; height: 36px; border-radius: 50%; background: #0a66c2; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex: none; }
#showcase-pos .spos-li-consent-sub { color: #666; font-size: 0.78rem; }
#showcase-pos .spos-li-consent-title { font-weight: 600; margin: 1rem 0 0.4rem; font-size: 0.9rem; }
#showcase-pos .spos-li-consent-list { margin: 0 0 0.75rem 1.1rem; padding: 0; font-size: 0.82rem; line-height: 1.5; color: #333; }
#showcase-pos .spos-li-consent-note { font-size: 0.74rem; color: #666; margin-bottom: 1rem; }
#showcase-pos .spos-li-consent-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
#showcase-pos .spos-li-consent-cancel { padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid #666; color: #333; font-weight: 600; font-size: 0.85rem; }
#showcase-pos .spos-li-consent-allow { padding: 0.45rem 1.2rem; border-radius: 999px; background: #0a66c2; color: #fff; font-weight: 600; font-size: 0.85rem; transition: filter 0.15s, transform 0.1s; }
#showcase-pos .spos-li-consent-allow.spos-hover { filter: brightness(0.92); }
#showcase-pos .spos-li-consent-allow.spos-pressed { transform: scale(0.97); }

/* ---------- In-post Image Studio panel (mirrors app.css .image-studio-*) and the rendered picture ---------- */
#showcase-pos .spos-i-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#showcase-pos .spos-i-img { display: block; width: 100%; height: 100%; }
#showcase-pos .spos-is-panel { margin-top: 0.25rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-secondary); padding: 0.7rem 0.8rem; }
#showcase-pos .spos-is-head { font-size: 0.8rem; font-weight: 700; color: var(--accent-blue); margin-bottom: 0.5rem; }
#showcase-pos .spos-is-lens-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
#showcase-pos .spos-is-lens-label { font-size: 0.78rem; color: var(--text-secondary); }
#showcase-pos .spos-is-lens { flex: 1; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 1.6rem 0.3rem 0.5rem; background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238899b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right 0.5rem center; color: var(--text-primary); }
#showcase-pos .spos-is-lens.spos-hover { border-color: var(--border-active); }
#showcase-pos .spos-is-prompt { min-height: 2.6rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); color: var(--text-primary); font-size: 0.82rem; line-height: 1.4; white-space: pre-wrap; }
#showcase-pos .spos-is-prompt.spos-focus { border-color: var(--border-active); box-shadow: 0 0 0 2px var(--glow-blue); }
#showcase-pos .spos-is-prompt .spos-tp-ph { color: var(--text-muted); }
#showcase-pos .spos-is-prompt.spos-focus .spos-tp-ph, #showcase-pos .spos-is-prompt.spos-typed-on .spos-tp-ph { display: none; }
#showcase-pos .spos-is-prompt .spos-caret { display: none; width: 1px; height: 1em; background: var(--text-primary); vertical-align: text-bottom; margin-left: 1px; animation: spos-caret 1s steps(2) infinite; }
#showcase-pos .spos-is-prompt.spos-focus .spos-caret { display: inline-block; }
#showcase-pos .spos-is-actions { display: flex; align-items: center; gap: 0.5rem; margin: 0.55rem 0; flex-wrap: wrap; }
#showcase-pos .spos-i-attach, #showcase-pos .spos-i-attached { display: none; }
#showcase-pos .spos-i-attach.spos-shown { display: inline-block; }
#showcase-pos .spos-i-attached.spos-shown { display: inline-flex; align-items: center; gap: 0.5rem; }
#showcase-pos .spos-is-ok { font-size: 0.78rem; color: var(--accent-green); font-weight: 600; }
#showcase-pos .spos-is-preview { position: relative; display: none; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--bg-primary); border: 1px solid var(--border); }
#showcase-pos .spos-is-preview.spos-shown { display: block; }
#showcase-pos .spos-is-preview .spos-i-img { opacity: 0; transition: opacity calc(0.8s / var(--spos-rate)); }
#showcase-pos .spos-is-preview.spos-ready .spos-i-img { opacity: 1; }
#showcase-pos .spos-is-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg-card) 20%, var(--bg-card-hover) 50%, var(--bg-card) 80%); background-size: 200% 100%; animation: spos-shimmer calc(1.4s / var(--spos-rate)) linear infinite; }
#showcase-pos .spos-is-preview.spos-ready .spos-is-shimmer { display: none; }
@keyframes spos-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
#showcase-pos .spos-is-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3rem 0.5rem; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-secondary); background: rgba(10, 14, 23, 0.72); opacity: 0; transition: opacity calc(0.4s / var(--spos-rate)); }
#showcase-pos .spos-is-preview.spos-ready .spos-is-meta { opacity: 1; }
#showcase-pos .spos-is-preview-sm { display: block; max-width: 320px; }
#showcase-pos .spos-is-preview-sm .spos-i-img { opacity: 1; }
#showcase-pos .spos-is-preview-sm .spos-is-shimmer { display: none; }
#showcase-pos .spos-i-card-body { display: flex; gap: 0.6rem; align-items: flex-start; }
#showcase-pos .spos-i-thumb { display: none; flex: none; width: 76px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
#showcase-pos .spos-i-thumb.spos-shown { display: block; }
#showcase-pos .spos-i-screen-dash { transition: opacity calc(0.3s / var(--spos-rate)); }
#showcase-pos .spos-i-screen-dash.spos-gone { opacity: 0; visibility: hidden; }

/* ---------- The post as it appears in a professional network feed (illustrative) ---------- */
#showcase-pos .spos-li-feed { background: #f3f2ef; display: flex; align-items: flex-start; justify-content: center; padding-top: 1.5rem; opacity: 0; visibility: hidden; transition: opacity calc(0.3s / var(--spos-rate)); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #191919; }
#showcase-pos .spos-li-feed::before, #showcase-pos .spos-li-feed::after { display: none; }
#showcase-pos .spos-li-feed.spos-shown { opacity: 1; visibility: visible; }
#showcase-pos .spos-li-feed-card { width: 560px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.08); overflow: hidden; }
#showcase-pos .spos-li-feed-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem 0.4rem; }
#showcase-pos .spos-li-avatar-org { border-radius: 6px; background: #4c7239; width: 44px; height: 44px; font-size: 0.9rem; }
#showcase-pos .spos-li-feed-name { font-weight: 600; font-size: 0.9rem; }
#showcase-pos .spos-li-feed-sub { font-size: 0.74rem; color: #666; }
#showcase-pos .spos-li-feed-text { padding: 0.3rem 1rem 0; font-size: 0.86rem; line-height: 1.45; white-space: pre-wrap; }
#showcase-pos .spos-li-feed-more { padding: 0 1rem 0.5rem; font-size: 0.8rem; color: #666; }
#showcase-pos .spos-li-feed-img { width: 100%; aspect-ratio: 16 / 9; }
#showcase-pos .spos-li-feed-tags { padding: 0.5rem 1rem 0; font-size: 0.82rem; color: #0a66c2; font-weight: 600; }
#showcase-pos .spos-li-feed-actions { display: flex; justify-content: space-around; padding: 0.6rem 0.5rem 0.7rem; margin-top: 0.4rem; border-top: 1px solid #e6e6e6; font-size: 0.82rem; font-weight: 600; color: #444; }
#showcase-pos .spos-li-feed-actions.spos-hover { color: #0a66c2; }

/* ---------- Screens inside the topics recording ---------- */
#showcase-pos .spos-t-screen-topics, #showcase-pos .spos-t-screen-dash { transition: opacity calc(0.3s / var(--spos-rate)); }
#showcase-pos .spos-t-screen-dash { opacity: 0; visibility: hidden; }
#showcase-pos .spos-t-screen-dash.spos-shown { opacity: 1; visibility: visible; }
#showcase-pos .spos-t-screen-topics.spos-gone { opacity: 0; visibility: hidden; }
#showcase-pos .spos-select.spos-hover { border-color: var(--border-active); }
#showcase-pos .spos-t-angle-select { display: none; }
#showcase-pos .spos-t-angle-select.spos-shown { display: block; }

/* ---------- Generating Content overlay (mirrors app.css .overlay-backdrop / .overlay-card) ---------- */
#showcase-pos .spos-gen-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 110; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity calc(var(--spos-fade-ms) / var(--spos-rate)) ease, visibility 0s linear calc(var(--spos-fade-ms) / var(--spos-rate)); }
#showcase-pos .spos-gen-overlay.spos-open { opacity: 1; visibility: visible; transition-delay: 0s; }
#showcase-pos .spos-gen-card { background: #fff; border-radius: 8px; padding: 2rem 3rem; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 420px; }
#showcase-pos .spos-gen-spinner { width: 40px; height: 40px; margin: 0 auto 1rem; border: 3px solid #e0e0e0; border-top-color: #0073b1; border-radius: 50%; animation: spos-spin calc(1s / var(--spos-rate)) linear infinite; }
@keyframes spos-spin { to { transform: rotate(360deg); } }
#showcase-pos .spos-gen-title { font-size: 1.1rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; }
#showcase-pos .spos-gen-sub { font-size: 0.85rem; color: #888; }
#showcase-pos .spos-gen-fine { font-size: 0.75rem; color: #aaa; margin-top: 1rem; }

/* ---------- Quality Assessment panel (mirrors app.css .quality-*) ---------- */
#showcase-pos .spos-quality { margin-top: 1.5rem; padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius-sm); }
#showcase-pos .spos-quality-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
#showcase-pos .spos-quality-label { font-size: 0.75rem; color: var(--text-muted); width: 140px; font-family: var(--font-mono); }
#showcase-pos .spos-quality-bar { flex: 1; height: 6px; background: var(--bg-primary); border-radius: 3px; overflow: hidden; }
#showcase-pos .spos-quality-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent-green); }
#showcase-pos .spos-q-9 { width: 90%; }
#showcase-pos .spos-q-8 { width: 80%; }
#showcase-pos .spos-q-7 { width: 70%; }
#showcase-pos .spos-quality-score { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
#showcase-pos .spos-quality-overall { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); }
#showcase-pos .spos-quality-pass { color: var(--accent-green); }

/* ---------- Dashboard modals (mirror app.css .modal-overlay / .modal-content) ---------- */
#showcase-pos .spos-modal-overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity calc(var(--spos-fade-ms) / var(--spos-rate)) ease, visibility 0s linear calc(var(--spos-fade-ms) / var(--spos-rate));
}
#showcase-pos .spos-modal-overlay.spos-open { opacity: 1; visibility: visible; transition-delay: 0s; }
#showcase-pos .spos-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem;
  max-width: 640px; width: 100%; max-height: 88%; overflow: hidden; color: var(--text-primary);
  transform: translateY(10px) scale(0.98); transition: transform calc(var(--spos-fade-ms) / var(--spos-rate)) ease;
}
#showcase-pos .spos-modal-overlay.spos-open .spos-modal { transform: none; }
#showcase-pos .spos-modal-narrow { max-width: 600px; }
#showcase-pos .spos-modal-close { float: right; color: var(--text-muted); font-size: 1.25rem; }
#showcase-pos .spos-modal-heading { margin: 1rem 0 0.5rem; font-size: 1.1rem; font-weight: 600; }
#showcase-pos .spos-modal-heading-top { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; }
#showcase-pos .spos-mb { margin-bottom: 0.75rem; }
#showcase-pos .spos-mb-lg { margin-bottom: 1rem; }
#showcase-pos .spos-form-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); }
#showcase-pos .spos-form-input { width: 100%; padding: 0.4rem 0.6rem; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#showcase-pos .spos-form-textarea { width: 100%; height: 120px; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.85rem; line-height: 1.4; white-space: pre-wrap; overflow: hidden; }
#showcase-pos .spos-form-textarea.spos-focus { border-color: var(--border-active); box-shadow: 0 0 0 2px var(--glow-blue); }
#showcase-pos .spos-caret { display: none; width: 1px; height: 1em; background: var(--text-primary); vertical-align: text-bottom; margin-left: 1px; animation: spos-caret 1s steps(2) infinite; }
#showcase-pos .spos-form-textarea.spos-focus .spos-caret { display: inline-block; }
@keyframes spos-caret { to { opacity: 0; } }
#showcase-pos .spos-dest-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 10px; margin-left: 0.4rem; background: #616161; color: #f5f5f5; }
#showcase-pos .spos-corr-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.7rem; padding: 0.2rem 0.3rem; border-radius: 6px; margin-left: 0.5rem; background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
#showcase-pos .spos-badges-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
#showcase-pos .spos-modal-body { white-space: pre-wrap; line-height: 1.7; color: var(--text-secondary); margin: 1.5rem 0; font-size: 0.9rem; }
#showcase-pos .spos-hashtags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
#showcase-pos .spos-hashtag { background: var(--bg-secondary); color: var(--accent-cyan); font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 6px; font-family: var(--font-mono); }
#showcase-pos .spos-modal-rewrite { margin: 0.75rem 0; }
#showcase-pos .spos-modal-move { margin: 0.75rem 0; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
#showcase-pos .spos-modal-move-label { font-size: 0.78rem; opacity: 0.7; margin-bottom: 0.4rem; }
#showcase-pos .spos-modal-move-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
#showcase-pos .spos-btn-plain { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.75rem; }
#showcase-pos .spos-source-list { margin-top: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius-sm); border-left: 3px solid var(--accent-cyan); }
#showcase-pos .spos-section-heading-cyan { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent-cyan); }
#showcase-pos .spos-source-item { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem; color: var(--text-secondary); padding: 0.3rem 0; }
#showcase-pos .spos-source-tier { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-green); flex: none; }
#showcase-pos .spos-section-divider { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
#showcase-pos .spos-section-heading { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
#showcase-pos .spos-detail-stack { display: flex; flex-direction: column; gap: 0.5rem; }
#showcase-pos .spos-image-choice { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
#showcase-pos .spos-studio-panel { margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-secondary); padding: 0.6rem 0.8rem; }
#showcase-pos .spos-studio-head { font-size: 0.8rem; font-weight: 700; color: var(--accent-blue); margin-bottom: 0.4rem; }
#showcase-pos .spos-studio-row { display: flex; align-items: center; gap: 0.5rem; }
#showcase-pos .spos-studio-label { font-size: 0.78rem; color: var(--text-secondary); }
#showcase-pos .spos-studio-select { flex: 1; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.4rem; background: var(--bg-card); color: var(--text-primary); }
#showcase-pos .spos-modal-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
#showcase-pos .spos-modal-actions-end { display: flex; gap: 0.75rem; justify-content: flex-end; }
#showcase-pos .spos-btn-approve.spos-hover, #showcase-pos .spos-btn-edit.spos-hover { filter: brightness(1.12); }
#showcase-pos .spos-btn-approve.spos-pressed, #showcase-pos .spos-btn-edit.spos-pressed { transform: scale(0.97); filter: brightness(0.92); }
#showcase-pos .spos-post.spos-hover { border-color: var(--border-active); background: var(--bg-card-hover); }
#showcase-pos .spos-post.spos-published { opacity: 0.35; }
#showcase-pos .spos-pending-card.spos-c-hidden { display: none; }
#showcase-pos .spos-post.spos-enter { opacity: 0; transform: translateY(-6px); }

/* ---------- Cursor, click ripple, highlight, callout ---------- */
#showcase-pos .spos-cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 30px; z-index: 500; pointer-events: none; transform: translate(-4px, -2px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  transition: left calc(var(--spos-cursor-ms) / var(--spos-rate)) cubic-bezier(0.22, 0.61, 0.36, 1), top calc(var(--spos-cursor-ms) / var(--spos-rate)) cubic-bezier(0.22, 0.61, 0.36, 1);
}
#showcase-pos .spos-cursor.spos-fast { transition-duration: calc(0.55s / var(--spos-rate)), calc(0.55s / var(--spos-rate)); }
#showcase-pos .spos-cursor.spos-jump { transition: none; }
#showcase-pos .spos-ripple { position: absolute; z-index: 499; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--accent-cyan); opacity: 0; pointer-events: none; }
#showcase-pos .spos-ripple.spos-go { animation: spos-ripple calc(var(--spos-ripple-ms) / var(--spos-rate)) ease-out forwards; }
@keyframes spos-ripple { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(4.2); } }
#showcase-pos .spos-highlight { position: absolute; z-index: 498; border: 2px solid var(--accent-cyan); border-radius: 10px; box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15); opacity: 0; pointer-events: none; transition: opacity calc(0.2s / var(--spos-rate)); }
#showcase-pos .spos-highlight.spos-on { opacity: 1; }

/* Viewers who ask for reduced motion see the end state without the cursor choreography. */
@media (prefers-reduced-motion: reduce) {
  #showcase-pos .spos-headline-mark { animation: none; background-size: 100% 3px; }
  #showcase-pos .spos-cursor, #showcase-pos .spos-ripple, #showcase-pos .spos-highlight { display: none; }
  #showcase-pos .spos-modal-overlay.spos-open, #showcase-pos .spos-gen-overlay.spos-open { transition: none; }
  #showcase-pos .spos-modal { transform: none; transition: none; }
}