/* Charts on the phishing project page. The SVGs are generated by `phishguard figures`
   in the phishing-detection-system repo (docs/figures); copy them here to update. */
.pfig{margin:20px 0 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fcfcfb}
.pfig-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.pfig img{display:block; width:100%; min-width:640px; height:auto}
.pfig .pfig-dark{display:none}
.pfig figcaption{padding:10px 16px 12px; border-top:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:14px; line-height:1.5}
.pfig figcaption b{color:var(--ink); font-weight:600}
.pfig-more{margin-top:26px; font-size:19px}
:root[data-theme="dark"] .pfig{background:#1a1a19}
:root[data-theme="dark"] .pfig .pfig-light{display:none}
:root[data-theme="dark"] .pfig .pfig-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pfig{background:#1a1a19}
  :root:not([data-theme="light"]) .pfig .pfig-light{display:none}
  :root:not([data-theme="light"]) .pfig .pfig-dark{display:block}
}

/* labeled figures: numbered header, two-part caption, click to enlarge, figure tour */
.pfig{margin:24px 0 0; border-radius:14px; box-shadow:var(--shadow-sm); scroll-margin-top:76px}
.pfig-head{display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--surface); border-bottom:1px solid var(--line)}
.pfig-no{font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:6px; background:var(--accent-wash); color:var(--accent-strong)}
.pfig-kind{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pfig-zoom{margin-left:auto; font:inherit; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:7px; border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); cursor:pointer}
.pfig-zoom:hover{border-color:var(--accent); color:var(--accent-strong)}
.pfig-scroll{cursor:zoom-in}
.pfig figcaption{padding:14px 18px 16px; font-size:14.5px; color:var(--ink-soft)}
.pfig figcaption .pfig-title{display:block; font-family:"Fraunces",Georgia,serif; font-size:18px; line-height:1.25; color:var(--ink)}
.psec .pfig figcaption p{font-size:14.5px; line-height:1.55; margin-top:9px; max-width:none; padding-left:12px; border-left:2px solid var(--line-strong)}
.psec .pfig figcaption p + p{margin-top:9px; border-left-color:var(--accent)}
.pfig-k{display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1px}
.pfig figcaption p + p .pfig-k{color:var(--accent-strong)}
.pfig-tour{margin-top:22px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.pfig-tour > span{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pfig-tour div{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.pfig-tour a{display:inline-flex; align-items:center; gap:7px; font-size:13px; padding:5px 10px 5px 6px; border-radius:8px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper)}
.pfig-tour a:hover{border-color:var(--accent); color:var(--accent-strong)}
.pfig-tour a b{font-family:"IBM Plex Mono",monospace; font-size:11px; min-width:20px; text-align:center; padding:1px 4px; border-radius:5px; background:var(--accent-wash); color:var(--accent-strong)}
.pfig-lb{position:fixed; inset:0; z-index:60; background:rgba(6,10,16,.86); display:flex; align-items:center; justify-content:center; padding:54px 16px 20px; cursor:zoom-out}
.pfig-lb[hidden]{display:none}
.pfig-lb-in{max-width:1180px; width:100%; max-height:100%; overflow:auto; border-radius:12px; background:#fcfcfb}
.pfig-lb-in img{display:block; width:100%; min-width:720px; height:auto; cursor:default}
.pfig-lb-in p{margin:0; padding:10px 16px; font-size:14px; color:#26313F; border-top:1px solid #E1E6EB; position:sticky; left:0}
.pfig-lb-x{position:absolute; top:12px; right:16px; font:inherit; font-weight:600; font-size:14px; padding:7px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer}
:root[data-theme="dark"] .pfig-lb-in{background:#1a1a19} :root[data-theme="dark"] .pfig-lb-in p{color:#C4CDD7; border-top-color:#324456}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pfig-lb-in{background:#1a1a19} :root:not([data-theme="light"]) .pfig-lb-in p{color:#C4CDD7; border-top-color:#324456} }
@media (max-width:560px){ .pfig{margin-left:-8px; margin-right:-8px} .pfig figcaption{padding:12px 14px 14px} .pfig-kind{font-size:10.5px} }

/* swipe rail for the six URL-model charts, plus mobile readability and tap sizes */
.psec p.pfig-railnote{font-size:14.5px; color:var(--muted); margin-top:6px}
.pfig-railbar{display:flex; align-items:center; gap:10px; margin-top:12px}
.pfig-railbar button{font:inherit; font-size:17px; line-height:1; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
.pfig-railbar button:hover:not(:disabled){border-color:var(--accent); color:var(--accent-strong)}
.pfig-railbar button:disabled{opacity:.4; cursor:default}
.pfig-count{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted); min-width:56px; text-align:center}
.pfig-rail{display:flex; align-items:flex-start; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; padding:2px; margin:10px -2px 0}
.pfig-rail::-webkit-scrollbar{display:none}
.pfig-rail > .pfig{flex:0 0 100%; margin:0; scroll-snap-align:start; scroll-margin-top:76px}
.pfig-k,.pfig-kind{font-size:11.5px}
.pfig-zoom{padding:8px 13px; font-size:13px}
@media (max-width:700px){
  .pfig-rail > .pfig{flex-basis:94%}
  .pfig figcaption::before{content:"Swipe the chart sideways, or tap it to enlarge"; display:block; font-size:12.5px; color:var(--muted); margin-bottom:9px}
  .pfig-tour a{padding:8px 11px 8px 7px}
  .pfig-lb{padding:60px 8px 12px}
}
@media (max-width:560px){ .pfig-rail > .pfig{margin:0} }

/* Page discipline (desktop): a figure and its caption fit one screen together.
   Wide windows: the figure breaks out of the text column, chart on the left, caption on the right.
   Medium windows: caption in two columns under a chart that is capped to the window height. */
@media (min-width:900px) and (max-width:1099px){
  .pfig figcaption{display:grid; grid-template-columns:1fr 1fr; column-gap:22px; padding:11px 18px 13px}
  .pfig figcaption .pfig-title{grid-column:1 / -1}
  .psec .pfig figcaption p, .psec .pfig figcaption p + p{margin-top:6px; font-size:14px; line-height:1.5}
  .pfig img{width:auto; min-width:0; max-width:100%; max-height:calc(100vh - 318px); margin:0 auto}
  .pfig-rail > .pfig img{max-height:calc(100vh - 372px)}
}
@media (min-width:1100px){
  .pfig{display:grid; grid-template-columns:minmax(0,1fr) 304px; grid-template-rows:auto 1fr}
  .pfig-head{grid-column:1 / -1}
  .pfig-scroll{grid-column:1; display:flex; align-items:center; justify-content:center; overflow:hidden}
  .pfig figcaption{grid-column:2; border-top:0; border-left:1px solid var(--line); padding:14px 16px 16px}
  .pfig img{width:auto; min-width:0; max-width:100%; max-height:calc(100vh - 152px)}
  .pfig-rail > .pfig img{max-height:calc(100vh - 206px)}
  .pfig-rail > .pfig{align-self:stretch}
}