/* CluelessAI, the Windows install guide.
   One component on two pages that share nothing else: the dark homepage, which
   carries its own inline styles, and /windows-help, which runs on styles.css in
   light or dark. So everything here is prefixed wg-, sets its own type and
   colour, and resets the few element styles either page would otherwise leak
   in (p widths, list padding, heading margins). Loaded by windows-guide.js.

   The pictures are drawn, not screenshotted: a screenshot of the real prompt
   goes stale with every Windows update and is unreadable at card size. Each
   one is a container, and everything inside is sized in cqw, so the drawing
   scales as one piece from a phone to the dialog. The amber ring is the same
   mark the app draws around the spot it wants you to click. */

.wg-guide, .wg-dialog {
  --wg-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --wg-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wg-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wg-win: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --wg-amber: #e59a24;
  --wg-amber-hi: #f6b04a;
  --wg-amber-rgb: 229, 154, 36;
}
/* The steps lay themselves out by the width they are given, not the window's:
   the same markup sits in a wide dialog and in a narrow reading column. */
.wg-guide { container: wg-guide / inline-size; }

/* ---------------------------------------------------------------- steps */

.wg-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: none;
}
.wg-step {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  min-width: 0;
}
.wg-step::before { content: none; }

/* The browser's hold comes before the three steps, so in the dialog it sits
   above them with a rule between, as its own row. */
.wg-held {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
  margin: 0 0 1.3rem;
  padding: 0 0 1.3rem;
  border-bottom: 1px solid var(--wg-rule);
}

/* Three across when there is room, which is the dialog on a laptop. The hold
   keeps to the same columns: its picture over step 1's, its words across the
   other two, and a shorter picture so the dialog still fits a laptop. */
@container wg-guide (width >= 44rem) {
  .wg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .wg-held { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 1.4rem; align-items: center; }
}
/* A reading column, like /windows-help: picture beside its words, so the
   drawing stays big enough to read without three screens of scrolling. */
@container wg-guide (28rem <= width < 44rem) {
  .wg-step, .wg-held { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center; gap: 1.1rem; }
}

.wg-cap { min-width: 0; }
.wg-cap-t {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.3rem;
  font: 650 1.02rem/1.25 var(--wg-display);
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.01em;
  color: var(--wg-ink);
  text-wrap: balance;
}
.wg-cap-t b { font-weight: 750; }
.wg-n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  translate: 0 -0.08rem;
  border-radius: 50%;
  background: var(--wg-amber);
  color: #131820;
  font: 700 0.78rem/1 var(--wg-display);
}
.wg-cap p {
  margin: 0;
  max-inline-size: none;
  font: 400 0.93rem/1.5 var(--wg-serif);
  color: var(--wg-ink-2);
  text-wrap: pretty;
}
.wg-cap p b { font-weight: 600; color: var(--wg-ink); }
.wg-cap p + p { margin-top: 0.4rem; }
.wg-cap .wg-cap-alt { font-size: 0.86rem; }
.wg-cap a {
  color: var(--wg-ink);
  text-decoration: underline;
  text-decoration-color: rgba(var(--wg-amber-rgb), 0.85);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.wg-cap a:hover { text-decoration-thickness: 2.5px; }
/* Edge's "..." button, set as a key so it reads as something to press. */
.wg-cap .wg-key {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px solid var(--wg-rule);
  border-radius: 5px;
  font: 700 0.85em/1.35 var(--wg-display);
  letter-spacing: 0.04em;
  vertical-align: 0.05em;
}
.wg-n-first svg { width: 0.85rem; height: 0.85rem; }

.wg-why {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1.4rem 0 0;
  max-inline-size: none;
  padding: 0.85rem 1rem;
  border: 1px solid var(--wg-rule);
  border-radius: 10px;
  font: 400 0.95rem/1.5 var(--wg-serif);
  color: var(--wg-ink);
  text-wrap: pretty;
}
.wg-why svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; color: var(--wg-amber-hi); }

/* ------------------------------------------------------------- pictures */

.wg-shot {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
  /* the desktop behind the prompt, the same wallpaper the homepage demo uses */
  background:
    radial-gradient(60% 70% at 12% 8%, #28406a 0%, transparent 60%),
    radial-gradient(55% 60% at 92% 20%, #1d5360 0%, transparent 62%),
    radial-gradient(70% 60% at 70% 110%, #5a3f1c 0%, transparent 60%),
    linear-gradient(160deg, #141d2c, #0c1119);
  box-shadow: 0 0 0 1px rgba(233, 238, 245, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: var(--wg-win);
  color: #fff;
  user-select: none;
}
.wg-shot * { margin: 0; max-inline-size: none; }

/* SmartScreen: a flat blue panel, light title, a link, buttons at the foot. */
.wg-ss {
  position: absolute;
  inset: 8cqw 7cqw;
  padding: 5cqw 5.5cqw;
  background: linear-gradient(#1766c2, #0f58ad);
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, 0.5);
}
.wg-ss-t { font-size: 5.3cqw; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }
.wg-lines { display: grid; gap: 1.4cqw; margin-top: 3cqw; }
.wg-lines i { display: block; height: 1.3cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.36); }
.wg-lines i:nth-child(1) { width: 92%; }
.wg-lines i:nth-child(2) { width: 70%; }
.wg-link { display: inline-block; margin-top: 3.4cqw; font-size: 4.3cqw; text-decoration: underline; text-underline-offset: 0.5cqw; }
.wg-meta { display: grid; grid-template-columns: auto 1fr; gap: 1cqw 2.4cqw; margin-top: 3cqw; font-size: 3.5cqw; line-height: 1.25; }
.wg-meta dt { font-weight: 400; opacity: 0.78; }
.wg-meta dd { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-meta .wg-pub { color: #fff; box-shadow: inset 0 -0.6cqw 0 rgba(var(--wg-amber-rgb), 0.9); }
.wg-ss-btns { position: absolute; right: 5cqw; bottom: 4.4cqw; display: flex; gap: 2cqw; }
.wg-wbtn {
  display: inline-block;
  padding: 1.3cqw 3.2cqw;
  font-size: 3.6cqw;
  line-height: 1.2;
  white-space: nowrap;
  border: 0.35cqw solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

/* The mark: the ring and numbered badge the app draws around the thing to
   click, set on the one control that matters in each picture. */
.wg-hit { position: relative; display: inline-block; }
.wg-hit::after {
  content: "";
  position: absolute;
  inset: -1.3cqw -1.8cqw;
  border-radius: 1.4cqw;
  border: 0.35cqw solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 0.7cqw rgba(var(--wg-amber-rgb), 0.85), 0 0 4cqw rgba(var(--wg-amber-rgb), 0.6);
  pointer-events: none;
}
.wg-hit > b {
  position: absolute;
  z-index: 1;
  top: -1.3cqw;
  left: -1.8cqw;
  width: 5.6cqw;
  height: 5.6cqw;
  display: grid;
  place-items: center;
  translate: -45% -45%;
  border-radius: 50%;
  background: var(--wg-amber);
  color: #131820;
  font: 700 3.2cqw/1 var(--wg-display);
  text-decoration: none;
  box-shadow: 0 0.4cqw 1.4cqw rgba(0, 0, 0, 0.45);
}
.wg-cursor {
  position: absolute;
  z-index: 2;
  width: 3.8cqw;
  height: auto;
  filter: drop-shadow(0 0.3cqw 0.5cqw rgba(0, 0, 0, 0.5));
}
.wg-shot-1 .wg-cursor { left: 27cqw; top: 38.5cqw; }
.wg-shot-2 .wg-cursor { left: 62cqw; top: 51.5cqw; }

/* Edge's download flyout: a light panel, the held file with only Delete
   showing, and the menu "..." opens with Keep in it. */
.wg-shot-0 { aspect-ratio: 16 / 9; }
.wg-edge {
  position: absolute;
  left: 5cqw;
  top: 6cqw;
  width: 76cqw;
  padding: 2.8cqw 3cqw 3.2cqw;
  background: #f9f9fb;
  color: #1b1b1f;
  border-radius: 1.6cqw;
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, 0.5), 0 0 0 0.25cqw rgba(0, 0, 0, 0.2);
}
.wg-edge-t { font-size: 3.7cqw; font-weight: 600; line-height: 1.2; }
.wg-edge-row { display: flex; align-items: flex-start; gap: 2.2cqw; margin-top: 2.4cqw; padding: 2.4cqw; background: #ececf1; border-radius: 1.2cqw; }
.wg-warn { flex: none; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #f3c541; color: #1b1b1f; font-size: 3.6cqw; font-weight: 700; line-height: 1; }
.wg-edge-txt { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 0.6cqw; font-size: 3.3cqw; line-height: 1.25; color: #55555d; white-space: nowrap; }
.wg-edge-txt .wg-file { max-width: 100%; font-size: 3.4cqw; font-weight: 600; color: #1b1b1f; overflow: hidden; text-overflow: ellipsis; }
.wg-edge-act { display: flex; align-items: center; gap: 1.4cqw; margin-top: 1.6cqw; }
.wg-edge-del { padding: 1cqw 2.4cqw; font-size: 3.2cqw; line-height: 1.2; background: #fff; border: 0.3cqw solid rgba(0, 0, 0, 0.18); border-radius: 1cqw; }
.wg-edge-more { display: grid; place-items: center; width: 7cqw; height: 5.6cqw; border-radius: 1cqw; background: rgba(0, 0, 0, 0.14); box-shadow: inset 0 0 0 0.3cqw rgba(0, 0, 0, 0.12); }
.wg-dots { width: 3.6cqw; height: auto; fill: #1b1b1f; }
.wg-menu {
  position: absolute;
  left: 52cqw;
  top: 29cqw;
  display: grid;
  padding: 1.3cqw;
  background: #fff;
  color: #1b1b1f;
  border-radius: 1.6cqw;
  box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, 0.55), 0 0 0 0.25cqw rgba(0, 0, 0, 0.14);
  font-size: 3.6cqw;
  line-height: 1.2;
}
.wg-menu > span { display: block; padding: 1.2cqw 3cqw; white-space: nowrap; }
.wg-menu > span:first-child, .wg-menu > span:last-child { color: #55555d; }
.wg-menu .wg-hit::after { inset: 0; border-radius: 1cqw; }
.wg-shot-0 .wg-cursor { left: 66cqw; top: 40.5cqw; }

/* Setup: a plain light window with a progress bar, which is all anyone
   remembers of an installer. */
.wg-setup {
  position: absolute;
  inset: 7cqw 9cqw;
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
  color: #1b1f24;
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, 0.5), 0 0 0 0.25cqw rgba(0, 0, 0, 0.25);
  border-radius: 1.2cqw;
  overflow: hidden;
}
.wg-setup-bar { display: flex; align-items: center; gap: 1.6cqw; height: 6.4cqw; padding-inline: 2.4cqw; background: #fff; font-size: 2.7cqw; }
.wg-setup-bar .wg-ico { width: 3.4cqw; height: 3.4cqw; }
.wg-setup-bar em { margin-left: auto; font-style: normal; letter-spacing: 2cqw; opacity: 0.55; font-size: 2.4cqw; }
.wg-setup-body { flex: 1; padding: 3.6cqw 4cqw 0; }
.wg-setup-t { font-size: 3.7cqw; font-weight: 600; }
.wg-setup-body .wg-lines { margin-top: 2cqw; }
.wg-setup-body .wg-lines i { background: rgba(27, 31, 36, 0.16); }
.wg-progress { height: 2.6cqw; margin-top: 4cqw; border: 0.25cqw solid rgba(27, 31, 36, 0.25); background: #e2e5ea; border-radius: 1.3cqw; overflow: hidden; }
.wg-progress i { display: block; width: 64%; height: 100%; background: linear-gradient(90deg, #1f8f3a, #2fb04d); }
.wg-setup-foot { display: flex; justify-content: flex-end; gap: 1.6cqw; padding: 2.6cqw 3cqw; border-top: 0.25cqw solid rgba(27, 31, 36, 0.1); }
.wg-setup-foot span { padding: 1cqw 3cqw; font-size: 2.6cqw; border: 0.25cqw solid rgba(27, 31, 36, 0.3); border-radius: 0.8cqw; background: #fff; }
.wg-setup-foot span:first-child { color: rgba(27, 31, 36, 0.45); }

/* ----------------------------------------------- on /windows-help itself */

.wg-inline {
  --wg-ink: var(--ink, #131820);
  --wg-ink-2: var(--ink-2, #48525f);
  --wg-rule: var(--rule, #c6cfda);
  margin: 1.6rem 0 2rem;
}
.wg-inline .wg-why svg { color: var(--signal, var(--wg-amber)); }
/* On the page the hold has a heading of its own, so no rule under it. */
.wg-inline .wg-held { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* --------------------------------------------------------------- dialog */

/* Dark on both pages: a dimmed screen with one card on it is the product's
   own picture, and the pictures inside are dark desktops either way. */
.wg-dialog {
  --wg-ink: #eef2f7;
  --wg-ink-2: #a9b3c1;
  --wg-rule: rgba(233, 238, 245, 0.14);
  box-sizing: border-box;
  width: min(62rem, 100vw - 2rem);
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--wg-ink);
  background: #121821;
  border: 1px solid rgba(233, 238, 245, 0.16);
  border-radius: 18px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}
.wg-dialog *, .wg-dialog *::before, .wg-dialog *::after { box-sizing: border-box; }
.wg-dialog::backdrop { background: rgba(5, 10, 20, 0.74); }
.wg-dialog :focus-visible { outline: 2px solid var(--wg-amber-hi); outline-offset: 3px; border-radius: 6px; }

.wg-body { padding: clamp(1.25rem, 3.4vw, 2.25rem) clamp(1.1rem, 3.4vw, 2.5rem) 0; }
.wg-head { position: relative; padding-right: 2.75rem; margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem); }
.wg-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  max-inline-size: none;
  font: 500 0.74rem/1.3 var(--wg-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wg-ink-2);
}
.wg-eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wg-amber-hi); box-shadow: 0 0 10px rgba(var(--wg-amber-rgb), 0.7); }
.wg-title {
  margin: 0;
  max-inline-size: 34ch;
  font: 760 clamp(1.4rem, 1.1rem + 1.3vw, 2.05rem)/1.08 var(--wg-display);
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.03em;
  color: var(--wg-ink);
  text-wrap: balance;
}
.wg-x {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(233, 238, 245, 0.16);
  border-radius: 50%;
  background: rgba(233, 238, 245, 0.04);
  color: var(--wg-ink-2);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.wg-x:hover { color: var(--wg-ink); border-color: rgba(233, 238, 245, 0.38); background: rgba(233, 238, 245, 0.08); }
.wg-x svg { display: block; width: 14px; height: 14px; }

/* Stays on screen while a phone scrolls through the steps, so the way out is
   never three thumbs away. */
.wg-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  margin: 1.2rem 0 0;
  padding: 1rem clamp(1.1rem, 3.4vw, 2.5rem) clamp(1.1rem, 2.6vw, 1.5rem);
  background: #121821;
  border-top: 1px solid rgba(233, 238, 245, 0.09);
}
.wg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.7em 1.8em;
  border: 0;
  border-radius: 11px;
  background: #eef2f7;
  color: #0b0e14;
  font: 600 0.98rem/1 var(--wg-display);
  font-variation-settings: "wdth" 106;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px -12px rgba(233, 238, 245, 0.45);
  transition: background-color 160ms ease;
}
.wg-btn:hover { background: #fff; }
.wg-fine {
  margin: 1rem 0 0;
  max-inline-size: none;
  font: 400 0.8rem/1.6 var(--wg-mono);
  color: #8e98a7;
  text-wrap: pretty;
}
.wg-fine a { color: var(--wg-ink); text-underline-offset: 3px; }
.wg-fine a:hover { color: var(--wg-amber-hi); }

@media (max-width: 34rem) {
  .wg-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: 14px; }
  .wg-foot { padding-block: 0.75rem; }
  .wg-btn { flex: 1 1 100%; }
}

/* Page scroll stays put underneath while the guide is open. The gutter is
   kept so a Windows scrollbar disappearing does not shove the page sideways. */
html.wg-lock { overflow: hidden; scrollbar-gutter: stable; }

@media (prefers-reduced-motion: no-preference) {
  .wg-dialog[open] { animation: wg-rise 320ms cubic-bezier(0.16, 1, 0.3, 1); }
  .wg-dialog[open]::backdrop { animation: wg-fade 240ms ease; }
  .wg-dialog[open] .wg-hit::after { animation: wg-ring 1.6s ease-in-out 480ms 3; }
  .wg-dialog[open] .wg-step:nth-child(1) .wg-hit::after { animation-delay: 1s; }
  .wg-dialog[open] .wg-step:nth-child(2) .wg-hit::after { animation-delay: 1.5s; }
  @keyframes wg-rise { from { opacity: 0; translate: 0 14px; scale: 0.985; } }
  @keyframes wg-fade { from { opacity: 0; } }
  @keyframes wg-ring {
    50% { box-shadow: 0 0 0 1.3cqw rgba(var(--wg-amber-rgb), 0.55), 0 0 6cqw rgba(var(--wg-amber-rgb), 0.75); }
  }
}

@media (forced-colors: active) {
  .wg-dialog { border-color: CanvasText; }
  .wg-hit::after { border-color: Highlight; }
  .wg-shot { border: 1px solid CanvasText; }
}