/* Zero Trust case page (11.10.2026): additions to style.css, same tokens. Page map: ../../zero-trust-page-map.md */

/* live graphics sit on the page ground in a thin frame (same idea as the AI case) */
.window.live { background: var(--color-surface-page); padding: var(--s4); }

/* world map: dotted land from her own map, shields drawn on top (illustration, no labels) */
.zmap { position: relative; }
.zmap > img { display: block; width: 100%; height: auto; }
.zmap-over { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zmap .arc { fill: none; stroke: var(--color-content-secondary); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.zmap .shield { fill: #fff; stroke: var(--color-content-primary); stroke-width: 1.6; stroke-linejoin: round; }
.zmap .hub .shield { fill: var(--color-accent-lime); }
.zmap .glyph { fill: none; stroke: var(--color-content-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zmap .hub .dot { fill: #fff; }

/* problem: the two flows under the map, live, steps joined by a thin line with an arrowhead */
.pflows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.pf-head { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: center; text-align: center; } /* 15.10, her note: the "User flows" title is centered together with the caption under it, like the flow titles below */
.pf-head p { margin: 0; }
.pf-cap { max-width: var(--measure); margin-inline: auto; text-align: center; font-style: italic; font-size: var(--t-14); line-height: 1.5; color: var(--color-content-secondary); } /* same caption style as every case (13.10) */
.pflow { display: grid; gap: var(--s2); align-content: start; justify-items: center; }
.pflow .diagram-title { justify-self: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; justify-items: stretch; width: 100%; max-width: 248px; }
.steps li { position: relative; padding: 8px 12px; border-radius: var(--radius-s); background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); font: 500 var(--t-14)/1.3 var(--font-body); text-align: center; }
.steps li + li { margin-top: var(--s2); }
.steps li + li::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--s2)); height: var(--s2); width: 1px; background: var(--color-content-secondary); }
.steps li + li::after { content: ""; position: absolute; left: 50%; top: -8px; width: 7px; height: 7px; border-right: 1px solid var(--color-content-secondary); border-bottom: 1px solid var(--color-content-secondary); transform: translateX(-50%) rotate(45deg); }
.steps li.start { background: var(--color-content-primary); box-shadow: none; color: #fff; }
.steps li.end { background: var(--color-accent-lime); box-shadow: none; color: var(--color-accent-on-lime); font-weight: 600; }

/* Process and Approach: head, paragraph and graphic sit closer (her review 11.10: the 88 px gap under the lead was too big) */
.approach.zt-tight { gap: var(--s4); }
.approach.zt-tight .sec-head { margin-bottom: 0; }
.approach.zt-tight .measure + .circles, .approach.zt-tight .measure + .zt-personas { margin-top: var(--s2); }

/* approach: two persona cards, each with its own flow inside the card */
.zt-intro { margin: 0; }
.zt-personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; gap: 0 var(--s2); }
.zt-persona { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface-subtle); padding: var(--s3); display: grid; gap: var(--s2); grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s2); align-content: start; }
.zt-persona header { display: flex; align-items: center; gap: var(--s2); }
.zt-persona .who { display: grid; gap: var(--s1); justify-items: start; }
.zt-persona p { margin: 0; color: var(--color-content-secondary); }
.zt-persona .chal .label { margin: 0 0 var(--s1); font-size: var(--t-16); font-weight: 600; color: var(--color-content-primary); } /* 15.10: 16px semibold, one step below the 20px Problem / Decision / Why headings */
.zt-persona .chal ul { margin: 0; padding-left: var(--s3); color: var(--color-content-secondary); }
.zt-persona blockquote { margin: 0; padding-top: var(--s2); border-top: 1px solid var(--color-line); }

/* design: a short text with its screen under it */
.zstep { display: grid; gap: var(--s3); margin-top: var(--s6); }
.zstep > p, .zstep > h3 { margin: 0; }
.zstep .fig { margin: 0; }
section > .fig.first { margin-top: var(--s4); }

/* primary filters table, live on the light ground */
.ptable-wrap { border: 1px solid var(--color-line); border-radius: var(--radius-s); background: var(--color-surface-page); overflow: hidden; }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--t-14); line-height: 1.5; }
.ptable th { text-align: left; font-weight: 500; color: var(--color-content-secondary); padding: var(--s2) var(--s3); }
.ptable td { padding: var(--s2) var(--s3); border-top: 1px solid var(--color-line); vertical-align: top; }
.ptable td:first-child { font-weight: 600; }
.ptable td:nth-child(3) { color: var(--color-content-secondary); }

/* one screen with its caption, in a single column */
.shots.one { grid-template-columns: 1fr; }
.shots.one .shot-frame img { max-height: none; }


@media (max-width: 900px) {
  .pflows, .zt-personas { grid-template-columns: 1fr; }
  .zt-personas { grid-template-rows: none; row-gap: var(--s2); }
  .zt-persona { grid-row: auto; grid-template-rows: auto; }
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; }
  .ptable tr { padding: var(--s2) var(--s3); border-top: 1px solid var(--color-line); }
  .ptable tr:first-child { border-top: 0; }
  .ptable td { border: 0; padding: 2px 0; }
  .ptable td::before { content: attr(data-label) ": "; color: var(--color-content-secondary); font-weight: 400; }
  .ptable td:first-child::before { content: ""; }
  .window.live { padding: var(--s2); }
}

/* map motion (her review 11.10): the dashed lines are drawn from the hub to the sites once, when the map comes into view, and each site appears as its line arrives.
   Only under .js-reveal, so reduced motion and no JS show the finished map. Opacity and stroke only (the site groups keep their position attribute). */
.js-reveal .zmap .reveal { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-reveal .fig.is-in .zmap .reveal { animation: zt-draw 2000ms cubic-bezier(0.45, 0.05, 0.3, 1) 500ms forwards; }
.js-reveal .fig.is-in .zmap .r2 { animation-delay: 750ms; }
.js-reveal .fig.is-in .zmap .r3 { animation-delay: 1000ms; }
.js-reveal .fig.is-in .zmap .r4 { animation-delay: 1250ms; }
.js-reveal .fig.is-in .zmap .r5 { animation-delay: 1500ms; }
/* the travelling dot: hidden until its motion starts, then lime with a dark ring (same look as the good marker in the AI chart) */
.zmap .pulse { fill: var(--color-accent-lime); stroke: var(--color-content-primary); stroke-width: 1.5; opacity: 0; }
.zmap .pulse.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .zmap .pulses { display: none; } }

/* flows left to right on wide screens (her note 11.10: the vertical flows still took too much space). Phones and narrow windows keep the vertical list. */
@media (min-width: 1100px) {
  .pflows { grid-template-columns: 1fr; gap: var(--s3); }
  .pflow { justify-items: stretch; }
  .steps { display: flex; flex-direction: row; align-items: stretch; max-width: none; width: 100%; gap: var(--s3); }
  .steps li { flex: 1 1 0; min-width: 0; display: grid; place-items: center; }
  .steps li + li { margin-top: 0; }
  .steps li + li::before { left: calc(-1 * var(--s3)); top: 50%; width: var(--s3); height: 1px; }
  .steps li + li::after { left: -8px; top: 50%; border: 0; border-top: 1px solid var(--color-content-secondary); border-right: 1px solid var(--color-content-secondary); transform: translateY(-50%) rotate(45deg); }
}
@keyframes zt-draw { to { stroke-dashoffset: 0; } }

/* World map on phones (15.10, her request: "the animation is really small, can it zoom in?"): the whole map is 1023 units wide but the hub and the five sites only fill x 240 to 920 and y 160 to 490. Up to 700px the frame shows just that part, about 1.5x larger, and the frame padding drops from 32px to 16px. The picture and the drawing are shifted together, so the dots, shields and the traveling dot stay aligned. */
@media (max-width: 700px) {
  .window.live { padding: var(--s2); }
  .zmap { overflow: hidden; aspect-ratio: 680 / 330; }
  .zmap > img { position: absolute; width: 150.44%; max-width: none; height: auto; left: -35.29%; top: -48.5%; }
  .zmap-over { inset: auto; width: 150.44%; height: auto; left: -35.29%; top: -48.5%; }
}

/* Primary filters (15.10, her pick, option 2 of filters-options.html): the filter name leads at 24px, the question is marked in lime like the highlighted words in the page titles, the values are chips. Replaces the three-column table. */
.pfilters { list-style: none; margin: 0; padding: 0; display: grid; }
.pfilters > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: center; padding: 20px 0; border-top: 1px solid #dcdcdc; }
.pfilters > li:first-child { border-top: 0; padding-top: 0; }
.pfilters > li:last-child { padding-bottom: 0; }
.pf-l { display: grid; gap: 2px; }
.pf-nm { font: 600 24px/1.25 var(--font-head); letter-spacing: -0.01em; }
.pf-q { font-size: var(--t-16); font-weight: 500; }
.pf-q mark { background: var(--color-accent-lime); color: var(--color-content-primary); border-radius: 0.12em; padding: 0 0.25em; margin-left: -0.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pf-c { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.pf-chip { font-size: var(--t-14); line-height: 1.2; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-content-primary); }
.pf-eg { font-size: var(--t-14); color: var(--color-content-secondary); }
@media (max-width: 900px) {
  .diagram.pf-card { padding: var(--s3) var(--s2); }
  .pfilters > li { grid-template-columns: 1fr; gap: 12px; align-items: start; }
}
.diagram.pf-card, .pfilters { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .pfilters > li { grid-template-columns: minmax(0, 1fr); } }

/* User flows (15.10, her request): the flow titles (Operations person, Site Manager) are centered over their graphs instead of left-aligned. */
.pflow .diagram-title { justify-self: center; text-align: center; }

/* Primary filters, her review 15.10: the page's `.prose ul` rule (24px left padding, bottom margins) pushed the rows and the chips to the right. Rows and chips are flush left with the card title, and the chips sit closer to the question. */
.prose .pfilters, .prose .pf-c { padding: 0; margin: 0; }
.prose .pfilters li { margin-bottom: 0; }
.pf-l { gap: 0; }
.pfilters > li { row-gap: 10px; }
@media (max-width: 900px) { .pfilters > li { gap: 10px; } }