/* Insluitmodus. De pagina blijft dezelfde app; alleen de zichtbare panelen
   verschillen per variant, gestuurd door de body-class die app.js zet uit de
   ?embed=-parameter. Alle drie de varianten starten pas na één klik. */

.embed-credit{display:none}
.embed-clock{display:none}

body[class*="embed-"]{overflow:hidden}
body[class*="embed-"] .topbar,
body[class*="embed-"] .controlbar,
body[class*="embed-"] .mobile-panel-tabs,
body[class*="embed-"] .map-hint,
body[class*="embed-"] #mobile-menu,
body[class*="embed-"] #settings-panel,
body[class*="embed-"] #selection-panel,
body[class*="embed-"] #selection-toggle{display:none!important}

body[class*="embed-"] .app-shell{height:100dvh;min-height:0;display:block;overflow:hidden}
body[class*="embed-"] .map-area{height:100dvh;min-height:0;overflow:hidden}
body[class*="embed-"] .lower-panel{display:none}


/* Herkomst blijft zichtbaar en opent de volledige app in een nieuw tabblad. */
body[class*="embed-"] .embed-credit{display:block;position:fixed;z-index:20;left:10px;bottom:8px;color:#cfe8ec;font:500 9px/1 'DM Mono';letter-spacing:1.4px;text-decoration:none;opacity:.75}
/* Linksboven in de twee insluitingen met de bol: bij welke datum en welk moment
   hoort dit beeld. Een insluiting heeft geen tijdbalk en geen klok in de balk,
   dus stond er nergens wat je zag. Rechtsonder staat de bedekking en linksonder
   de link naar de app; deze hoek was vrij. */
body.embed-follow .embed-clock,
body.embed-fixed .embed-clock{display:grid;position:fixed;z-index:20;left:10px;top:10px;gap:2px;margin:0;padding:7px 9px;background:rgba(6,24,41,.82);border:1px solid var(--line);border-radius:3px;color:#cfe8ec;pointer-events:none}
body.embed-follow .embed-clock[hidden],
body.embed-fixed .embed-clock[hidden]{display:none}
#embed-clock-date{font:500 9px/1.2 'DM Mono';letter-spacing:1.1px;color:#8eafb8}
#embed-clock-time{font:600 13px/1.1 'DM Mono';letter-spacing:.5px;color:#ffda63}
.high-contrast .embed-clock{background:#000;border-color:#fff}
body[class*="embed-"] .embed-credit:hover{opacity:1}
body[class*="embed-"] .embed-credit:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* De bediening bij de bol: rechtsboven in een raster van vier kolommen van 34 px.
   Bovenste rij zoom in, zoom uit, slot en volgen; onderste rij langzamer, de
   afspeelknop over twee kolommen en sneller. Het zijn de knoppen van de app zelf,
   door app.js hierheen verplaatst, dus toestand en terugkoppeling komen mee: slot
   en volgen staan ingedrukt zoals de insluitcode ze heeft meegegeven. Delen hoort
   hier niet: een embed draagt onderaan al een link naar de volledige app. */
body.embed-follow .zoom-controls,
body.embed-fixed .zoom-controls{display:grid;grid-template-columns:repeat(4,34px);gap:6px;top:10px;right:10px}
body.embed-point .zoom-controls,
body.embed-point #track-button{display:none!important}
body[class*="embed-"] .zoom-controls #share-button{display:none}
body[class*="embed-"] .zoom-controls .play-controls{display:contents}
body[class*="embed-"] .zoom-controls .play{grid-column:span 2}
body[class*="embed-"] .play{width:auto;min-width:0;min-height:0;height:34px;padding:0 5px;gap:3px;font:600 9px 'DM Mono';letter-spacing:.4px;overflow:hidden}
/* Het woord gaat eruit, het pictogram en de snelheid blijven: op 34 px hoog is
   ▶ (-256×) de langste tekst die er nog in past. */
body[class*="embed-"] .play span{display:none}
body[class*="embed-"] .play-step{width:34px;height:34px;padding:0;font-size:13px}
/* Volgen is hier een pictogram en geen woord. Het is getekend en niet gezet, net
   als het slot en het kruisje, en het leent de vormen uit de legenda: de gestreepte
   centrale baan met de schaduwellips erop. Beide staan op hetzelfde midden, zodat de
   baan door de ellips heen loopt en er niet onderdoor. currentColor doet de rest, dus de
   ingedrukte stand kleurt vanzelf goud mee. */
body[class*="embed-"] .zoom-controls #track-button{position:relative;top:auto;right:auto;width:34px;height:34px;padding:0;font-size:0}

/* Volgt de schaduw en vaste stand: alleen de globe. */
body.embed-follow #watch-guide,
body.embed-follow #point-card,
body.embed-fixed #watch-guide,
body.embed-fixed #point-card{display:none!important}

/* Gekozen punt: geen globe, alleen het paneel met de zon en de grafiek. */
body.embed-point #globe{display:none}
body.embed-point #watch-guide{display:none!important}
body.embed-point .map-area{display:block;background:#03101d}
/* Het paneel vult het hele kader en schuift niet: een insluiting van een vaste
   hoogte hoort geen schuifbalk te hebben. De hoogte en de schuifbalk staan in
   accessibility.css met !important (het paneel is daar een schuivend blad over
   de kaart), dus alleen !important wint hier; specificiteit helpt niet.
   De indeling is een raster in plaats van een omslaande rij, zodat de grafiek de
   ruimte krijgt die overblijft: titel bovenaan, gegevens links met de zon ernaast,
   en de grafiek over de volle breedte eronder. Onderaan blijft ruimte voor de
   afspeelrij. */
body.embed-point #point-card{position:static;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;max-height:none!important;height:100dvh;overflow:hidden!important;padding-bottom:54px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;transform:none!important;border:0;border-radius:0;background:#03101d!important}
/* De scheidingslijn boven de grafiek hoort bij een paneel dat meer dan de
   grafiek toont; hier is het paneel de grafiek, dus scheidt de lijn niets en
   liet zij vooral lege ruimte achter. */
body.embed-point .point-card__eclipse{flex:0 0 auto}body.embed-point .graph-pager{flex:1 1 auto;height:auto;min-height:0;margin-top:0;padding-top:0;border-top:0;grid-template-rows:minmax(0,1fr) auto}
body.embed-point .graph-pages{align-items:stretch;height:100%}
body.embed-point .timeline-wrap{min-height:0;display:flex;flex-direction:column}
body.embed-point .point-card__info{flex:0 0 auto;margin-bottom:6px}
body.embed-point .graph-canvas-slot{flex:1 1 auto;min-height:0}
/* Het label "Verduistering op gekozen punt" benoemt het paneel waar je al in
   kijkt; op een smal kader liep het over de tekst ernaast. De waarde blijft. */
body.embed-point .timeline-header{justify-content:flex-start}
body.embed-point .timeline-header span{display:none}
/* De afspeelrij staat middenonder, los van het paneel zodat het opnieuw opbouwen
   van de kaart haar niet meeneemt. */
body.embed-point .play-controls{position:fixed;z-index:9;left:50%;bottom:10px;transform:translateX(-50%);display:grid;grid-template-columns:34px 74px 34px;gap:6px}

/* Op een aanraakscherm zijn 34 px te klein om te raken: de stijlgids houdt daar
   42 aan voor een knop in de balk en 44 voor een stapknop. De hele bediening in
   een insluiting gaat daarom mee omhoog zodra de aanwijzer grof is. */
@media (pointer:coarse){
  body.embed-follow .zoom-controls,
  body.embed-fixed .zoom-controls{grid-template-columns:repeat(4,42px)}
  body.embed-point .play-controls{grid-template-columns:42px 92px 42px}
  body[class*="embed-"] .play{height:42px;padding:0 7px;gap:4px;font-size:10px;letter-spacing:.6px}
  body[class*="embed-"] .play-step{width:42px;height:42px;font-size:15px}
  /* Alleen de eigen kinderen: de afspeelrij staat op display:contents en heeft
     hierboven al haar eigen maten. */
  body[class*="embed-"] .zoom-controls > button{width:42px;height:42px}
  /* Volgen draagt zijn maat met een id, dus wint die van de regel hierboven;
     op een vinger hoort ook deze knop 42 te zijn. */
  body[class*="embed-"] .zoom-controls #track-button{width:42px;height:42px}
  body.embed-point #point-card{padding-bottom:62px}
}
/* Het bedekkingsvierkantje rechtsonder in een insluiting met de bol: dezelfde
   zonneschijf als in het puntkaartje, met het percentage eronder. Het staat
   tegenover de herkomstlink linksonder, en het is fixed omdat de kaartlaag bij
   iedere render opnieuw wordt opgebouwd. Overflow blijft zichtbaar: tijdens de
   totaliteit is de gloed om de schijf groter dan de schijf zelf, en die hoort
   juist over de rand heen te vallen. */
body.embed-follow .embed-coverage,
body.embed-fixed .embed-coverage{position:fixed;z-index:20;right:10px;bottom:10px;display:grid;justify-items:center;gap:7px;width:58px;padding:9px 4px 6px;border:1px solid var(--line);border-radius:3px;background:rgba(7,25,43,.82);overflow:visible}
body[class*="embed-"] .embed-coverage .eclipse-disc{flex:0 0 26px;width:26px;height:26px;--horizon:2px}body[class*="embed-"] .embed-coverage .eclipse-disc__note{display:none}
body[class*="embed-"] .embed-coverage b{color:#ffda63;font:600 11px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.5px}
/* De reden waarom er niets te zien is, is een zin en geen getal: kleiner en met
   ruimte om af te breken, zodat het vakje er niet van uitdijt. */
body[class*="embed-"] .embed-coverage b.embed-coverage__reason{color:#8eafb8;font:600 7px/1.25 'DM Mono',ui-monospace,monospace;letter-spacing:.2px;text-align:center}
body[class*="embed-"] .embed-coverage[hidden]{display:none!important}

/* Een breed en plat kader: de grafiek naast de gegevens in plaats van eronder.
   Onder de 320 pixels hoogte hield zij anders een strook van enkele tientallen
   pixels over, en dan is de vorm van de kromme niet meer te zien. */
@media (min-width:520px) and (max-height:320px){
  /* De gegevens van het punt naast de grafiek in plaats van erboven. Alleen op
     bladzijde één: de andere drie hebben geen gegevensblok en houden hun kolom. */
  body.embed-point .graph-pages>.timeline-wrap[data-graph="point"]{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.4fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:18px}
  body.embed-point [data-graph="point"]>.point-card__info{grid-column:1;grid-row:1/-1;align-content:center;margin-bottom:0}
  body.embed-point [data-graph="point"]>.timeline-header{grid-column:2;grid-row:1;margin-top:0;padding-top:0;border-top:0}
  body.embed-point [data-graph="point"]>.graph-canvas-slot,body.embed-point [data-graph="point"]>#timeline-not-visible{grid-column:2;grid-row:2;min-height:0}
  body.embed-point [data-graph="point"]>.timeline-times{grid-column:2;grid-row:3}
}

body.embed-point .embed-credit{position:fixed;left:12px;bottom:6px}

/* Een display-regel verslaat het hidden-attribuut, dus die moet expliciet
   worden teruggezet voor de herkomstlink, die tot de eerste render verborgen is. */
body[class*="embed-"] .embed-credit[hidden]{display:none!important}

/* Het insluitvenster onder het tandwiel neemt de rijvorm over van de
   instellingen erboven: een gevulde regel met het label links en de bediening
   rechts, in dezelfde maten, kleuren en letter als `.settings-item` en
   `.language-switch`. Zo hoort de sectie zichtbaar bij hetzelfde paneel. */
.embed-section{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.embed-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:38px;padding:8px 10px;background:#12334c;border:1px solid var(--line);border-radius:3px;color:#fff;font:10px 'DM Mono';letter-spacing:.8px}
.embed-field > span{min-width:0;text-transform:uppercase}
.embed-field:focus-within{border-color:#efbe3d}
/* appearance:none is nodig omdat WebKit een zoekveld ronde hoeken geeft en een
   tijdveld eigen binnenwerk meebrengt, en omdat een select zonder hoogte daar
   36px wordt tegen 28px in Chromium. Zonder deze regels heeft elk veld een
   andere vorm dan de keuzevelden erboven. */
.embed-field select,.embed-field input,.embed-field textarea{appearance:none;-webkit-appearance:none;flex:0 0 auto;box-sizing:border-box;height:28px;border:1px solid var(--line);border-radius:3px;background:#12334c;color:#fff;padding:0 7px;font:11px 'DM Mono';line-height:26px}
.embed-field select{width:150px;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,#b9d7db 50%),linear-gradient(135deg,#b9d7db 50%,transparent 50%);background-position:calc(100% - 12px) 12px,calc(100% - 7px) 12px;background-size:5px 5px;background-repeat:no-repeat}
.embed-field input[type=search]{width:150px}
.embed-field input[type=time]{width:104px;padding-right:4px}
.embed-field input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6);opacity:.7;cursor:pointer}
.embed-field input[type=search]::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none}
.embed-field select:focus-visible,.embed-field input:focus-visible,.embed-field textarea:focus-visible{outline:0;border-color:#efbe3d;box-shadow:0 0 0 1px #ffcf5266}
/* De insluitcode is te breed voor een rij en staat daarom onder zijn label. */
.embed-field--code{display:grid;align-items:stretch;gap:6px}
.embed-field--code textarea{width:100%;height:auto;min-height:52px;padding:6px 7px;resize:vertical;line-height:1.4;word-break:break-all}
.embed-results{position:relative;max-height:150px;overflow:auto;background:#0a253d;border:1px solid var(--line)}
.embed-results[hidden]{display:none}
.embed-results button{display:block;width:100%;border:0;border-bottom:1px solid var(--line);padding:7px 9px;background:transparent;color:#fff;text-align:left;font:11px Outfit;cursor:pointer}
.embed-results button small{display:block;color:#8eafb8;font:9px 'DM Mono'}
.embed-results button:hover,.embed-results button:focus-visible{background:#17425b}
.embed-copy{min-height:38px;border:1px solid #efbe3d;border-radius:3px;background:rgba(255,207,82,.1);color:#ffda63;padding:8px 10px;font:500 10px 'DM Mono';letter-spacing:.8px;text-transform:uppercase;cursor:pointer}
.embed-copy:disabled{opacity:.45;cursor:default}
.embed-copy.zoom-feedback{animation:zoom-feedback .45s ease-out}
.embed-status{margin:0;min-height:12px;color:#9fe6c8;font:9px 'DM Mono';letter-spacing:.8px}
.high-contrast .embed-status{color:#b8fff5}

/* Het instellingenpaneel is met de insluitsectie hoger dan een kort venster.
   Zonder begrenzing groeit de pagina eronder mee en gaat het document
   scrollen, wat de vaste app-indeling breekt. Het paneel is daarom zelf de
   enige scroller, waar de muis ook staat, en overscroll-behavior houdt de
   scroll binnen het paneel in plaats van hem aan de pagina door te geven.
   Gebruik hier geen -webkit-overflow-scrolling:touch: die legacy-eigenschap zet
   de scroll in een eigen laag die op iOS naar boven terugspringt zodra de
   hoogte tijdens het vegen verandert. De sectiekoppen scrollen gewoon mee; een
   kop die blijft staan terwijl de rest beweegt leest als een haperende pagina. */
.settings-panel{max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain}
/* Ook de bestaande keuzes in dit paneel krijgen die vaste hoogte. */
.settings-panel .language-switch select{appearance:none;-webkit-appearance:none;box-sizing:border-box;height:28px;padding:0 22px 0 7px;line-height:26px;background-image:linear-gradient(45deg,transparent 50%,#b9d7db 50%),linear-gradient(135deg,#b9d7db 50%,transparent 50%);background-position:calc(100% - 12px) 12px,calc(100% - 7px) 12px;background-size:5px 5px;background-repeat:no-repeat}
/* Op mobiel is het paneel een schermvullend blad met alleen interne scroll.
   Een aanraking die het einde van die scroll raakte, gaf de beweging door aan de
   pagina erachter; daarom liggen html en body vast zolang het paneel open staat,
   net als bij een dialoog. Bewust geen touch-action:none: die eigenschap erft
   door en zou ook de scroll binnen het paneel doodslaan. */
@media not all and (min-width:1280px) and (min-height:520px){
  .settings-panel{max-height:none}
  html.settings-open,body.settings-open{overflow:hidden;overscroll-behavior:none}
}