/* Islands index (islands/) and island pages (islands/<k>/): the atlas plate.
   Plate head (title + re-framed chart) → "How much was written down" (record constellation) → thin-record callouts
   → new research → every era as <details> with a vertical event lane. Tokens only; scoped to body.t-island. */

.t-island{--plate-line:var(--line-strong)}

/* ---------- plate head */
.plate-head{border-bottom:1px solid var(--line)}
.plate-head .wrap{display:grid;gap:24px;padding-block:24px 36px}
.ph-text{min-width:0}
.plate-head h1{font-size:var(--t-display);line-height:.92;letter-spacing:-.025em;margin:.08em 0 .18em}
.ph-aka{font-size:var(--t-lg);line-height:1.45;color:var(--dim);max-width:34ch;margin:0 0 18px}
.ph-count{font-family:var(--display);font-size:var(--t-h3);line-height:1.25;margin:0 0 18px}
.ph-count .num:first-child{text-decoration:underline 3px var(--c,var(--blue));text-underline-offset:.18em;text-decoration-skip-ink:none}
.ph-links{margin:0}
.p-outer.plate-head{--c:var(--outer)}
@media (min-width:960px){
  .plate-head .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:end;padding-block:40px 48px}
  .wide-plate .wrap{grid-template-columns:minmax(0,1fr)}
  .wide-plate .ph-text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:end}
  .wide-plate .ph-text .crumbs{grid-column:1 / -1;padding-bottom:0}
  .wide-plate .ph-text h1{grid-column:1;grid-row:2 / span 3}
  .ph-text{display:flex;flex-direction:column;align-self:stretch}
  .ph-text .crumbs{margin-bottom:auto;padding-bottom:24px}
}

/* the plate: a chart with a neat line (double rule), graticule and degree labels */
.plate{margin:0;min-width:0}
.plate-win{position:relative;overflow:hidden;border:1px solid var(--plate-line);outline:1px solid var(--line);outline-offset:4px;background:var(--bg2);contain:paint}
.plate-map{position:absolute;left:0;top:0;display:block;width:var(--sw);max-width:none;height:auto;transform-origin:0 0;transform:translate(var(--tx),var(--ty))}
.plate-map .off{fill:var(--star)}
.plate-win:not(.opening) .off{display:none}
.plate figcaption{margin-top:12px;font-size:var(--t-xs);color:var(--dim);max-width:64ch}
.plate-map .sea{fill:var(--bg2)}
.plate-map .grat{stroke:var(--line);opacity:.75;stroke-width:calc(var(--u) * .2px);fill:none}
.plate-map .deg{fill:var(--dim);font-family:var(--display);font-variant-numeric:lining-nums tabular-nums}
.plate-map .lane{fill:none;stroke:var(--blue);stroke-width:calc(var(--u) * .3px);stroke-dasharray:calc(var(--u) * .35px) calc(var(--u) * 1.05px);stroke-linecap:round;opacity:.9}
.plate-map .st path{fill:var(--star);transition:fill var(--d-1)}
.plate-map .st text{fill:var(--ink);font-family:var(--body);font-weight:700}
.plate-map .st.here path{stroke:var(--c,var(--blue));stroke-width:.07;paint-order:stroke}
/* [jury3 #10] the other states are dimmed by their star only: their names stay text at full AA contrast (--dim) */
.plate-map .st.dim path{opacity:.4;transition:opacity var(--d-1)}
.plate-map .st.dim text{fill:var(--dim)}
.plate-map a.st:hover path,.plate-map a.st:focus-visible path{opacity:1}
/* hit areas: 24px, 44px on coarse pointers (sized per tier in the build) */
.plate-map .hit{fill:transparent;stroke:none}
.plate-map .hit-c{display:none}
@media (pointer:coarse){.plate-map .hit-f{display:none}.plate-map .hit-c{display:inline}}
/* a halo of the plate's sea keeps every name legible where it crosses a star-path or the graticule */
.plate-map text{paint-order:stroke;stroke:var(--bg2);stroke-width:calc(var(--u) * .5px);stroke-linejoin:round}
.plate-map a.st:hover path,.plate-map a.st:focus-visible path{fill:var(--blue)}
.plate-map a.st:focus-visible{outline:none}
.plate-map a.st:focus-visible text{text-decoration:underline;text-decoration-thickness:2px}
.plate-map .edge{fill:var(--dim);font-family:var(--body);font-weight:700;font-style:italic}
.plate-map .atoll circle{fill:var(--dim)}
.plate-map .atoll text{fill:var(--dim);font-family:var(--body)}
.plate-map .atoll.lit circle{fill:var(--outer)}
.plate-map .atoll.lit text{fill:var(--ink)}
/* the opening zoom (island-plate.js): html.plate-intro hides the map before first paint so the final frame never
   flashes; a safety reveal shows it after 3s if the script never runs. While it opens, the whole chart is lit (the
   graticule at a 1px hairline, all four stars at full strength); degree, edge and atoll labels fade in over the
   last 300ms as the other states dim back to 40%. */
.plate-intro .plate-head .plate-map{opacity:0;animation:plate-safety 1ms 3s both}
@keyframes plate-safety{to{opacity:1}}
.opening .grat{vector-effect:non-scaling-stroke;stroke-width:1px}
.opening-labels .grat{stroke:var(--line-strong);opacity:.45}
.opening-labels .st.dim path{opacity:1}
.opening .st.dim path,.plate-map .grat{transition:opacity 300ms var(--ease-out),stroke 300ms var(--ease-out)}
.opening-labels .degs,.opening-labels .edge,.opening-labels .atoll text{opacity:0}
.plate-map .degs,.plate-map .edge,.plate-map .atoll text{transition:opacity 300ms var(--ease-out)}

/* ---------- islands index: a contents page of plates with dot leaders */
.ix-key{max-width:62ch;margin-bottom:12px}
.ix-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.ix-list li{border-bottom:1px solid var(--line)}
.ix-list a{display:grid;grid-template-columns:auto minmax(2ch,1fr) auto;grid-template-areas:"name lead n" "aka aka strip";gap:4px 14px;align-items:baseline;padding:18px 4px 16px;color:var(--ink);text-decoration:none}
.ix-name{grid-area:name;font:400 var(--t-h2)/1.05 var(--display);display:flex;align-items:center;gap:12px}
.ix-name::before{content:"";width:.5em;height:.5em;flex:none;background:var(--c);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ix-lead{grid-area:lead;align-self:end;margin-bottom:.55em;border-bottom:2px dotted var(--line-strong)}
.ix-n{grid-area:n;font:400 var(--t-h3)/1 var(--display)}
.ix-aka{grid-area:aka;color:var(--dim);font-size:var(--t-sm);max-width:62ch}
.ix-strip{grid-area:strip;display:flex;align-items:flex-end;gap:3px;height:28px;align-self:center}
.ix-strip i{width:6px;height:calc(2px + var(--h) * 26px);background:var(--c);border-radius:1px}
.ix-list a:hover .ix-name,.ix-list a:focus-visible .ix-name{color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
@media (max-width:560px){.ix-list a{grid-template-areas:"name lead n" "aka aka aka" "strip strip strip"}.ix-strip{justify-self:start}}

/* ---------- "How much was written down": the record constellation */
.rc-sec h2{margin-bottom:.25em}
.rc-lede{max-width:66ch;margin-bottom:20px}
.rc{margin:0;--lab-h:104px}
.rc-plot{position:relative;padding-bottom:var(--lab-h);background:var(--bg2);border:1px solid var(--line-strong)}
.rc-sky{display:block;width:100%;height:auto}
.rc-narrow{display:none}
.rc-sky .rule{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.rc-sky .s{fill:none;stroke:var(--star);stroke-width:3.4px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rc-sky .s .ring{stroke:var(--star);stroke-width:7.5px}
.rc-sky .s .hole{stroke:var(--bg2);stroke-width:3.8px}
.rc-sky .weak{opacity:.5}
.rc-sky .col{transition:opacity var(--d-2) var(--ease-out)}
.rc-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.rc-col{display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);text-decoration:none;min-width:0}
.rc-lab{display:flex;flex-direction:column;gap:2px;height:var(--lab-h);padding:8px;border-top:1px solid var(--line-strong);font-size:var(--t-xs);line-height:1.2}
.rc-col + .rc-col .rc-lab{border-left:1px solid var(--line)}
.rc-n{color:var(--dim)}
.rc-t{font-weight:700;overflow-wrap:break-word}
.rc-c{margin-top:auto;font:400 var(--t-lg)/1 var(--display)}
.rc-thin{color:var(--weak);font-weight:700}
.rc-col.is-thin .rc-c{color:var(--weak);text-decoration:underline dashed 1px;text-underline-offset:.22em}
.rc-col:hover,.rc-col:focus-visible{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.rc-col:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:0}
.rc-col:hover .rc-lab,.rc-col:focus-visible .rc-lab{box-shadow:inset 0 2px 0 var(--blue)}
/* caption line under the plot: a hint; the hovered or focused era's caption covers it */
.rc-hint{margin:0;min-height:3.2em;padding-top:8px;font-size:var(--t-sm)}
.h-coarse{display:none}
@media (pointer:coarse),(hover:none),(max-width:720px){.h-fine{display:none}.h-coarse{display:inline}}
.rc-cap{position:absolute;left:0;right:0;top:100%;min-height:3.2em;padding-top:8px;z-index:2;background:var(--bg);font-size:var(--t-sm);line-height:1.45;color:var(--ink);clip-path:inset(50%);pointer-events:none}
.rc-col:hover .rc-cap,.rc-col:focus-visible .rc-cap{clip-path:none}
/* highlight one era's stars while its column is hovered or focused */
.rc-plot:has(.rc-col:is(:hover,:focus-visible)) .col{opacity:.16}
.rc-plot:has(.rc-col[data-c="0"]:is(:hover,:focus-visible)) .col[data-c="0"],
.rc-plot:has(.rc-col[data-c="1"]:is(:hover,:focus-visible)) .col[data-c="1"],
.rc-plot:has(.rc-col[data-c="2"]:is(:hover,:focus-visible)) .col[data-c="2"],
.rc-plot:has(.rc-col[data-c="3"]:is(:hover,:focus-visible)) .col[data-c="3"],
.rc-plot:has(.rc-col[data-c="4"]:is(:hover,:focus-visible)) .col[data-c="4"],
.rc-plot:has(.rc-col[data-c="5"]:is(:hover,:focus-visible)) .col[data-c="5"],
.rc-plot:has(.rc-col[data-c="6"]:is(:hover,:focus-visible)) .col[data-c="6"],
.rc-plot:has(.rc-col[data-c="7"]:is(:hover,:focus-visible)) .col[data-c="7"],
.rc-plot:has(.rc-col[data-c="8"]:is(:hover,:focus-visible)) .col[data-c="8"],
.rc-plot:has(.rc-col[data-c="9"]:is(:hover,:focus-visible)) .col[data-c="9"],
.rc-plot:has(.rc-col[data-c="10"]:is(:hover,:focus-visible)) .col[data-c="10"],
.rc-plot:has(.rc-col[data-c="11"]:is(:hover,:focus-visible)) .col[data-c="11"]{opacity:1}
.rc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:4px;font-size:var(--t-xs)}
.rc-legend > span{display:inline-flex;align-items:center;gap:6px}
.rc-legend .muted{flex:1 1 100%}
.lg{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--star)}
.lg.weak{opacity:.5}
.lg.disp{background:none;border:2px solid var(--star);width:10px;height:10px}
.lg.lg-thin{width:14px;height:0;border-radius:0;background:none;border-bottom:2px dashed var(--weak)}
.rc-table{margin-top:10px}
.rc-table summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--blue)}
.rc-table caption{text-align:left;font-size:var(--t-sm);color:var(--dim);padding-bottom:6px}
.rc-table td{font-family:var(--display);font-variant-numeric:lining-nums tabular-nums}
.rc-table td.here{font-weight:600;color:var(--ink);background:var(--bg3)}
.rc-table th[scope="row"]{text-transform:none;letter-spacing:0;font-size:var(--t-sm);color:var(--ink);font-weight:700}
@media (max-width:1000px){.rc{--lab-h:52px}.rc-t,.rc-thin{display:none}.rc-lab{padding:6px 2px;align-items:center;text-align:center}.rc-c{font-size:var(--t-sm)}}
@media (max-width:720px){
  .rc{--lab-h:48px}
  .rc-wide{display:none}
  .rc-narrow{display:block}
  .rc-t,.rc-thin{display:none}
  .rc-lab{padding:6px 2px;align-items:center;text-align:center}
  .rc-c{font-size:var(--t-sm)}
}

/* ---------- "Where the record is thin": dashed --weak rule and a hollow star; never a card */
.thin{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;border-left:2px dashed var(--weak);padding:4px 0 4px 16px;max-width:72ch}
.thin-ico{width:22px;height:22px;fill:none;stroke:var(--weak);stroke-width:1.6;stroke-linejoin:round;margin-top:.2em}
.thin h2,.thin .thin-t{font:400 var(--t-h3)/1.15 var(--display);color:var(--weak);margin:0 0 .4em}
.thin .thin-t{font-size:var(--t-lg)}
.thin p{margin:0 0 .6em}
.thin ul{margin:0;padding-left:1.1em}
.thin li{margin:.2em 0}
.thin a{display:inline-block;padding-block:2px}
.ed-body .thin{margin:20px 0}

/* ---------- every era: <details> chapters */
.eras-sec > .muted{max-width:62ch}
.era-d{border-top:1px solid var(--line-strong);scroll-margin-top:calc(var(--head-h) + 12px)}
.era-d:last-of-type{border-bottom:1px solid var(--line-strong)}
.era-d summary{list-style:none;display:grid;grid-template-columns:3ch minmax(0,1fr) auto 24px;align-items:baseline;gap:4px 14px;min-height:64px;padding:16px 4px;cursor:pointer}
.era-d summary::-webkit-details-marker{display:none}
.era-d summary::after{content:"";grid-column:4;align-self:center;width:10px;height:10px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--d-2) var(--ease-out)}
.era-d[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.era-d summary:hover h3{color:var(--blue)}
.era-d summary:focus-visible{outline-offset:-3px}
.ed-n{color:var(--dim);font-size:var(--t-sm)}
.era-d h3{margin:0;font-size:var(--t-h3);font-weight:400}
.ed-meta{color:var(--dim);font-size:var(--t-sm);white-space:nowrap}
.ed-body{padding:0 4px 32px calc(3ch + 18px)}
.era-n{max-width:62ch}
.era-n p{margin-bottom:.9em}
.era-more{font-size:var(--t-sm)}
.lane-h{font:400 var(--t-lg)/1.2 var(--display);margin:28px 0 4px}
.lane-note{font-size:var(--t-sm);margin:0 0 8px}
.lane-all{margin:12px 0 0;font-weight:700}
.lane-all a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:720px){
  .era-d summary{grid-template-columns:minmax(0,1fr) 24px;gap:2px 10px}
  .ed-n{display:none}
  .era-d summary::after{grid-column:2;grid-row:1}
  .ed-meta{grid-column:1}
  .ed-body{padding-left:0}
}

/* ---------- the vertical event lane: a rail, a node per event in its state colour, no boxes */
.lane{list-style:none;margin:0;padding:0;max-width:820px}
.lane li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:0 22px;position:relative;scroll-margin-top:calc(var(--head-h) + 12px)}
.lane li::before{content:"";position:absolute;left:calc(8.5rem + 10px);top:0;bottom:0;width:2px;background:var(--line-strong)}
.lane li:first-child::before{top:1.15em}
.lane li:last-child::before{bottom:auto;height:1.15em}
.lane li::after{content:"";position:absolute;left:calc(8.5rem + 5px);top:.75em;width:12px;height:12px;border-radius:50%;background:var(--c,var(--national));box-shadow:0 0 0 3px var(--bg)}
.ln-when{text-align:right;padding-top:.35em;line-height:1.25}
.ln-when time{display:block;font:400 var(--t-lg)/1.1 var(--display)}
.ln-dl{display:block;font-size:var(--t-xs);color:var(--dim)}
.ln-body{padding:0 0 22px 14px;min-width:0}
.ln-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:28px}
.ln-body p{margin:.25em 0 .35em}
.ln-src{font-size:var(--t-sm);color:var(--dim);display:flex;flex-wrap:wrap;gap:0 12px;align-items:baseline}
.ln-src a{color:var(--dim);padding-block:6px;display:inline-block}
.ln-src .ln-open{color:var(--blue)}
.lane li:target{background:linear-gradient(90deg,transparent calc(8.5rem + 22px),var(--glow) 0)}
@media (max-width:640px){
  .lane li{grid-template-columns:minmax(0,1fr);padding-left:26px}
  .lane li::before{left:5px}
  .lane li::after{left:0}
  .ln-when{text-align:left;padding-top:.2em;display:flex;gap:10px;align-items:baseline}
  .ln-when time{display:inline}
  .ln-dl{display:inline}
  .ln-body{padding-left:0}
  .lane li:target{background:var(--glow)}
}

/* [jury3 #8/#10] each plate is drawn for three window widths (scripts/pages/island.py, TIERS_*): the one that fits its
   container shows, so labels never render under 12px and the whole FSM fits a phone without scrolling sideways */
.plate-scroll{padding:5px;container-type:inline-size}
.plate-win.tier-p,.plate-win.tier-m{display:none}
@container (max-width:499px){.plate-win.tier-d{display:none}.plate-win.tier-m{display:block}}
@container (max-width:409px){.plate-win.tier-m{display:none}.plate-win.tier-p{display:block}}
@container (max-width:769px){.wide-plate .plate-win.tier-d{display:none}.wide-plate .plate-win.tier-m{display:block}}
@container (max-width:489px){.wide-plate .plate-win.tier-m{display:none}.wide-plate .plate-win.tier-p{display:block}}
.fitnote{display:none}
@media (max-width:521px){.wide-plate .fitnote{display:inline}}

/* ---------- new research and print */
.story .prose{max-width:62ch}
@media print{
  .rc-cols,.rc-hint,.rc-cap{display:none}
  .era-d{break-inside:auto}
  .era-d:not([open]) > .ed-body{display:block}
}