/* Darwin's World additions on top of study.css (shared with the jevSociety study): figure layouts for the two viewers. */
.contents.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
h1{max-width:none}
.bar .seg.sub,.seg.sub{margin-top:10px}
.seg .sw{width:8px;height:8px;border-radius:50%;margin-right:6px;transform:none;vertical-align:1px}
.cv.pad{padding:12px}
.cv canvas{width:100%}
.cap{position:absolute;left:16px;right:16px;bottom:16px;font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink);background:rgba(255,255,255,.94);border:1px solid var(--hairline);border-radius:12px;padding:12px 18px;box-shadow:var(--shadow-m);opacity:0;transition:opacity .4s;pointer-events:none}
.cap.on{opacity:1}
.cap em{font-style:normal;color:var(--accent)}

/* Figure 1: islands */
.iview{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;margin-top:16px;align-items:end}
.iview .mapp .cv{height:600px}
.iview .treep .cv{height:380px}
.iview canvas#i-map,.iview canvas#i-tree,.iview canvas#i-wide{display:block;width:100%;height:100%}
.iview .treep{align-self:start}
.iview .treep .ph{height:auto}
.widep{display:none}
#fig-islands[data-mode=conv] .mapp,#fig-islands[data-mode=conv] .treep,#fig-islands[data-mode=web] .mapp,#fig-islands[data-mode=web] .treep{display:none}
#fig-islands[data-mode=conv] .widep,#fig-islands[data-mode=web] .widep{display:block;grid-column:1/-1}
#fig-islands[data-mode=conv] .widep .cv,#fig-islands[data-mode=web] .widep .cv{height:620px}
#fig-islands[data-mode=conv] .events,#fig-islands[data-mode=web] .events,#fig-islands[data-mode=conv] .howto,#fig-islands[data-mode=web] .howto{display:none}
.itip{position:absolute;z-index:3;pointer-events:none;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.45;box-shadow:var(--shadow-l);opacity:0;transition:opacity .12s;color:var(--ink2)}
.itip.on{opacity:1}
.itip .n{font-family:var(--serif);font-size:17px;line-height:1.25;color:var(--ink);margin-bottom:6px}
.itip .row{display:flex;gap:8px}
.itip .row i{font-style:normal;color:var(--ink3);width:66px;flex:none;font-size:11px;padding-top:1px}
.itip .meta{margin-top:8px;padding-top:8px;border-top:1px solid var(--hairline);color:var(--ink3)}
.itip .m{color:var(--ink4);margin-top:6px}
.events{margin-top:12px;min-height:44px;font-size:13px;color:var(--ink2);display:flex;flex-direction:column;gap:4px}
.events div{display:flex;align-items:baseline;gap:9px;min-width:0}
.events div>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.events .g{color:var(--ink3);font-variant-numeric:tabular-nums;flex:none;width:52px}
.events .dot{transform:translateY(-1px)}
.events b{font-weight:600;color:var(--ink)}
.acards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px}
.acard{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:12px 14px 10px;min-width:0}
.acard .h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;margin-bottom:6px}
.acard .h span{margin-left:auto;font-weight:400;color:var(--ink4);font-size:11.5px}
.acard .sw{border-radius:50%;width:9px;height:9px}
.acard .tr{display:grid;grid-template-columns:minmax(0,1fr) 54px 36px;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);margin:4px 0}
.acard .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .nm small{color:var(--ink4);font-size:11px;margin-left:5px}
.acard .bar{display:block;height:5px;border-radius:3px;background:var(--fill);overflow:hidden;margin:0}
.acard .bar i{display:block;height:100%;border-radius:3px;transition:width .25s}
.acard b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}

/* Figure 2: arms race */
#a-note{max-width:none}
#a-note .rules{display:block;margin-top:4px;color:var(--ink2)}
.aview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px;gap:24px;margin-top:16px}
.aview canvas{display:block;height:300px}
.nowc{height:324px;position:relative}
#a-now .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-top:14px}
#a-now .k:first-child{margin-top:2px}
#a-now .v{font-family:var(--serif);font-size:19px;color:var(--ink);display:flex;align-items:center;gap:8px;margin-top:3px}
#a-now .ph{display:block;height:auto;color:var(--ink3);font-size:12.5px;line-height:1.4;margin-top:2px}
#a-now .big{font-family:var(--serif);font-size:30px;font-variant-numeric:tabular-nums;color:var(--ink);margin-top:2px}
.streams{margin-top:8px}
.streams canvas{display:block;height:150px}
.streams .ph{margin-top:12px}
.chart .ct b{color:var(--ink);font-weight:600}
.chart canvas{margin-top:6px}
.chart .cn{font-size:12.5px;color:var(--ink3);line-height:1.5;margin-top:8px}
.chart .cn b{color:var(--ink);font-weight:600}
.charts.c2{margin-top:28px;gap:0 40px}
.gtip{position:fixed;z-index:50;pointer-events:none;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;padding:9px 11px;font-size:12.5px;line-height:1.45;box-shadow:var(--shadow-m);opacity:0;transition:opacity .12s;color:var(--ink2)}
.gtip.on{opacity:1}
.gtip b{color:var(--ink);font-weight:600}
.gtip .m{color:var(--ink3);margin:2px 0 4px}

/* headless render mode: hide page chrome around the figure */
html.render .transport,html.render .howto{display:none}

@media (max-width:1100px){
 .iview{grid-template-columns:minmax(0,1fr) 300px}
 .aview{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .aview .pane:last-child{grid-column:1/-1}
 .nowc{height:auto;min-height:200px}
 .acards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .contents.c2{grid-template-columns:1fr}
 .iview,.aview{grid-template-columns:minmax(0,1fr)}
 .iview .mapp .cv{height:440px}
 .iview .treep .cv{height:340px}
 #fig-islands[data-mode=conv] .widep .cv{height:1240px}
 #fig-islands[data-mode=web] .widep .cv{height:520px}
 .aview canvas{height:300px}
 .streams canvas{height:130px}
 .acards{grid-template-columns:minmax(0,1fr)}
 .cap{font-size:17px}
 .transport .seg{order:2}
 .events .g{width:48px}
}
[hidden]{display:none!important}
.acard .tr{grid-template-columns:minmax(0,1fr) 60px 34px;margin:6px 0}
.acard .nm{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.acard .nm small{margin-left:0;font-size:10.5px}

.rcap{display:none}
html.render .rcap{display:block;font-family:var(--serif);font-size:25px;line-height:1.3;color:var(--ink);min-height:66px;padding:2px 0 10px;max-width:none}
html.render .rcap em{font-style:normal;color:var(--accent)}
html.render .gtip,html.render .events{display:none}
html.render .top,html.render .mast,html.render .part>.head,html.render footer{display:none}
html.render main{padding-top:24px}
html.render *,html.render *::before{transition:none!important;animation:none!important}