/* Shared by the homepage "How it works" animation and the /welcome guide: the mock Chrome window,
   the sentence with a selected word, the floating icon and the extension's result panel.
   Colours come from --mk-* tokens that follow the site theme (light Chrome + light panel, or dark
   Chrome + dark panel), so a visitor sees what they would see in their own browser. */
/* ---- Mock-browser tokens. The demos follow the site theme: light theme shows Chrome's
   light UI with the extension's light panel, dark theme shows Chrome's dark UI with the
   extension's dark panel - what the user would actually see in their own browser. ---- */
:root {
  --mk-tabstrip: #dee1e6;
  --mk-tab: #ffffff;
  --mk-toolbar: #ffffff;
  --mk-line: #dadce0;
  --mk-omnibox: #f1f3f4;
  --mk-chrome-text: #3c4043;
  --mk-chrome-icon: #5f6368;
  --mk-chrome-hover: #e8eaed;
  --mk-page: #ffffff;
  --mk-page-text: #172b4d;
  --mk-skeleton: #e8edf4;
  --mk-skeleton-strong: #dbe3ee;
  --mk-selection: rgb(22 131 247 / 32%);
  --mk-menu: #ffffff;
  --mk-menu-muted: #5f6368;
  --mk-pin-active: #1683f7;
  --mk-panel: #ffffff;
  --mk-panel-border: #dce6f0;
  --mk-panel-text: #172b4d;
  --mk-panel-field: #f8fafc;
  --mk-panel-muted: #64748b;
  --mk-panel-divider: #e8eef6;
  --mk-accent: #1683f7;
  --mk-accent-text: #ffffff;
  --mk-copied-bg: #ecfdf3;
  --mk-copied-text: #15803d;
  --mk-shadow: rgb(15 23 42 / 22%);
}
:root[data-theme="dark"] {
  --mk-tabstrip: #202124;
  --mk-tab: #35363a;
  --mk-toolbar: #292a2d;
  --mk-line: #3c4043;
  --mk-omnibox: #202124;
  --mk-chrome-text: #e8eaed;
  --mk-chrome-icon: #c4c7c5;
  --mk-chrome-hover: #3c4043;
  --mk-page: #16181d;
  --mk-page-text: #e3e5e8;
  --mk-skeleton: #26292e;
  --mk-skeleton-strong: #32363c;
  --mk-selection: rgb(90 169 255 / 38%);
  --mk-menu: #292a2d;
  --mk-menu-muted: #9aa0a6;
  --mk-pin-active: #8ab4f8;
  --mk-panel: #0f172a;
  --mk-panel-border: #2a3a52;
  --mk-panel-text: #f1f5f9;
  --mk-panel-field: #131c2e;
  --mk-panel-muted: #94a3b8;
  --mk-panel-divider: #22314a;
  --mk-accent: #5aa9ff;
  --mk-accent-text: #0f172a;
  --mk-copied-bg: #052e16;
  --mk-copied-text: #86efac;
  --mk-shadow: rgb(0 0 0 / 45%);
}

/* ---- Animated tutorial. The mock browser is intentionally theme-independent: a light page
   with the extension's dark panel, matching the promo screenshots in both site themes. ---- */
.demo { margin: 1rem auto 0; max-width: 52rem; text-align: left; }
.browser { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--mk-page); }
/* Chrome on Windows: tab strip with window controls, then the navigation toolbar. */
.chrome-tabs { display: flex; align-items: flex-end; gap: .35rem; padding: .35rem .35rem 0; background: var(--mk-tabstrip); }
.chrome-tab { display: flex; align-items: center; max-width: 15rem; min-width: 0; padding: .45rem .9rem; background: var(--mk-tab); border-radius: 8px 8px 0 0; font-size: .78rem; color: var(--mk-chrome-text); }
.chrome-tab span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The mock names no website: a ghost bar reads as "some page" without a brand to look at. */
.tab-title { width: 4.5rem; height: .38rem; border-radius: 999px; background: var(--mk-skeleton-strong); }
.browser-bar { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: var(--mk-toolbar); border-bottom: 1px solid var(--mk-line); }
.nav-icon { flex: none; width: 1.05rem; height: 1.05rem; stroke: var(--mk-chrome-icon); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon.dim { opacity: .35; }
/* Chrome's extensions glyph: square body with a knob on top, a nub on the right and a
   socket bitten out of the left. Drawn to match Chrome's own toolbar icon - no icon set
   ships this exact shape (Lucide's puzzle is four-lobed, Material's is a different piece). */
.puzzle-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.browser-url { flex: 1; min-width: 0; height: 1.6rem; border-radius: 999px; background: var(--mk-omnibox); color: var(--mk-chrome-text); font-size: .78rem; line-height: 1.6rem; padding: 0 .85rem; margin-inline: .2rem; display: flex; align-items: center; }
.url-ghost { width: 7rem; height: .38rem; border-radius: 999px; background: var(--mk-skeleton-strong); }
.browser-ext { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 5px; }

.stage { position: relative; height: 20rem; padding: 1.2rem 1.5rem; background: var(--mk-page); color: var(--mk-page-text); overflow: hidden; transition: opacity .5s; }
.stage.fading { opacity: 0; }
/* Loop restart: snap everything inside back to its start state with no transitions, so nothing
   (e.g. the results panel) is still fading out while the stage fades back in. */
.stage.resetting *, .stage.resetting *::before, .stage.resetting *::after { transition: none !important; }
.skeleton { height: .65rem; border-radius: 999px; background: var(--mk-skeleton); margin-bottom: .7rem; }
.skeleton.title { height: 1.15rem; width: 55%; background: var(--mk-skeleton-strong); margin-bottom: .85rem; }
.stage p.page-text { font-size: 1.1rem; line-height: 1.65; margin: 0 0 .85rem; color: var(--mk-page-text); }
.stage .word { position: relative; }

.sel { position: absolute; background: var(--mk-selection); border-radius: 2px; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
/* drop-shadow (not box-shadow) follows the icon's painted silhouette: a box-shadow on a
   PNG with transparent margin shows up as a rectangular "coin" halo. Same fix as the
   extension's own #sf-floating-button. */
.fab { position: absolute; width: 2rem; height: 2rem; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s cubic-bezier(.2, .9, .3, 1.3); filter: drop-shadow(0 2px 8px rgb(0 0 0 / 25%)); pointer-events: none; }
.fab.show { opacity: 1; transform: scale(1); }
.fab.press { transform: scale(.88); }

.panel {
  position: absolute; width: min(17.5rem, calc(100% - 1rem)); padding: 2.1rem .9rem .8rem; border-radius: 12px;
  background: var(--mk-panel); color: var(--mk-panel-text); border: 1px solid var(--mk-panel-border); box-shadow: 0 12px 32px var(--mk-shadow);
  opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .3s, transform .3s; pointer-events: none;
}
.panel.show { opacity: 1; transform: none; }
.panel::before { content: ""; position: absolute; top: -6px; left: var(--tail, 2rem); width: 12px; height: 12px; background: var(--mk-panel); border-left: 1px solid var(--mk-panel-border); border-top: 1px solid var(--mk-panel-border); transform: rotate(45deg); border-radius: 3px 0 0 0; }
/* Same as the extension's .sf-panel-close: a 22px round chip with a 14px x. */
.panel-close { position: absolute; top: 8px; right: 14px; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--mk-panel-field); color: var(--mk-panel-muted); }
.panel-search { display: flex; gap: .4rem; }
.panel-input { flex: 1; min-width: 0; height: 2.1rem; display: flex; align-items: center; padding: 0 .65rem; border: 1px solid var(--mk-panel-border); border-radius: 8px; font-weight: 600; font-size: .95rem; background: var(--mk-panel-field); }
.panel-go { width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--mk-accent); color: var(--mk-accent-text); display: grid; place-items: center; }
.panel-go .icon { width: 1rem; height: 1rem; }
.panel-close .icon { width: 14px; height: 14px; }
.panel-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 .6rem; padding: 0; list-style: none; }
.panel-chips li { display: inline-grid; padding: .3rem .65rem; border: 1px solid var(--mk-panel-border); border-radius: 8px; font-size: .9rem; background: var(--mk-panel-field); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s, background .2s, border-color .2s, color .2s; }
/* Both labels stay in the DOM, stacked in one grid cell, so the chip never resizes when it
   flips to "Copied" - the same technique as the extension's own chips. */
.panel-chips li > span { grid-area: 1 / 1; text-align: center; }
.panel-chips .chip-c { visibility: hidden; }
.panel-chips li[data-copied="true"] { background: var(--mk-copied-bg); color: var(--mk-copied-text); border-color: transparent; }
.panel-chips li[data-copied="true"] .chip-w { visibility: hidden; }
.panel-chips li[data-copied="true"] .chip-c { visibility: visible; }
.panel-chips li.show { opacity: 1; transform: none; }
.panel-foot { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; border-top: 1px solid var(--mk-panel-divider); padding-top: .55rem; font-size: .8rem; font-weight: 600; color: var(--mk-panel-muted); }
.panel-foot img { width: 1.1rem; height: 1.1rem; border-radius: 4px; }

.cursor { position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; opacity: 0; pointer-events: none; z-index: 5; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 35%)); transition: opacity .3s; }
.cursor.show { opacity: 1; }

.demo-steps { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; grid-auto-flow: column; grid-auto-columns: 1fr; counter-reset: s; }
.demo-steps li { display: flex; gap: .55rem; align-items: center; min-width: 0; padding: .45rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text-secondary); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color var(--step-fade) ease-in-out, background-color var(--step-fade) ease-in-out, color var(--step-fade) ease-in-out; }
.demo-steps { --step-fade: .9s; }
.demo-steps li::before { transition: background-color var(--step-fade) ease-in-out, color var(--step-fade) ease-in-out; counter-increment: s; content: counter(s); flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .78rem; background: var(--color-surface-secondary); color: var(--color-text-muted); }
.demo-steps li.active { border-color: var(--color-primary); background: var(--color-accent-surface); color: var(--color-text); }
.demo-steps li.active::before { background: var(--color-primary); color: var(--color-primary-contrast); }
.demo-steps strong { color: var(--color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
/* Step tiles and the Replay button share one row - it keeps the first screen short enough
   that the second tutorial can peek in below the fold hint. */
.demo-controls { display: flex; align-items: stretch; gap: .5rem; margin-top: .85rem; }
.demo-controls .demo-steps { flex: 1; min-width: 0; margin-top: 0; }
.demo-actions { display: flex; flex: none; }
.demo-actions .btn { min-height: 0; height: 100%; padding: 0 .9rem; }
/* Replay is the one control in this row (the rest are labels), so it is filled with the accent -
   otherwise it reads as just another step tile. It uses the darker accent shades so white text
   keeps AA contrast on the light theme. */
.demo-actions .btn {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-contrast);
  box-shadow: 0 1px 2px rgb(15 23 42 / 18%);
}
.demo-actions .btn:hover { background: var(--color-primary-pressed); border-color: var(--color-primary-pressed); }
@media (max-width: 45rem) {
  .demo-steps { grid-auto-flow: row; }
  .demo-controls { flex-direction: column; }
  .demo-actions .btn { width: 100%; min-height: 2.75rem; }
  .demo-steps li { font-size: .88rem; }
  .stage { padding: 1.1rem 1rem; height: 23rem; }
  .stage p.page-text { font-size: 1.05rem; }
}


/* ---- Side-panel footer button in the first mock panel ---- */
.panel-foot .icon { width: 1rem; height: 1rem; color: var(--mk-panel-muted); }


/* Reduced motion: the JS shows a static final frame, but the mock's own CSS transitions would
   still animate into it. Cut them so the final state is reached instantly. */
@media (prefers-reduced-motion: reduce) {
  .stage, .sel, .fab, .panel, .panel-chips li, .cursor { transition: none !important; }
}

/* ---- Click visualisation: ONLY the cursor. On a click the arrow presses in only barely and briefly
   turns the accent colour, then returns. Nothing is drawn around the click and nothing else moves.
   The animation runs on the arrow SHAPE inside the svg, scaling about its tip - never on the
   positioned .cursor element itself: that is placed with `transform: translate(x, y)`, and CSS
   applies the individual `scale` property BEFORE `transform`, so scaling the element scales that
   translation too and flings the pointer ~80px across the mock on every click. ---- */
.cursor path { transform-origin: 4px 2.5px; }
.cursor.clicking path { animation: cursor-click .4s ease-out; }
@keyframes cursor-click {
  0%   { transform: scale(1);   fill: #111827; }
  30%  { transform: scale(.9);  fill: var(--mk-accent); }
  62%  { transform: scale(.9);  fill: var(--mk-accent); }
  100% { transform: scale(1);   fill: #111827; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor.clicking path { animation: none; }
}

/* On the homepage the animation sits under the written steps. */
#how-it-works .demo { margin-top: 2rem; }

/* The second item of "How it works": how to pin the extension. */
#how-it-works .how-sub { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 3rem 0 .75rem; letter-spacing: -0.01em; }