/* SlideScout mockup, used on the Work page's SlideScout card.

   Drawn in HTML from the extension's own styles (SlideScout repo,
   src/panel/panel.css on master, light theme): its colors, Instrument Sans
   and DM Mono, and the panel's layout: course title and status, Map / List /
   Tracking tabs, the course map, and the dock with Unlock seekbar. The course
   is made up; no real course content appears here.

   Sizes are in --u, one pixel of an 800 x 500 browser window, so the picture
   scales with its card. Below 760px only the side panel shows, at 380 wide. */

.app-mock--ss { container-type: inline-size; background: #E4E7EA; }

.ss {
  --s-bg: #ffffff;
  --s-ground: #ebefed;
  --s-dots: #cfd7d3;
  --s-band: rgb(255 255 255 / 80%);
  --s-sunken: #f1f4f2;
  --s-line: #e1e6e3;
  --s-edge: #9aa8a2;
  --s-link: #66756f;
  --s-ink: #14201c;
  --s-muted: #4f5d58;
  --s-accent: #0f6b5c;
  --s-tag: rgb(10 18 15 / 72%);
  --s-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --u: calc(100cqw / 800);
  margin: 0;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--s-ink);
  line-height: 1.35;
  text-align: left;
  user-select: none;
  cursor: default;
}
.ss-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ss .ic {
  flex: none; display: block; width: calc(16 * var(--u)); height: calc(16 * var(--u));
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ss .ic.solid { fill: currentColor; stroke: none; }
.ss .ss-mono { font-family: var(--s-mono); letter-spacing: -0.04em; }

.ss-window { display: grid; grid-template-rows: calc(34 * var(--u)) calc(466 * var(--u)); width: calc(800 * var(--u)); }

/* Browser chrome */
.ss-browser {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 calc(14 * var(--u)); background: #EEF0F2; border-bottom: 1px solid #D9DDE1;
}
.ss-dots { display: flex; gap: calc(7 * var(--u)); }
.ss-dots i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #D3D7DC; }
.ss-url {
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  width: calc(320 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(7 * var(--u));
  background: #FFFFFF; font-size: calc(11 * var(--u)); color: #6B7280;
}
.ss-url .ic { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }

.ss-split { display: grid; grid-template-columns: calc(420 * var(--u)) calc(380 * var(--u)); min-height: 0; }

/* A made-up course in the player */
.ss-course {
  display: flex; flex-direction: column; justify-content: center; gap: calc(10 * var(--u));
  padding: 0 calc(20 * var(--u)); background: #E4E7EA;
}
.ss-slide {
  position: relative; display: flex; width: calc(380 * var(--u)); height: calc(214 * var(--u));
  padding: calc(22 * var(--u)) calc(24 * var(--u)); overflow: hidden;
  border-radius: calc(4 * var(--u)); background: #1F2A44; color: #FFFFFF;
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgb(20 32 28 / 18%);
}
.ss-slide-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.ss-kicker { font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #F2906F; }
.ss-slide-h { max-width: calc(220 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; line-height: 1.2; }
.ss-slide-p { margin-bottom: calc(4 * var(--u)); font-size: calc(11 * var(--u)); color: #C9D2E3; }
.ss-opt {
  width: calc(190 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: calc(5 * var(--u)); background: #FFFFFF; color: #1F2A44;
  font-size: calc(10 * var(--u)); font-weight: 600;
}
.ss-clock {
  position: relative; flex: none; align-self: center; width: calc(92 * var(--u)); height: calc(92 * var(--u));
  border: calc(6 * var(--u)) solid #E86F4C; border-radius: 50%;
}
.ss-clock i { position: absolute; left: 50%; bottom: 50%; width: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: #FFFFFF; transform-origin: 50% 100%; }
.ss-clock i:first-child { height: calc(26 * var(--u)); transform: translateX(-50%) rotate(0deg); }
.ss-clock i:last-child { height: calc(20 * var(--u)); transform: translateX(-50%) rotate(60deg); }
.ss-player {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  width: calc(380 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u));
  border-radius: calc(4 * var(--u)); background: #FFFFFF; color: #3A4250; font-size: calc(10 * var(--u));
}
.ss-player .ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.ss-track { position: relative; flex: 1; height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: #D5DAE0; }
.ss-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; border-radius: inherit; background: #1F2A44; }
.ss-knob {
  position: absolute; left: 46%; top: 50%; width: calc(11 * var(--u)); height: calc(11 * var(--u));
  border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 calc(1.5 * var(--u)) #1F2A44; transform: translate(-50%, -50%);
}
.ss-time { font-family: var(--s-mono); color: #6B7280; }
.ss-pbtn { padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: #EEF0F2; font-weight: 600; }
.ss-pbtn.is-next { background: #1F2A44; color: #FFFFFF; }

/* Chrome's side panel, holding SlideScout */
.ss-panel { display: flex; flex-direction: column; min-height: 0; background: var(--s-bg); border-left: 1px solid #D3D8DC; }
.ss-sidehead {
  flex: none; display: flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(32 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u));
  border-bottom: 1px solid var(--s-line); font-size: calc(12 * var(--u)); font-weight: 600; color: #3A4250;
}
.ss-logo { display: grid; place-items: center; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--s-accent); color: #FFFFFF; }
.ss-logo .ic { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.ss-sidehead .ss-chev { width: calc(10 * var(--u)); height: calc(10 * var(--u)); transform: rotate(180deg); color: var(--s-muted); }
.ss-sidehead .ss-x { margin-left: auto; width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--s-muted); }

.ss-chrome {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(8 * var(--u)) calc(6 * var(--u));
  padding: calc(10 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
}
.ss-title-block { min-width: 0; padding-left: calc(4 * var(--u)); }
.ss-course-title { font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-status { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--s-muted); }
.ss-status-dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--s-accent); }
.ss-actions { display: flex; align-items: center; gap: calc(2 * var(--u)); color: var(--s-muted); }
.ss-iconbtn { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.ss-views { grid-column: 1 / -1; display: flex; gap: calc(6 * var(--u)); margin-right: calc(4 * var(--u)); }
.ss-tabs { flex: 1; display: flex; gap: calc(2 * var(--u)); padding: calc(3 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--s-sunken); }
.ss-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u));
  height: calc(28 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--s-muted);
}
.ss-tab.is-active { background: var(--s-bg); color: var(--s-ink); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(20 32 28 / 14%); }
.ss-tab .ss-mono { font-size: calc(11 * var(--u)); font-weight: 400; }
.ss-searchbtn { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--s-sunken); }

/* The course map */
.ss-map {
  position: relative; flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--s-line);
  background-color: var(--s-ground);
  background-image: radial-gradient(var(--s-dots) calc(1 * var(--u)), transparent calc(1.4 * var(--u)));
  background-size: calc(16 * var(--u)) calc(16 * var(--u));
}
.ss-band { position: absolute; left: calc(10 * var(--u)); width: calc(360 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--s-band); }
.ss-band-label { position: absolute; left: calc(12 * var(--u)); top: calc(5 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; color: var(--s-muted); white-space: nowrap; }
.ss-band-label .ss-mono { font-weight: 400; }
.ss-edges { position: absolute; left: 0; top: 0; width: calc(380 * var(--u)); height: calc(260 * var(--u)); overflow: visible; }
.ss-edge { fill: none; stroke: var(--s-link); stroke-width: 1.6; }
.ss-edge.is-hot { stroke: var(--s-accent); stroke-width: 2.2; stroke-dasharray: 5 4; }

.ss-card { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(80 * var(--u)); text-align: center; }
.ss-frame { position: relative; display: block; height: calc(45 * var(--u)); border-radius: calc(6 * var(--u)); }
.ss-card.is-current .ss-frame { box-shadow: 0 0 0 calc(2 * var(--u)) var(--s-bg), 0 0 0 calc(4 * var(--u)) var(--s-accent); }
.ss-num {
  position: absolute; left: calc(4 * var(--u)); bottom: calc(4 * var(--u)); padding: 0 calc(4 * var(--u));
  border-radius: calc(3 * var(--u)); background: var(--s-tag); color: #FFFFFF;
  font-family: var(--s-mono); font-size: calc(9.5 * var(--u)); line-height: calc(13 * var(--u)); letter-spacing: -0.04em;
}
.ss-card.is-empty .ss-num { background: none; color: var(--s-muted); }
.ss-here {
  position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); display: flex; align-items: center; gap: calc(3 * var(--u));
  padding: 0 calc(6 * var(--u)) 0 calc(4 * var(--u)); border-radius: 999px; background: var(--s-accent); color: #FFFFFF;
  font-size: calc(8.5 * var(--u)); line-height: calc(14 * var(--u)); font-weight: 600; white-space: nowrap;
}
.ss-here .ic { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.ss-mark {
  position: absolute; right: calc(4 * var(--u)); bottom: calc(4 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u));
  display: grid; place-items: center; border-radius: calc(3 * var(--u)); background: var(--s-tag); color: #FFFFFF;
  font-size: calc(9 * var(--u)); font-weight: 700;
}
.ss-ctitle {
  display: block; margin-top: calc(4 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-card.is-current .ss-ctitle { font-weight: 600; }

/* Slide thumbnails, drawn from the made-up course */
.ss-thumb {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u));
  padding: calc(7 * var(--u)) calc(8 * var(--u)); overflow: hidden; border-radius: inherit;
  background: #1F2A44; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(20 32 28 / 20%);
}
.ss-thumb i { display: block; height: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: rgb(255 255 255 / 85%); }
.ss-thumb i.k { width: 28%; height: calc(2.5 * var(--u)); background: #F2906F; }
.ss-thumb i.h { width: 70%; height: calc(5 * var(--u)); }
.ss-thumb i.s { width: 45%; }
.ss-thumb.is-cream { background: #F6F1E7; }
.ss-thumb.is-cream i { background: #1F2A44; }
.ss-thumb.is-cream i.l { background: #B9B2A6; }
.ss-thumb i.o { width: 52%; height: calc(4.5 * var(--u)); border-radius: calc(1.5 * var(--u)); }
.ss-thumb .dial {
  position: absolute; right: calc(8 * var(--u)); top: 50%; width: calc(20 * var(--u)); height: calc(20 * var(--u));
  border: calc(2.5 * var(--u)) solid #E86F4C; border-radius: 50%; transform: translateY(-50%);
}
.ss-card.is-empty .ss-thumb { background: var(--s-sunken); box-shadow: inset 0 0 0 1px var(--s-line); }

.ss-tools { position: absolute; right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ss-tool { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(32 * var(--u)); color: var(--s-ink); }
.ss-tool .ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ss-tool.is-locate {
  height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--s-bg); color: var(--s-accent);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(20 32 28 / 10%), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgb(20 32 28 / 12%);
}
.ss-stack {
  display: flex; flex-direction: column; overflow: hidden; border-radius: calc(10 * var(--u)); background: var(--s-bg);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(20 32 28 / 10%), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgb(20 32 28 / 12%);
}
.ss-stack .ss-tool + .ss-tool { border-top: 1px solid var(--s-line); }

/* The dock: current slide and Unlock seekbar */
.ss-dock { flex: none; border-top: 1px solid var(--s-line); background: var(--s-bg); }
.ss-details { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u)); }
.ss-dock-thumb { position: relative; flex: none; width: calc(72 * var(--u)); height: calc(41 * var(--u)); border-radius: calc(6 * var(--u)); }
.ss-dock-thumb .ss-thumb { box-shadow: none; }
.ss-details-title { flex: 1; min-width: 0; margin-left: calc(2 * var(--u)); }
.ss-details-title b { display: block; font-size: calc(13.5 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 600; }
.ss-details-title > span { display: block; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--s-muted); }
.ss-details .ss-iconbtn { width: calc(30 * var(--u)); height: calc(30 * var(--u)); color: var(--s-muted); }
.ss-details .ss-iconbtn .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ss-seek {
  display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(46 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(16 * var(--u)); border-top: 1px solid var(--s-line); font-size: calc(13 * var(--u));
}
.ss-seek .ss-lock { color: var(--s-accent); }
.ss-seek-label { flex: 1; font-weight: 500; }
.ss-seek-status { font-size: calc(12 * var(--u)); color: var(--s-muted); }
.ss-switch { position: relative; flex: none; width: calc(36 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--s-accent); }
.ss-switch::after {
  content: ""; position: absolute; left: calc(18 * var(--u)); top: calc(2 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u));
  border-radius: 50%; background: #FFFFFF; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / 30%);
}

/* Phones: just the side panel, at its own width. */
@media (max-width: 760px) {
  .app-mock--ss { background: var(--bg); }
  .ss { --u: calc(100cqw / 380); }
  .ss-window { grid-template-rows: calc(466 * var(--u)); width: 100%; }
  .ss-browser, .ss-course { display: none; }
  .ss-split { grid-template-columns: 1fr; }
  .ss-panel { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(18, 32, 43, 0.12); }
}