/* =====================================================================
   Eras Biomer — workspace mode
   3-column layout (list + globe + detail panel) der overlejrer hovedappen
   når brugeren klikker 🌿 Biomer i topbar.
   ===================================================================== */

:root{
  --eb-bg:           #f6efde;          /* pergament */
  --eb-bg-dark:      #1a1c20;
  --eb-card:         #fffaf0;
  --eb-card-dark:    #25272d;
  --eb-line:         #d8c89e;
  --eb-line-dark:    #2f3138;
  --eb-text:         #2d2418;
  --eb-text-dark:    #e8e1cc;
  --eb-muted:        #6b5c44;
  --eb-muted-dark:   #97917f;
  /* Bordeaux/oxblood — manuskript-rubrikfarve.
     Popper på cream-pergament; glødor på mørk atlas. */
  --eb-accent:       #a0364a;
  --eb-accent-dark:  #e07688;
}

[data-theme="dark"]{
  --eb-bg: var(--eb-bg-dark);
  --eb-card: var(--eb-card-dark);
  --eb-line: var(--eb-line-dark);
  --eb-text: var(--eb-text-dark);
  --eb-muted: var(--eb-muted-dark);
  --eb-accent: var(--eb-accent-dark);
}

/* ─── Workspace overlay ─────────────────────────────────────────── */

/* Workspace floats LEFT + RIGHT chrome; topbar + timeline stay visible
   so the user can still switch tema, sprog, scrub time, and toggle
   biom-mode off via the green 🌿 Biomer button.                    */
#biomesWorkspace{
  position:fixed;
  top: 56px;                          /* below topbar  */
  bottom: var(--eras-bottom-gap, 18px); /* above timeline (timeline bottom:18px + height) */
  left: 0; right: 0;
  z-index: 25;                        /* above globe (z 1), below topbar (z 30) */
  display:none;
  grid-template-columns: 320px 1fr 380px;
  grid-template-areas: "list stage detail";
  background: transparent;
  color:var(--eb-text);
  font-family: inherit;
  pointer-events: none;
}
#biomesWorkspace > .eb-list,
#biomesWorkspace > .eb-detail{
  pointer-events: auto;
}
body[data-eras-banner="show"] #biomesWorkspace{ top: 82px; }
body[data-biomes-active="1"] #biomesWorkspace{ display:grid; }

/* Hide the left navigation panel only — it conflicts with biomes list.
   Topbar + timeline stay live.                                       */
body[data-biomes-active="1"] .left-panel,
body[data-biomes-active="1"] .city-legend,
body[data-biomes-active="1"] .zoom-hint{
  display:none !important;
}
/* Globe stays beneath, interactive in stage column. */
body[data-biomes-active="1"] #stage{ z-index: 1; position: relative; }
/* Lift the timeline dynamically so it never overlaps detail panel.
   Timeline-dock is fixed at bottom: 18px with height ~110-130px.    */
body[data-biomes-active="1"]{
  --eras-bottom-gap: 150px;
}
body[data-biomes-active="1"] .timeline-dock.is-collapsed ~ #biomesWorkspace,
body[data-biomes-active="1"]:has(.timeline-dock.is-collapsed){
  --eras-bottom-gap: 70px;
}

/* eb-header removed — topbar handles mode-toggle + theme/lang */
.eb-header{ display:none; }

/* ─── Left list ─────────────────────────────────────────────────── */

.eb-list{
  grid-area:list;
  background:var(--eb-card);
  border-right:1px solid var(--eb-line);
  overflow-y:auto;
  padding:14px 12px;
}
.eb-list__filter{
  margin-bottom:10px;
  display:flex; flex-direction:column; gap:8px;
}
.eb-list__filter input{
  width:100%;
  padding:8px 10px;
  font:inherit; font-size:13px;
  border:1px solid var(--eb-line);
  background:var(--eb-bg);
  color:var(--eb-text);
  border-radius:8px;
}
.eb-list__filter-row{
  display:flex; gap:6px; flex-wrap:wrap;
}
.eb-list__chip{
  padding:4px 10px; font-size:11px;
  border:1px solid var(--eb-line);
  border-radius:999px;
  background:var(--eb-bg);
  color:var(--eb-muted);
  cursor:pointer;
}
.eb-list__chip[data-on="1"]{
  background:var(--eb-accent);
  color:#fff;
  border-color:var(--eb-accent);
}
.eb-list__count{
  font-size:11px; color:var(--eb-muted);
  margin:8px 0 6px; letter-spacing:.04em; text-transform:uppercase;
}
.eb-card{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px;
  border:1px solid var(--eb-line);
  border-radius:10px;
  background:var(--eb-bg);
  margin-bottom:8px;
  cursor:pointer;
  transition: border-color .15s, transform .15s;
}
.eb-card:hover{ border-color:var(--eb-accent); transform:translateY(-1px); }
.eb-card[data-active="1"]{
  border-color:var(--eb-accent); background:var(--eb-card);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--eb-accent) 30%, transparent);
}
.eb-card__icon{ font-size:22px; line-height:1; padding-top:2px; }
.eb-card__body{ flex:1; min-width:0; }
.eb-card__title{ font-weight:600; font-size:13.5px; }
.eb-card__period{ font-size:11px; color:var(--eb-muted); margin-top:2px; }
.eb-card__hint{
  font-size:11.5px; color:var(--eb-muted);
  margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ─── Center stage (globe area) ─────────────────────────────────── */

.eb-stage{
  grid-area:stage;
  position:relative;
  background: transparent;            /* let globe show through */
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  pointer-events:none;                /* clicks pass to globe below */
}
.eb-stage > *{ pointer-events:auto; } /* re-enable for overlay UI */
.eb-stage__placeholder{
  text-align:center;
  color:var(--eb-muted);
  font-size:13px;
  padding:40px;
}
.eb-stage__placeholder strong{
  display:block; color:var(--eb-text);
  font-size:16px; margin-bottom:6px;
}
.eb-stage__viewport{
  position:absolute; inset:0;
  /* this is where we'll move the existing globe canvas during workspace */
}

.eb-stage__overlay{
  position:absolute;
  left:14px; bottom:14px;
  background:var(--eb-card);
  border:1px solid var(--eb-line);
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
  color:var(--eb-muted);
  max-width:380px;
  pointer-events:none;
}
.eb-stage__overlay strong{ color:var(--eb-text); }

.eb-stage__layers{
  position:absolute;
  right:14px; top:14px;
  background:var(--eb-card);
  border:1px solid var(--eb-line);
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
  min-width:180px;
}
.eb-stage__layers h4{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--eb-muted);
}
.eb-stage__layer-row{
  display:flex; align-items:center; gap:8px;
  padding:3px 0;
}
.eb-stage__layer-row input{ accent-color: var(--eb-accent); }

/* ─── Right detail panel ────────────────────────────────────────── */

.eb-detail{
  grid-area:detail;
  background:var(--eb-card);
  border-left:1px solid var(--eb-line);
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.eb-detail__empty{
  padding:40px 20px;
  color:var(--eb-muted);
  text-align:center;
  font-size:13px;
}
.eb-detail__hero{
  padding:18px 18px 12px;
  border-bottom:1px solid var(--eb-line);
}
.eb-detail__hero-row{ display:flex; align-items:center; gap:10px; }
.eb-detail__icon{ font-size:32px; line-height:1; }
.eb-detail__title{ font-size:18px; font-weight:600; flex:1; }
.eb-detail__period{ font-size:12px; color:var(--eb-muted); margin-top:6px; }
.eb-detail__period-pick{
  display:flex; gap:4px; flex-wrap:wrap; margin-top:8px;
}
.eb-detail__period-btn{
  font:inherit; font-size:11px;
  padding:4px 8px;
  border:1px solid var(--eb-line);
  background:var(--eb-bg); color:var(--eb-muted);
  border-radius:999px;
  cursor:pointer;
}
.eb-detail__period-btn[data-on="1"]{
  background:var(--eb-accent); color:#fff; border-color:var(--eb-accent);
}

/* Region picker — multi-region biomes (Amazonas / Congo / SE-Asien etc.) */
.eb-detail__region-pick{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--eb-border, #e2dccd);
}
.eb-detail__region-label{
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--eb-muted); margin-right:2px;
}
.eb-detail__region-btn{
  font:inherit; font-size:11px;
  padding:4px 10px;
  background:transparent;
  border:1px solid var(--eb-border, #d8d2c2);
  border-radius:999px;
  color:var(--eb-fg, #2a2618);
  cursor:pointer;
}
.eb-detail__region-btn:hover{ background:rgba(0,0,0,0.04); }
.eb-detail__region-btn[data-on="1"]{
  background:var(--eb-accent); color:#fff; border-color:var(--eb-accent);
}

/* Era-scrubber — vises i biom-panelet for regioner med ≥2 eraer.
   Default følger den store tidslinje; klik på en pille låser; "📌 låst"
   knappen slår låsen fra. Vandret scroll hvis der er mange eraer. */
.eb-detail__era-pick{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  margin-top:8px; padding:8px 0 4px;
  position:relative; z-index:2;
  /* Pills wrapper til ny linje når der ikke er plads. */
}
.eb-detail__era-pick::-webkit-scrollbar{ display:none; }
.eb-detail__era-label{
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--eb-muted); margin-right:2px;
  flex-shrink:0;
}
.eb-detail__era-btn{
  font:inherit; font-size:11px;
  padding:3px 9px;
  background:var(--eb-bg);
  border:1px solid var(--eb-line);
  border-radius:99px;
  color:var(--eb-fg, #2a2618);
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:background 0.12s, border-color 0.12s;
}
.eb-detail__era-btn:hover{ background:rgba(0,0,0,0.04); }
.eb-detail__era-btn[data-on="1"]{
  background:var(--eb-accent); color:#fff; border-color:var(--eb-accent);
}
.eb-detail__era-unpin{
  font:inherit; font-size:10px;
  padding:3px 9px;
  background:transparent;
  border:1px dashed var(--eb-accent, #b58a3c);
  border-radius:99px;
  color:var(--eb-accent, #b58a3c);
  cursor:pointer;
  margin-left:4px;
  flex-shrink:0;
  white-space:nowrap;
}
.eb-detail__era-unpin:hover{ background:rgba(181,138,60,0.08); }

/* Era pill — shows which historical era is active for the region */
.eb-era-pill{
  display:inline-block;
  font-size:11px; letter-spacing:0.04em;
  padding:3px 9px; margin:2px 0 8px;
  background:rgba(180,140,60,0.14);
  border:1px solid rgba(180,140,60,0.35);
  color:var(--eb-fg, #2a2618);
  border-radius:14px;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  line-height:1.45;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* Peoples list inside Mennesket-tab */
.eb-peoples{ margin:6px 0 10px; padding-left:18px; }
.eb-peoples li{ margin-bottom:3px; font-size:13px; }

/* Region timeline rows */
.eb-region-timeline{
  margin:4px 0 12px;
  border-left:2px solid var(--eb-border, #d8d2c2);
  padding-left:10px;
}
.eb-region-timeline__row{
  display:grid;
  grid-template-columns:84px 1fr auto;
  gap:8px; align-items:baseline;
  padding:4px 0;
  font-size:12px;
}
.eb-region-timeline__year{
  color:var(--eb-muted);
  font-variant-numeric:tabular-nums;
  font-size:11px;
}
.eb-region-timeline__text{ color:var(--eb-fg, #2a2618); }
.eb-region-timeline__row.is-now{
  background:linear-gradient(90deg, rgba(180,140,60,0.12), transparent);
  border-radius:4px;
  padding:4px 6px;
  margin-left:-6px;
}
.eb-region-timeline__pin{
  font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background:var(--eb-accent, #b58a3c);
  padding:2px 7px; border-radius:999px;
  white-space:nowrap;
}

.eb-detail__levels{
  display:flex; gap:0;
  padding:8px 14px;
  border-bottom:1px solid var(--eb-line);
  background:var(--eb-bg);
}
.eb-detail__level{
  flex:1;
  font:inherit; font-size:12px;
  background:transparent;
  border:1px solid var(--eb-line);
  border-right:none;
  padding:5px 8px;
  color:var(--eb-muted);
  cursor:pointer;
}
.eb-detail__level:first-child{ border-radius:6px 0 0 6px; }
.eb-detail__level:last-child{ border-right:1px solid var(--eb-line); border-radius:0 6px 6px 0; }
.eb-detail__level[data-on="1"]{
  background:var(--eb-accent); color:#fff; border-color:var(--eb-accent);
}

.eb-detail__tabs{
  display:flex;
  border-bottom:1px solid var(--eb-line);
}
.eb-detail__tab{
  flex:1;
  font:inherit; font-size:12px;
  background:transparent; border:none;
  padding:10px 4px;
  color:var(--eb-muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
}
.eb-detail__tab[data-on="1"]{
  color:var(--eb-text);
  border-bottom-color:var(--eb-accent);
  font-weight:600;
}

.eb-detail__body{
  flex:1;
  padding:14px 18px 24px;
  font-size:13.5px;
  line-height:1.5;
}
.eb-detail__body h4{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--eb-muted);
  margin:14px 0 6px;
  font-weight:600;
}
.eb-detail__body h4:first-child{ margin-top:0; }
.eb-detail__body p{ margin:0 0 10px; }
.eb-detail__body ul{ margin:4px 0 10px; padding-left:18px; }
.eb-detail__body li{ margin:2px 0; }
.eb-detail__body em{ color:var(--eb-muted); font-style:normal; font-size:12px; }

.eb-fact{
  margin:10px 0;
  padding:10px 12px;
  border-left:3px solid var(--eb-accent);
  background:var(--eb-bg);
  border-radius:0 6px 6px 0;
}

.eb-detail__actions{
  padding:12px 14px;
  border-top:1px solid var(--eb-line);
  display:flex; gap:8px; flex-wrap:wrap;
  background:var(--eb-bg);
}
.eb-detail__action{
  font:inherit; font-size:12px;
  padding:7px 12px;
  background:var(--eb-card);
  border:1px solid var(--eb-line);
  color:var(--eb-text);
  border-radius:8px;
  cursor:pointer;
}
.eb-detail__action--primary{
  background:var(--eb-accent); color:#fff; border-color:var(--eb-accent);
}
.eb-detail__action[disabled]{ opacity:.45; cursor:not-allowed; }

/* Cultural sites list */
.eb-cultural{
  display:flex; flex-direction:column; gap:6px;
}
.eb-cultural__row{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  background:var(--eb-bg);
  border:1px solid var(--eb-line);
  border-radius:6px;
  font-size:12.5px;
  cursor:pointer;
}
.eb-cultural__row:hover{ border-color:var(--eb-accent); }
.eb-cultural__year{
  color:var(--eb-muted);
  font-variant-numeric: tabular-nums;
  font-size:11px; min-width:62px;
}

.eb-placeholder-img{
  width:100%; aspect-ratio: 16/9;
  display:flex; align-items:center; justify-content:center;
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--eb-line) 40%, transparent) 0 6px,
    transparent 6px 12px);
  border:1px dashed var(--eb-line);
  border-radius:8px;
  color:var(--eb-muted); font-size:11px;
  margin-bottom:10px;
}

/* Edit mode controls (placeholder; phase 2 wires real flow) */
.eb-edit-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  font-size:10px;
  background:var(--eb-accent); color:#fff;
  border-radius:999px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* ─── Layer rationale panel ───────────────────────────────────── */
.eb-layers__year{
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--eb-muted); margin-bottom:6px;
}
.eb-layers__pill{
  display:inline-block; margin:2px 4px 4px 0;
  padding:3px 8px; font-size:11px;
  background:var(--eb-bg); border:1px solid var(--eb-line);
  border-radius:11px; color:var(--eb-text);
}
.eb-layers__group{ margin-top:10px; }
.eb-layers__group h5{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--eb-muted); margin:0 0 4px;
}
.eb-layers__group ul{ list-style:none; padding:0; margin:0; }
.eb-layers__group li{
  font-size:12px; padding:2px 0;
  display:flex; align-items:center; gap:6px;
}
.eb-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.eb-muted{ color:var(--eb-muted); font-size:11px; }
.eb-layers__empty{ font-size:12px; color:var(--eb-muted); padding:6px 0; }

/* ─── Edit modal (phase 2) ─────────────────────────────────────── */
.eb-edit-overlay{
  position:fixed; inset:0; z-index:120;
  background: rgba(20,18,12,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.eb-edit-modal{
  width:min(720px, 100%);
  max-height: calc(100vh - 48px);
  background:var(--eb-card);
  color:var(--eb-text);
  border:1px solid var(--eb-line);
  border-radius:14px;
  display:flex; flex-direction:column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow:hidden;
}
.eb-edit-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--eb-line);
  background:var(--eb-bg);
}
.eb-edit-head-l{ display:flex; gap:12px; align-items:center; flex:1; min-width:0; }
.eb-edit-icon{ font-size:30px; line-height:1; }
.eb-edit-title{ font-size:16px; font-weight:600; }
.eb-edit-sub{ font-size:11.5px; color:var(--eb-muted); margin-top:2px; letter-spacing:.03em; }
.eb-edit-close{
  background:transparent; border:1px solid var(--eb-line);
  color:var(--eb-text);
  width:32px; height:32px;
  border-radius:8px; cursor:pointer;
  font-size:14px;
}
.eb-edit-close:hover{ background:var(--eb-card); }
.eb-edit-body{
  flex:1; overflow-y:auto;
  padding:14px 18px;
  display:flex; flex-direction:column; gap:14px;
}
.eb-edit-row{ display:flex; flex-direction:column; gap:6px; }
.eb-edit-label{
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--eb-muted);
  font-weight:600;
}
.eb-edit-bilingual{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.eb-edit-bilingual label{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--eb-muted); }
.eb-edit-bilingual span{ font-weight:600; letter-spacing:.05em; }
.eb-edit-modal textarea{
  width:100%;
  font:inherit; font-size:13px;
  padding:8px 10px;
  border:1px solid var(--eb-line);
  background:var(--eb-bg);
  color:var(--eb-text);
  border-radius:8px;
  resize:vertical;
  min-height:48px;
}
.eb-edit-modal textarea:focus{ outline:2px solid var(--eb-accent); outline-offset:1px; }
.eb-edit-foot{
  display:flex; justify-content:flex-end; gap:8px;
  padding:12px 18px;
  border-top:1px solid var(--eb-line);
  background:var(--eb-bg);
}
.eb-edit-btn{
  font:inherit; font-size:13px;
  padding:8px 14px;
  background:var(--eb-card);
  border:1px solid var(--eb-line);
  color:var(--eb-text);
  border-radius:8px;
  cursor:pointer;
}
.eb-edit-btn--primary{
  background:var(--eb-accent); border-color:var(--eb-accent); color:#fff;
}
.eb-edit-btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* Niveau editor (Let / Mellem / Dyb) */
.eb-edit-legend{
  display:flex; align-items:center; gap:8px;
  padding:8px 18px;
  font-size:11.5px; color:var(--eb-muted);
  border-bottom:1px solid var(--eb-line);
  background:var(--eb-bg);
}
.eb-edit-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  vertical-align:middle; margin-right:4px;
}
.eb-edit-dot--draft{ background:#e0a82e; box-shadow:0 0 0 2px rgba(224,168,46,.18); }
.eb-edit-row--niveau{
  border:1px solid var(--eb-line);
  border-radius:8px;
  padding:10px 12px;
  background:rgba(255,255,255,0.02);
}
.eb-edit-row--niveau > .eb-edit-label{
  margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.eb-edit-niveau{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--eb-line);
}
.eb-edit-niveau:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.eb-edit-niveau-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-bottom:6px;
}
.eb-edit-niveau-head strong{
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--eb-text);
}
.eb-edit-niveau-hint{
  font-size:10.5px; color:var(--eb-muted);
  font-style:italic;
}

.eb-toast{
  position:fixed; left:50%; bottom:32px;
  transform: translateX(-50%) translateY(20px);
  background:#222; color:#fff;
  padding:10px 16px;
  border-radius:8px;
  font-size:13px;
  z-index:130;
  opacity:0; transition: opacity .2s, transform .2s;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.eb-toast.on{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px){
  #biomesWorkspace{ grid-template-columns: 280px 1fr 340px; }
}
@media (max-width: 900px){
  #biomesWorkspace{
    grid-template-columns: 1fr;
    grid-template-rows: 56px 220px 1fr 1fr;
    grid-template-areas:
      "header"
      "stage"
      "list"
      "detail";
  }
  .eb-list, .eb-detail{ border-left:none; border-right:none; }
  .eb-list{ border-bottom:1px solid var(--eb-line); }
}

/* Sørg for at biome-detail kan scrolles helt forbi timeline-dock nederst */
.eb-detail{
  padding-bottom: 140px;
}
/* Samme for biome-listen (venstre side) — så Tundra/Boreal taiga ikke gemmes */
#biomesWorkspace [data-eb="list"]{
  padding-bottom: 140px;
}