/* ProTitser install guide (/install.html) — loaded after styles.css. A PICTURE guide for teachers who are not at home
   with computers (Rom 2026-10-03: "graphical, so it would be easy for a non-techy user"): every thing to press is one
   picture (.g-frame) with a gold ring and a pointer on the part to press, and one short line under it. The pictures
   are small drawings of what Windows shows, in Windows' own light colours in both themes (like the other .mock-*
   drawings in styles.css). /ProTitser-Install-Guide.pdf is this page printed on A4 by scripts/make-install-guide.mjs. */
.g-main { max-width: 1040px; padding-top: 36px; padding-bottom: 56px; }
.g-main p { margin: 0; }
.g-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; color: var(--brand-ink); font-size: var(--fs-sm); font-weight: 600; }
.g-kicker img { border-radius: 5px; }
.g-head h1 { margin: 0 0 10px; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem); line-height: 1.15; }
.g-lead { max-width: 44rem; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.g-ring { padding: 1px 7px; border: 2px solid var(--gold); border-radius: 6px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.g-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 480px) { .g-tools .btn { flex: 1 1 100%; } }

/* the five steps at a glance: icon, number, two words — joined by a line */
.g-road { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 24px 0 0; padding: 14px 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); list-style: none; }
.g-road li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; text-align: center; }
.g-road li + li::before { content: ""; position: absolute; top: 20px; right: calc(50% + 26px); left: calc(-50% + 26px); border-top: 2px solid var(--brand-soft-2); }
.g-road .ico { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.g-road b { color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 560px) { .g-road { padding: 12px 2px; } .g-road li { font-size: .6875rem; } .g-road .ico { width: 34px; height: 34px; padding: 8px; } .g-road li + li::before { top: 17px; right: calc(50% + 21px); left: calc(-50% + 21px); } }

.g-note { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-lg); background: var(--surface); }
.g-note h2, .g-blocked > h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 1.0625rem; }
.g-note h2 .ico, .g-blocked > h2 .ico { color: var(--brand-ink); }
.g-note p { color: var(--ink-2); font-size: .9375rem; }
.g-help { margin-top: 28px; }

/* one step: a big number and title, then its pictures in a row */
.g-step { margin-top: 16px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); break-inside: avoid; }
@media (max-width: 640px) { .g-step { padding: 14px; } }
.g-step > h2, .g-step > h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.25rem; line-height: 1.25; }
.g-step > h2 .n, .g-step > h3 .n { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 1.0625rem; font-weight: 600; }
.g-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .g-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g-frames { grid-template-columns: minmax(0, 1fr); } }
.g-frame { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); break-inside: avoid; }
.g-shot { display: grid; place-items: center; flex: 1 0 auto; min-height: 176px; padding: 18px 16px; background: var(--surface-3); border-bottom: 1px solid var(--line); overflow: hidden; }
.g-frame figcaption { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 14px; color: var(--ink-1); font-size: .9375rem; line-height: 1.45; }
.g-frame figcaption > b { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 600; }
.g-frame strong { color: var(--ink); font-weight: 600; }
/* the "switch it back on" picture: a green edge so it is not skipped */
.g-back { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.g-back figcaption > b { background: var(--ok); box-shadow: none; color: var(--surface); }

.g-jump, .g-warn { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0 !important; padding: 10px 12px; border-radius: var(--r); font-size: var(--fs-md); line-height: 1.5; }
.g-jump { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.g-jump .ico { margin-top: 2px; color: var(--brand-ink); }
.g-warn { border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); color: var(--ink-1); }
.g-warn .ico { margin-top: 2px; color: var(--warn); }
.g-icons { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.g-icons li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-1); font-size: .9375rem; line-height: 1.5; }
.g-icons .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.g-icons span { padding-top: 5px; }

.g-blocked { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.g-blocked > h2 { font-size: 1.375rem; }
.g-blocked > .g-lead { font-size: 1rem; }
.g-sub > h3 .n { background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 2px var(--brand); }

/* ---- the pointer on the part to press */
.cur { position: absolute; right: -9px; bottom: -13px; z-index: 2; width: 18px !important; height: 18px !important; color: #17201B; fill: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.g-shot .mock-hot::after { border-width: 2.5px; }

/* ---- drawings (Windows' own light colours) */
.g-shot .mock-edge, .g-shot .mock-smart { max-width: 264px; }
.mock-setup, .mock-props, .mock-ws, .mock-uac, .mock-web, .mock-folder, .mock-start, .mock-menu { width: 100%; max-width: 264px; border: 1px solid #DADADA; border-radius: 8px; background: #fff; color: #1B1B1B; font-size: 10.5px; line-height: 1.35; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.mock-setup, .mock-props { padding: 12px 12px 10px; }
.mock-setup b, .mock-props b { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.mock-setup .bar { display: block; height: 9px; border: 1px solid #C8C8C8; border-radius: 2px; background: #EFEFEF; overflow: hidden; }
.mock-setup .bar i { display: block; width: 62%; height: 100%; background: #187A48; }
.mock-setup small { display: block; margin-top: 4px; color: #5E5E5E; }
.mock-setup small.ok { display: flex; align-items: center; gap: 5px; color: #347D29; font-weight: 600; }
.mock-setup small.ok .ico { width: 13px; height: 13px; }
.mock-setup .ms-foot, .mock-props .ms-foot, .mock-uac .ms-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.mock-setup .ms-btn, .mock-props .ms-btn, .mock-uac .ms-btn { padding: 4px 14px; border: 1px solid #B8B8B8; border-radius: 4px; background: #fff; font-weight: 500; }
.mock-setup .ms-btn.hot, .mock-props .ms-btn.hot, .mock-uac .ms-btn.hot { border-color: #0F5CA8; box-shadow: inset 0 0 0 1px #0F5CA8; }
.mock-props .tabs { display: flex; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid #DADADA; }
.mock-props .tabs i { padding: 3px 8px; border: 1px solid #DADADA; border-bottom: 0; border-radius: 3px 3px 0 0; background: #F3F3F3; color: #5E5E5E; font-style: normal; }
.mock-props .tabs i.on { margin-bottom: -1px; background: #fff; color: #1B1B1B; }
.mock-props p { margin: 0 0 8px; color: #5E5E5E; }
.mock-props label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mock-props .box { display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid #0F5CA8; border-radius: 2px; background: #0F5CA8; color: #fff; font-size: 9px; line-height: 1; }
.mock-props .mock-hot::after { inset: -4px -6px; border-radius: 6px; }
/* the yes/no box */
.mock-uac { overflow: hidden; padding: 0 12px 10px; }
.uac-bar { display: block; margin: 0 -12px 10px; padding: 6px 12px; background: #0F5CA8; color: #fff; font-size: 10px; }
.mock-uac b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.mock-uac small { color: #5E5E5E; }
/* the website */
.mock-web { overflow: hidden; }
.web-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #F3F3F3; border-bottom: 1px solid #E5E5E5; color: #5E5E5E; font-size: 10px; }
.web-bar i { width: 9px; height: 9px; border-radius: 50%; background: #187A48; }
.web-body { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px 12px 18px; }
.web-line { width: 78%; height: 7px; border-radius: 4px; background: #D9E1DC; }
.web-line.w2 { width: 54%; }
.web-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 12px; border-radius: 4px; background: #187A48; color: #fff; font-size: 11px; font-weight: 600; }
.web-btn > .ico:first-child { width: 13px; height: 13px; }
/* a folder */
.mock-folder { overflow: hidden; padding-bottom: 6px; }
.fo-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 6px 10px; background: #F3F3F3; border-bottom: 1px solid #E5E5E5; font-weight: 600; }
.fo-bar .ico { width: 13px; height: 13px; color: #B7790B; }
.fo-row { display: flex; align-items: center; gap: 8px; min-height: 26px; margin: 2px 8px; padding: 3px 6px; border-radius: 4px; }
.fo-row.on { background: #DDEBFA; }
.fo-row b { min-width: 0; font-weight: 600; word-break: break-all; }
.fo-row .fi { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 4px; background: #E2F3E9; color: #187A48; }
.fo-row .fi .ico { width: 13px; height: 13px; }
.fo-row .fi.zip { background: #FDF6E3; color: #B7790B; }
.fo-row .fi.pdf { background: #FDEEEC; color: #B42318; }
.fo-row .fi.run { background: #187A48; color: #fff; }
.mock-menu.in { width: auto; margin: 2px 8px 2px 38px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.mock-setup .path { display: block; margin-top: 6px; padding: 4px 8px; border: 1px solid #C8C8C8; border-radius: 3px; font-family: var(--mono); font-size: 10px; }
.g-shot .mock-input { white-space: nowrap; overflow: hidden; }
.fo-line { width: 70%; height: 7px; border-radius: 4px; background: #E5E5E5; }
.fo-line.w2 { width: 48%; }
.mock-folder .mock-hot::after { inset: -2px; border-radius: 6px; }
/* the right-click menu */
.mock-menu { display: grid; max-width: 190px; padding: 4px; }
.mock-menu span { padding: 5px 10px; border-radius: 4px; font-size: 11px; }
.mock-menu span.on { background: #EDEDED; font-weight: 600; }
.mock-menu .mock-hot::after { inset: -1px; border-radius: 6px; }
/* Start search */
.mock-start { display: grid; gap: 6px; padding: 10px; }
.st-search { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #C8C8C8; border-bottom: 2px solid #0F5CA8; border-radius: 4px; font-size: 11px; }
.st-search .ico { width: 12px; height: 12px; color: #5E5E5E; }
.mock-start > small { color: #5E5E5E; font-weight: 600; }
.st-hit { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 4px; background: #EDEDED; }
.st-hit b { display: block; font-size: 11.5px; font-weight: 600; }
.st-hit small { color: #5E5E5E; }
.st-ico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 4px; background: #0F5CA8; color: #fff; }
.st-ico .ico { width: 15px; height: 15px; }
.mock-start .mock-hot::after { inset: -2px; border-radius: 6px; }
/* Windows Security */
.mock-ws { overflow: hidden; padding: 0 12px 10px; }
.ws-bar { display: block; margin: 0 -12px 10px; padding: 6px 12px; background: #F3F3F3; border-bottom: 1px solid #E5E5E5; color: #5E5E5E; font-size: 10px; }
.mock-ws > b { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.ws-nav { display: grid; gap: 2px; }
.ws-nav span { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; }
.ws-nav span.on { background: #EDEDED; font-weight: 600; }
.ws-nav .ico:not(.cur) { width: 13px; height: 13px; color: #5E5E5E; }
.ws-h { display: block; font-size: 11px; font-weight: 600; }
.ws-p { display: block; margin: 3px 0 8px; color: #5E5E5E; font-size: 9.5px; }
.ws-link { display: inline-block; color: #0F5CA8; font-weight: 600; text-decoration: underline; }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #EDEDED; }
.ws-row strong { display: block; font-weight: 600; }
.ws-row small { display: block; color: #5E5E5E; font-size: 9.5px; }
.ws-row em { width: 18px; color: #5E5E5E; font-style: normal; }
.ws-sw { position: relative; width: 30px; height: 15px; border-radius: 999px; background: #0F5CA8; }
.ws-sw i { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.ws-sw.off { background: #fff; box-shadow: inset 0 0 0 1px #5E5E5E; }
.ws-sw.off i { right: auto; left: 3px; background: #5E5E5E; }
.ws-radio { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 500; }
.ws-radio .dot { width: 12px; height: 12px; border: 1px solid #5E5E5E; border-radius: 50%; }
.ws-radio .dot.on { border: 4px solid #0F5CA8; }
.mock-ws .mock-hot::after { inset: -2px -6px; border-radius: 6px; }
.ws-three { position: relative; }
.ws-three .ws-row:first-child { border-top: 0; }
.mock-ws .ws-link.mock-hot::after { inset: -4px -6px; }
/* the free trial card and the small License screen */
.mock-trial { display: grid; justify-items: center; gap: 4px; padding: 16px 22px; border: 1px solid #D9E1DC; border-radius: 8px; background: #fff; color: #56625B; font-size: 11px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.mock-trial .ico { width: 30px; height: 30px; color: #187A48; stroke-width: 1.6; }
.mock-trial b { color: #17201B; font-size: 14px; font-weight: 600; }
.g-shot .mock-win { width: 100%; max-width: 264px; }
.g-shot .mock-body { grid-template-columns: 54px 1fr; min-height: 104px; }
.g-shot .mock-app-ico { padding: 8px 14px; color: #17201B; }
.g-shot .mock-app-ico.mock-hot::after { inset: -2px; border-radius: 8px; }

/* ---- paper: the guide alone, black on white, drawings in colour, three pictures a row */
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  html.loading body { opacity: 1 !important; }
  .site-header, .site-footer, .g-tools, .skip, .scrim { display: none !important; }
  .g-main { max-width: none; padding: 0; }
  .g-head h1 { font-size: 22pt; }
  .g-lead { font-size: 11pt; }
  .g-road { margin-top: 12px; padding: 10px 4px; }
  .g-note { margin-top: 10px; padding: 10px 14px; }
  .g-step { margin-top: 10px; padding: 12px 14px 14px; }
  .g-step > h2, .g-step > h3 { margin-bottom: 10px; font-size: 14pt; }
  .g-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .g-shot { min-height: 150px; padding: 12px 10px; }
  .g-frame figcaption { padding: 8px 10px 10px; font-size: 9.5pt; }
  .g-blocked { margin-top: 14px; padding-top: 12px; }
  .g-blocked > h2 { break-after: avoid; }
  .mock-hot::after { animation: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}