/* Explain Work Visually popup skin. Layout lives in project-dialog.css.
   Colours are the skill's own report tokens, not the site palette. */

/* Doubled up with .project-visual so these win over the base tile rules. */
.project-visual.visual-explain {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: #151b22;
  text-align: left;
  cursor: pointer;
}

.visual-explain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22,.9,.3,1), filter .3s ease;
}

.visual-explain::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  pointer-events: none;
}

.visual-explain:hover img,
.visual-explain:focus-visible img { transform: scale(1.025); filter: brightness(1.05); }
.visual-explain:focus-visible { z-index: 2; outline: 3px solid #161411; outline-offset: 3px; }

body.ewv-dialog-open { overflow: hidden; }

.ewv-dialog {
  --ewv-cobalt: #3157ff;
  --ewv-paper: #f1efe4;
  --ewv-card: #fffefa;
  --ewv-ink: #151a1d;
  --ewv-muted: #526066;
  --ewv-line: #c5cbc8;
  --ewv-stage: #151b22;
  --ewv-acid: #dfff69;
  color: var(--ewv-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ewv-dialog::backdrop { background: rgba(15, 20, 26, .74); animation: ewv-veil-in .28s ease both; }

.ewv-case {
  border: 1px solid var(--ewv-line);
  background: var(--ewv-paper);
  box-shadow: 0 22px 70px rgba(15, 20, 26, .38);
  animation: ewv-case-in .46s cubic-bezier(.2,.78,.2,1) both;
}

.ewv-case-bar {
  border-bottom: 1px solid var(--ewv-line);
  background: var(--ewv-card);
}

.ewv-wordmark { font: 700 15px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.03em; }
.ewv-wordmark b { color: var(--ewv-cobalt); font-weight: inherit; }
.ewv-case-bar > p { color: var(--ewv-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

.ewv-close {
  border: 1px solid var(--ewv-line);
  color: inherit;
  background: transparent;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ewv-close span { margin-left: 8px; font-size: 19px; vertical-align: -2px; }
.ewv-close:hover, .ewv-close:focus-visible { color: #fff; background: var(--ewv-cobalt); border-color: var(--ewv-cobalt); outline: 0; }
.ewv-close:focus-visible { outline: 2px solid var(--ewv-cobalt); outline-offset: 3px; }

/* Hero: the photograph, on the report's dark stage. */
.ewv-hero {
  border-right: 1px solid var(--ewv-line);
  background: #151b22;
}

/* The caption sits on the lower edge, so the picture is darkened under it. */
.ewv-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -70px 110px rgba(11, 15, 20, .58);
  pointer-events: none;
}

.ewv-hero figcaption {
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .6);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.ewv-copy { background: var(--ewv-card); scrollbar-color: var(--ewv-cobalt) transparent; }
.ewv-copy > h2 { font-size: clamp(36px, 3.6vw, 58px); line-height: .94; letter-spacing: -.055em; font-weight: 400; }
.ewv-summary p { color: #3d474b; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.58; }
.ewv-summary b { background: var(--ewv-acid); font-weight: 400; box-decoration-break: clone; }

.ewv-facts { border: 1px solid var(--ewv-line); background: var(--ewv-line); }
.ewv-facts div { background: var(--ewv-paper); }
.ewv-facts dt { color: var(--ewv-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.ewv-facts dd { font-size: 11px; line-height: 1.35; }

/* Interactive module: the real report, running inside the popup. */
.ewv-report {
  border: 1px solid var(--ewv-line);
  background: var(--ewv-paper);
}

/* The action sits at the top of the head, level with the eyebrow. */
.ewv-report .pj-module-head { align-items: start; flex-wrap: wrap; }

.ewv-eyebrow { display: block; margin: 0 0 7px; color: var(--ewv-cobalt); font-size: 9px; line-height: 1.3; text-transform: uppercase; letter-spacing: .16em; }
.ewv-report h3 { font-size: clamp(20px, 2.1vw, 30px); line-height: .94; letter-spacing: -.05em; font-weight: 400; }
.ewv-report-hint { max-width: 46ch; margin: 9px 0 0; color: var(--ewv-muted); font-size: 10px; line-height: 1.45; }

/* Sends the reader to the same page on its own address, in a new tab. */
.ewv-report-link {
  flex: none;
  padding: 9px 12px;
  border: 1px solid var(--ewv-line);
  background: var(--ewv-card);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  white-space: nowrap;
}

.ewv-report-link span { margin-left: 6px; font-size: 13px; }
.ewv-report-link:hover, .ewv-report-link:focus-visible { color: #fff; background: var(--ewv-cobalt); border-color: var(--ewv-cobalt); outline: 0; }
.ewv-report-link:focus-visible { outline: 2px solid var(--ewv-cobalt); outline-offset: 3px; }

.ewv-frame-wrap {
  position: relative;
  margin-top: 15px;
  border: 1px solid var(--ewv-line);
  background: var(--ewv-paper);
}

.ewv-frame {
  display: block;
  width: 100%;
  height: clamp(420px, 52vh, 620px);
  border: 0;
}

.ewv-notes { border-top: 1px solid var(--ewv-line); }
.ewv-notes > span { color: var(--ewv-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }
.ewv-notes code { color: var(--ewv-ink); font: 11px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; word-break: break-all; }
.ewv-notes p { margin: 0; color: var(--ewv-muted); font-size: 11px; line-height: 1.45; }
.ewv-notes a { color: var(--ewv-ink); font-size: 11px; line-height: 1.4; text-underline-offset: 4px; }

.ewv-dock { border-top: 1px solid var(--ewv-line); background: var(--ewv-card); }

.ewv-cta {
  border: 1px solid var(--ewv-cobalt);
  color: #fff;
  background: var(--ewv-cobalt);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.ewv-cta span { font-size: 19px; }
.ewv-cta:hover, .ewv-cta:focus-visible { color: var(--ewv-cobalt); background: var(--ewv-card); outline: 0; }

@keyframes ewv-veil-in { from { opacity: 0; } }
@keyframes ewv-case-in { from { opacity: 0; transform: translateY(16px) scale(.985); } }

@media (max-width: 900px) {
  .ewv-hero { border-right: 0; border-bottom: 1px solid var(--ewv-line); }
  .ewv-copy > h2 { font-size: clamp(38px, 7vw, 56px); }
}

@media (max-width: 560px) {
  .ewv-case { border-right: 0; border-left: 0; }
  .ewv-close span { margin: 0; font-size: 26px; }
  .ewv-copy > h2 { font-size: 36px; }
  .ewv-summary p { font-size: 14px; line-height: 1.5; }
  .ewv-report h3 { font-size: 22px; }
  .ewv-frame { height: 60vh; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .ewv-hero { border-right: 1px solid var(--ewv-line); border-bottom: 0; }
  .ewv-frame { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-explain img { transition: none; }
  .visual-explain:hover img, .visual-explain:focus-visible img { transform: none; }
  .ewv-dialog::backdrop, .ewv-case { animation: none; }
}