/* Guide figures: the annotated mock fund report (reading-fund-reports).
   A five-page quarterly report drawn as a document panel, with numbered
   First Light markers that open a note. Tokens only, so light and dark both
   work. Square corners. First Light is the marker fill (with ink text, which
   reads in both themes) and --accent / --accent-bg elsewhere; the rest is
   ink, white and greys. Below 700px the note drops out of its floating
   position and becomes a panel under the report. */

.fr-fig .fr-wrap{position:relative}
.fr-fig .fr-doc{background:var(--card);border:1px solid var(--border-2);color:var(--text)}

/* header strip and footer, the parts that make it read as a document */
.fr-fig .fr-strip,.fr-fig .fr-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;
  font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.fr-fig .fr-strip{padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--border)}
.fr-fig .fr-strip b{font-weight:500;color:var(--text)}
.fr-fig .fr-foot{padding:10px 18px;border-top:1px solid var(--border);color:var(--faint)}

/* page tabs */
.fr-fig .fr-tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.fr-fig .fr-tabs::-webkit-scrollbar{display:none}
.fr-fig .fr-tab{flex:1 0 auto;min-height:44px;padding:12px 14px;border:0;border-right:1px solid var(--hairline);
  background:none;color:var(--muted-2);font-family:var(--font-mono);font-size:11px;line-height:16px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
.fr-fig .fr-tab:last-child{border-right:0}
.fr-fig .fr-tab i{font-style:normal;color:var(--faint);margin-right:6px}
.fr-fig .fr-tab:hover{color:var(--text)}
.fr-fig .fr-tab[aria-selected="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.fr-fig .fr-tab:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
html:not(.js) .fr-fig .fr-tabs{display:none}

/* a page */
.fr-fig .fr-page{display:block;padding:22px 22px 20px}
.fr-fig .fr-page[hidden]{display:none}
html:not(.js) .fr-fig .fr-page[hidden]{display:block;border-top:1px solid var(--border)}
.fr-fig .fr-h{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px}
.fr-fig .fr-title{font-size:18px;line-height:24px;font-weight:600;color:var(--text);margin:0}
.fr-fig .fr-sub{font-size:13px;line-height:20px;color:var(--muted-2);margin:2px 0 0}
.fr-fig .fr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 20px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.fr-fig .fr-top .fr-sub{font-family:var(--font-mono);font-size:12px}
.fr-fig .fr-p{font-size:13px!important;line-height:20px!important;color:var(--muted-2);margin:12px 0 0!important}
.fr-fig .fr-p b{color:var(--muted);font-weight:600}

/* fund facts */
.fr-fig .fr-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;margin:0 0 18px}
.fr-fig .fr-facts div{font-size:13px;line-height:19px;color:var(--text)}
.fr-fig .fr-facts span{display:block;font-family:var(--font-mono);font-size:10.5px;line-height:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}

/* metric tiles */
.fr-fig .fr-mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);
  border-left:1px solid var(--border)}
.fr-fig .fr-m{padding:12px 14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.fr-fig .fr-m .l{display:flex;align-items:center;font-family:var(--font-mono);font-size:10.5px;line-height:18px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.fr-fig .fr-m .v{display:block;font-family:var(--font-mono);font-size:22px;line-height:30px;color:var(--text);
  font-variant-numeric:tabular-nums;margin-top:2px}
.fr-fig .fr-m .s{display:block;font-size:12px;line-height:17px;color:var(--muted-2)}

/* the manager's letter */
.fr-fig .fr-letter{margin-top:18px;padding:2px 0 2px 14px;border-left:2px solid var(--border-2)}
.fr-fig .fr-letter .fr-h{display:flex;align-items:center}
.fr-fig .fr-letter p{font-size:14px!important;line-height:22px!important;color:var(--muted);margin:0 0 8px!important}
.fr-fig .fr-letter p.sig{font-family:var(--font-mono);font-size:11px!important;line-height:16px!important;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0!important}

/* tables */
.fr-fig .fr-scroll{overflow-x:auto}
.fr-fig .fr-tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:18px}
.fr-fig .fr-tbl.wide{min-width:640px}
.fr-fig .fr-tbl.mid{min-width:480px}
.fr-fig .fr-tbl th{text-align:left;vertical-align:bottom;font-family:var(--font-mono);font-weight:400;font-size:10.5px;
  line-height:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:0 12px 8px 0;
  border-bottom:1px solid var(--border)}
.fr-fig .fr-tbl td{vertical-align:top;padding:8px 12px 8px 0;border-bottom:1px solid var(--hairline);color:var(--muted)}
.fr-fig .fr-tbl tr > :last-child{padding-right:0}
.fr-fig .fr-tbl .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.fr-fig .fr-tbl th.num{font-family:var(--font-mono)}
.fr-fig .fr-tbl td.co{color:var(--text);white-space:nowrap}
.fr-fig .fr-tbl td.co small{display:block;font-size:11.5px;line-height:16px;color:var(--faint);white-space:nowrap}
.fr-fig .fr-tbl td.bas{font-size:12px;line-height:17px;color:var(--muted-2);min-width:150px}
.fr-fig .fr-tbl.cf td:first-child,.fr-fig .fr-tbl.wide td:nth-child(2){white-space:nowrap}
.fr-fig .fr-tbl.wide th,.fr-fig .fr-tbl.wide td{padding-right:10px}
.fr-fig .fr-tbl td.lab{color:var(--text)}
.fr-fig .fr-tbl tr.sec td{padding-top:14px;font-family:var(--font-mono);font-size:10.5px;line-height:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.fr-fig .fr-tbl tr.tot td{border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);color:var(--text);font-weight:600}
.fr-fig .fr-tbl tr.sub td{color:var(--muted-2)}
.fr-fig .fr-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;margin:0 0 18px;padding:12px 14px;
  background:var(--surface)}
.fr-fig .fr-kv div{font-family:var(--font-mono);font-size:14px;line-height:20px;color:var(--text);font-variant-numeric:tabular-nums}
.fr-fig .fr-kv span{display:block;font-size:10.5px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.fr-fig .fr-call{margin-top:16px;padding:12px 14px;border:1px dashed var(--border-2)}
.fr-fig .fr-call .fr-h{display:flex;align-items:center;margin-bottom:4px}
.fr-fig .fr-call p{font-size:14px!important;line-height:21px!important;color:var(--muted);margin:0!important}
.fr-fig .fr-call b{font-family:var(--font-mono);font-weight:500;color:var(--text)}

/* the markers: First Light with ink text works in both themes */
.fr-fig .fr-hot{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:18px;height:18px;margin:0 0 0 7px;padding:0;border:0;background:var(--to-first-light);color:var(--to-ink);
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;
  vertical-align:2px;cursor:pointer;box-shadow:0 0 0 1px var(--accent-br)}
.fr-fig .fr-hot::after{content:"";position:absolute;inset:-7px}
.fr-fig .fr-hot:hover,.fr-fig .fr-hot[aria-expanded="true"],.fr-fig .fr-hot:focus-visible{outline:2px solid var(--text);outline-offset:2px}
html:not(.js) .fr-fig .fr-hot,html:not(.js) .fr-fig .fr-tour{display:none}
.fr-fig .fr-t{transition:background-color .2s}
.fr-fig .fr-t.is-on:not(tr),.fr-fig tr.fr-t.is-on > td{background:var(--accent-bg)}

/* the note */
.fr-fig .fr-pop{position:absolute;z-index:30;left:0;top:0;width:340px;max-width:calc(100% - 16px);
  background:var(--surface);border:1px solid var(--border-2);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.fr-fig .fr-pop[hidden]{display:none}
.fr-fig .fr-pop-h{display:flex;align-items:flex-start;gap:10px;padding:12px 8px 10px 14px;border-bottom:1px solid var(--border)}
.fr-fig .fr-pop-h .fr-hot{margin:1px 0 0;cursor:default;outline:0}
.fr-fig .fr-pop-h .fr-hot::after{content:none}
.fr-fig .fr-pop-t{flex:1;font-size:15px;line-height:21px;font-weight:600;color:var(--text);outline:0}
.fr-fig .fr-x{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-6px 0 0;
  padding:0;border:0;background:none;color:var(--muted-2);cursor:pointer}
.fr-fig .fr-x:hover{color:var(--text)}
.fr-fig .fr-x:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.fr-fig .fr-pop-b{padding:12px 14px 14px}
.fr-fig .fr-pop .k{display:block;font-family:var(--font-mono);font-size:10.5px;line-height:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:0 0 3px}
.fr-fig .fr-pop p{font-size:14px!important;line-height:20px!important;color:var(--muted);margin:0 0 12px!important}
.fr-fig .fr-pop ul{margin:0 0 12px;padding:0;list-style:none}
.fr-fig .fr-pop ul li{position:relative;margin:0 0 4px;padding:0 0 0 14px;font-size:14px;line-height:20px;color:var(--muted)}
.fr-fig .fr-pop ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:1px;background:var(--faint)}
.fr-fig .fr-pop .fr-red{padding-left:10px;border-left:2px solid var(--accent)}
.fr-fig .fr-pop .fr-red .k{color:var(--text)}
.fr-fig .fr-pop .fr-more{display:inline-block;font-size:13px;line-height:20px;color:var(--text);
  text-decoration:underline;text-underline-offset:3px}

/* guided tour */
.fr-fig .fr-tour{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.fr-fig .fr-tour .lbl{margin-right:auto;font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.fr-fig .fr-tour button{min-height:40px;padding:8px 14px;border:1px solid var(--border-2);background:none;color:var(--muted);
  font-family:var(--font-mono);font-size:13px;line-height:18px;cursor:pointer}
.fr-fig .fr-tour button:hover{color:var(--text)}
.fr-fig .fr-tour button:disabled{opacity:.4;cursor:default}
.fr-fig .fr-tour button.go{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.fr-fig .fr-tour button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.fr-fig .fr-tour .st{min-width:64px;text-align:center;font-family:var(--font-mono);font-size:13px;line-height:18px;
  color:var(--muted);font-variant-numeric:tabular-nums}

@media (max-width:700px){
  .fr-fig .fr-page{padding:18px 14px 16px}
  .fr-fig .fr-strip,.fr-fig .fr-foot{padding:9px 14px}
  .fr-fig .fr-tab{padding:12px 12px}
  .fr-fig .fr-facts,.fr-fig .fr-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-fig .fr-mets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-fig .fr-m .v{font-size:19px;line-height:26px}
  .fr-fig .fr-pop{position:static;width:auto;max-width:none;margin-top:12px;box-shadow:none}
  .fr-fig .fr-tour .lbl{flex-basis:100%}
}
.fr-fig .fr-il{display:inline-flex;align-items:center}

/* Paper. The report itself is always a white page with dark ink, in both site
   themes, so it reads as a document someone was sent. Only the tokens change;
   every rule above picks them up. The note and the tour stay in the site theme. */
.fr-fig .fr-doc{
  --card:#fff; --bg:#fff; --surface:#F4F4F2; --chip:#F4F4F2;
  --text:var(--to-ink); --muted:var(--to-grey-900); --muted-2:var(--to-grey-700); --faint:var(--to-grey-500);
  --border:rgba(25,24,25,.14); --border-2:rgba(25,24,25,.22); --hairline:rgba(25,24,25,.08);
  --accent:var(--to-ink); --accent-on:#fff; --accent-bg:rgba(255,246,149,.75);
  background:#fff; color:var(--to-ink); border-color:rgba(25,24,25,.22);
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 14px 36px rgba(0,0,0,.28)}
html[data-theme="light"] .fr-fig .fr-doc{box-shadow:0 1px 2px rgba(25,24,25,.08),0 12px 30px rgba(25,24,25,.10)}
/* First Light markers need an edge on white paper */
.fr-fig .fr-doc .fr-hot{box-shadow:inset 0 0 0 1px rgba(25,24,25,.35)}