/* history.iamjust.in exhibit chrome.
   Deliberately quiet: the point is the old design inside the frame, not this frame. */
:root{
  --h-bg:#0d0f1a; --h-panel:#161830; --h-surface:#1e2140;
  --h-text:#f5f5f8; --h-muted:#a0a0b0; --h-line:#2a2d4a;
  --h-accent:#00e5ff; --h-warn:#ffe600;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--h-bg);color:var(--h-text);
  font:15px/1.55 Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
}
.ij-history-head{
  flex:0 0 auto;background:var(--h-panel);border-bottom:1px solid var(--h-line);
  padding:12px 18px 0;
}
.ij-history-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ij-history-title h1{font-size:19px;font-weight:700;margin:0;letter-spacing:.01em}
.ij-history-meta{font-size:12px;color:var(--h-muted);letter-spacing:.08em;text-transform:uppercase}
.ij-history-engine{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--h-accent);border:1px solid rgba(0,229,255,.4);
  padding:2px 8px;border-radius:9999px;white-space:nowrap;
}
.ij-history-blurb{margin:8px 0 0;max-width:76ch;font-size:14px;color:var(--h-muted)}
.ij-history-look{margin:6px 0 0;max-width:76ch;font-size:14px;color:var(--h-text)}
.ij-history-look b{color:var(--h-warn);font-weight:600}

/* The tabs are the whole point of the exhibit: they show that the public site and the CMS
   behind it are one application. They were too quiet to read as a control, so they are now
   a proper segmented switch. */
.ij-history-tabs{display:flex;gap:0;margin-top:14px;align-items:stretch}
.ij-history-tab{
  appearance:none;border:1px solid var(--h-line);background:var(--h-panel);
  color:var(--h-muted);font:inherit;font-size:14px;font-weight:600;
  padding:11px 22px;cursor:pointer;border-radius:0;position:relative;
  display:flex;align-items:center;gap:9px;
  transition:background .18s,color .18s,border-color .18s;
}
.ij-history-tab + .ij-history-tab{border-left:none}
.ij-history-tab .dot{
  width:8px;height:8px;border-radius:9999px;background:currentColor;opacity:.4;flex:0 0 auto;
}
.ij-history-tab:hover{color:var(--h-text);background:var(--h-surface)}
.ij-history-tab[aria-selected="true"]{
  background:var(--h-bg);color:var(--h-text);border-color:var(--h-accent);
  box-shadow:inset 0 -3px 0 var(--h-accent);
}
.ij-history-tab[aria-selected="true"] .dot{opacity:1;background:var(--h-accent)}
.ij-history-tab:focus-visible{outline:2px solid var(--h-accent);outline-offset:2px;z-index:1}
.ij-history-tab .sub{
  display:block;font-size:10.5px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;opacity:.72;margin-top:2px;
}
.ij-history-tab .lbl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.ij-history-creds{
  margin-left:auto;align-self:center;font-size:12px;color:var(--h-muted);padding-bottom:6px;
}
.ij-history-creds code{
  color:var(--h-text);background:var(--h-surface);padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
}
.ij-history-creds b{color:var(--h-accent);font-weight:600}

/* ------------------------------------------------------- the first-run walkthrough
   Shown once per exhibit, only where there is an admin side to explain. */
.ij-tour{position:fixed;inset:0;z-index:60;display:none}
.ij-tour.on{display:block}
.ij-tour-veil{position:absolute;inset:0;background:rgba(5,6,12,.78);animation:ijFade .25s ease}
.ij-tour svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ij-tour-ring{fill:none;stroke:var(--h-accent);stroke-width:2.5}
.ij-tour-arrow{fill:none;stroke:var(--h-accent);stroke-width:2.5;stroke-linecap:round}
.ij-tour-note{
  position:absolute;max-width:19rem;background:var(--h-panel);color:var(--h-text);
  border:1px solid var(--h-accent);padding:13px 15px;font-size:13.5px;line-height:1.55;
  box-shadow:0 12px 34px -8px rgba(0,0,0,.7);
}
.ij-tour-note b{color:var(--h-accent)}
.ij-tour-go{
  position:absolute;appearance:none;border:1px solid var(--h-accent);
  background:var(--h-accent);color:#06121a;font:inherit;font-size:13px;font-weight:700;
  padding:9px 20px;cursor:pointer;border-radius:0;
}
.ij-tour-go:hover{filter:brightness(1.12)}
.ij-tour-go:focus-visible{outline:2px solid var(--h-text);outline-offset:2px}
@keyframes ijFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ij-tour-veil{animation:none}}
@media (max-width:760px){
  .ij-history-tab{padding:9px 13px;font-size:13px}
  .ij-history-tab .sub{display:none}
  .ij-tour-note{max-width:15rem;font-size:12.5px}
}

.ij-history-stage{flex:1 1 auto;position:relative;background:#fff;min-height:0}
.ij-history-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.ij-history-frame.is-active{opacity:1;pointer-events:auto}

.ij-history-foot{
  flex:0 0 auto;background:var(--h-panel);border-top:1px solid var(--h-line);
  padding:7px 18px;font-size:12px;color:var(--h-muted);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.ij-history-foot .ij-history-synthetic{
  color:var(--h-warn);border:1px solid rgba(255,230,0,.35);
  padding:1px 8px;border-radius:9999px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
@media (max-width:760px){
  .ij-history-head{padding:10px 12px 0}
  .ij-history-blurb,.ij-history-look{display:none}
  .ij-history-creds{margin-left:0;width:100%;padding:0 0 6px}
  .ij-history-tab{padding:8px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ij-history-frame,.ij-history-tab{transition:none}
}

/* ---------------------------------------------------------------- the modal
   One overlay, reused. Opening a second exhibit swaps the frame rather than
   building anything new, which is what makes "close one, open another" instant. */
.ij-history-modal{
  position:fixed;inset:0;z-index:1000;display:none;
  background:rgba(6,7,14,.86);backdrop-filter:blur(3px);
}
.ij-history-modal.is-open{display:block}
.ij-history-modal-box{
  position:absolute;inset:2.2vh 2.2vw;background:var(--h-bg);
  border:1px solid var(--h-line);box-shadow:0 24px 70px -12px rgba(0,0,0,.8);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:scale(.985);transition:opacity .18s ease,transform .18s ease;
}
.ij-history-modal.is-open .ij-history-modal-box{opacity:1;transform:none}
.ij-history-modal-frame{flex:1 1 auto;width:100%;border:0;background:var(--h-bg)}
.ij-history-close{
  position:absolute;top:-1px;right:-1px;z-index:2;
  appearance:none;border:1px solid var(--h-line);border-top:none;border-right:none;
  background:var(--h-panel);color:var(--h-muted);
  font:inherit;font-size:13px;line-height:1;padding:11px 15px;cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:color .15s,background .15s;
}
.ij-history-close:hover,.ij-history-close:focus-visible{
  color:var(--h-text);background:var(--h-surface);outline:none;
}
.ij-history-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.ij-history-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--h-muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;
}
.ij-history-modal.is-ready .ij-history-loading{display:none}
body.ij-history-locked{overflow:hidden}
@media (max-width:760px){ .ij-history-modal-box{inset:0} }
@media (prefers-reduced-motion:reduce){
  .ij-history-modal-box{transition:none}
}