/* The walkthrough. An orange pencil layer drawn over the working shop.
   It is off by default, it owns no space in the layout, and removing it
   changes nothing about the page underneath. */

:root {
  --pencil: #C93F12;
  --pencil-wash: #FFE3D4;
  --font-hand: 'Shantell', 'Bradley Hand', cursive;
}

.ps-doc { position: relative; }

/* ---------- the layer ---------- */
.ps-guide-layer,
.ps-guide-notes {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 55;
}
.ps-guide-layer { overflow: visible; color: var(--pencil); }
.ps-doc[data-guide="off"] .ps-guide-layer,
.ps-doc[data-guide="off"] .ps-guide-notes { display: none; }

.ps-guide-layer path,
.ps-guide-layer ellipse { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ps-mark__pass { stroke-width: 2.2; }
.ps-mark__pass--second { stroke-width: 1.2; opacity: .6; }
.ps-mark__head { stroke-width: 2.4; }
.ps-guide-layer .ps-mark__wash { fill: var(--pencil-wash); stroke: none; opacity: .9; mix-blend-mode: multiply; }
.ps-mark__num { fill: currentColor; stroke: none; font-family: var(--font-num); font-size: 13px; font-weight: 600; }
.ps-mark { transition: opacity var(--dur-slow) var(--ease); }
.ps-mark[data-state="past"] { opacity: .72; }
.ps-mark[data-state="ahead"] { opacity: .85; }
.ps-mark[data-state="live"] { opacity: 1; }
.ps-mark[data-state="live"] .ps-mark__head { stroke-width: 3; }

.ps-mark--drawing path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.ps-mark--drawn path { animation: ps-draw var(--dur-draw, 620ms) cubic-bezier(0, 0, 0, 1) forwards; }
.ps-mark--drawn path:nth-child(2) { animation-delay: 90ms; }
@keyframes ps-draw { to { stroke-dashoffset: 0; } }

/* ---------- a note ----------
   It sits over live content, including photography, so it carries its own
   ground. Without one the hand is unreadable the moment it crosses an image. */
.ps-gnote {
  position: absolute;
  width: 232px;
  padding: 12px 14px 13px;
  background: rgba(255, 253, 250, .96);
  border: 1px solid #F3C9B4;
  box-shadow: 0 8px 22px rgba(20, 20, 18, .1);
  color: var(--pencil);
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 1.38;
  transition: opacity var(--dur-slow) var(--ease);
}
.ps-gnote__n {
  display: inline-grid; place-items: center;
  width: 25px; height: 25px; margin-bottom: 7px;
  font-family: var(--font-num); font-size: 12px; font-weight: 600;
  background: center / 100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17.4 2.8C25 2.4 31.6 8 31.8 16.2c.2 8.6-5.8 14.9-14 15.2C9.3 31.7 2.6 26.2 2.4 17.7 2.2 9.6 8.6 3.2 17.4 2.8Z' fill='none' stroke='%23C93F12' stroke-width='1.6'/%3E%3C/svg%3E");
}
.ps-gnote__t { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 2px; }
.ps-gnote__b { display: block; font-weight: 400; }

@media (max-width: 749px) { .ps-gnote { width: min(252px, calc(100vw - 32px)); font-size: 14.5px; } }

/* ---------- the switch ---------- */
.ps-guide-fab {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--ink); color: #FFFFFF;
  border: 0; border-radius: var(--r-pill);
  box-shadow: 0 6px 20px rgba(20, 20, 18, .24);
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ps-guide-fab:hover { background: #2E2B27; transform: translateY(-1px); }
.ps-guide-fab[aria-pressed="true"] { background: var(--pencil); }

/* ---------- the empty app slot ---------- */
.ps-slot-empty {
  margin: 0;
  padding: 14px 16px;
  border: 1.5px dashed var(--pencil);
  color: var(--pencil);
  font-family: var(--font-hand);
  font-size: 14.5px;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .ps-mark--drawing path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .ps-mark--drawn path { animation: none; }
}

@media print {
  .ps-guide-layer, .ps-guide-notes, .ps-guide-fab { display: none !important; }
}