@layer base, layout, components, overlays, responsive;

/* BASE -------------------------------- */
@layer base {
  * { box-sizing: border-box; }
  html, body {
    height: 100%;
    margin: 0;
    background: #111;
    color: #eee;
    font-family: "Tomorrow", sans-serif;
  }
  button, input[type="range"] { accent-color: #7fb5ff; }
}

/* LAYOUT ------------------------------- */
@layer layout {
  body { display: flex; flex-direction: column; }
  #viewer { flex: 1 1 auto; min-height: 0; position: relative; }
  #viewer .openseadragon-container > div[style*="position: absolute"][style*="left: 0px"][style*="top: 0px"] { z-index: 11; pointer-events: auto;  }
  #viewer .openseadragon-canvas { position: relative; z-index: 2; }
  #viewer .openseadragon-overlay { position: relative; z-index: 3; pointer-events: auto;}
  #fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

  #viewer .navigator,
  #viewer [id="navigator_"] {
    position: absolute;
    z-index: 12;
    pointer-events: auto;
  }
}

/* COMPONENTS --------------------------- */
@layer components {
  #cityPopup {
    position: absolute; z-index: 9999; pointer-events: auto;
    max-width: 260px; background: rgba(54, 54, 54, 0.95);
    color: #eee; border: 1px solid #444; border-radius: 8px;
    padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
    transform: translate(-50%, -100%);
  }
  #cityPopup h4 { margin: 0 0 6px 0; font-size: 1rem; }
  #cityPopup table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  #cityPopup td { padding: 2px 0; vertical-align: top; }
  #cityPopup td:first-child { opacity:.8; padding-right: 8px; white-space: nowrap; }
  #cityPopup .close { position:absolute; top:4px; right:6px; cursor:pointer; opacity:.7; }

  #controls, .statbar {
    display: flex; align-items: center;
    gap: 10px; padding: 6px 14px;
    background: #1b1b1b; border-top: 1px solid #2a2a2a;
    flex: 0 0 auto;
  }

  #controls button {
    font-size: 16px;
    padding: 10px 14px;
    min-height: 40px;
    line-height: 1;
  }

  .statbar { font-variant-numeric: tabular-nums; }
  .statbar { gap: 35px; font-size: 1.2rem; opacity: .9; background: #141414; }
  .statbar {
    display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
  .statbar .kv { display: inline-flex; gap: 6px; align-items: baseline; }

  #hudFrame { padding-right: 12px;  padding-top: 4px; text-align: center; font-family:'Workbench', sans-serif; font-size: 1.8rem; align-self: center;}

  #scrub { flex: 1; }
}

/* OVERLAYS ----------------------------- */
@layer overlays {
  .label {
    padding: var(--pad, 1px, 1px);
    font-size: var(--size, 0.6rem);
    font-weight: var(--weight, 300);
    background: var(--bg, rgba(255, 255, 255, 0.65)); 

    position: absolute;
    line-height: 0; font-family: "Inter", sans-serif;
    text-shadow: 0 0 10px #000; text-indent: 7px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px; pointer-events: auto; cursor: pointer; user-select: none; white-space: nowrap;
    transform: translate(0%, 0%);
  }
  .label0 {
    --pad: 2px 2px;
    --size: 0.6rem; --weight: 100;
    --bg: rgba(255, 255, 255, 0.65); 
  }
  .label1 {
    --pad: 2px 2px;
    --size: 0.7rem; --weight: 300;
    --bg: rgba(255, 81, 95, 0.65); 
  }
  .label2 {
    --pad: 4px 4px;
    --size: 0.8rem; --weight: 400;
    --bg: rgba(255, 136, 24, 0.65);
  }
  .label3 {
    --pad: 4px 4px;
    --size: 1rem; --weight: 600;
    --bg: rgba(255, 251, 0, 0.65);
  }
  .label4 {
    --pad: 6px 6px;
    --size: 1.1rem; --weight: 700;
    --bg: rgba(81, 255, 0, 0.65);
  }
}

/* RESPONSIVE --------------------------- */
@layer responsive {
  @media (min-width: 1001px) {
    .statbar .kv span { min-width: 3ch; text-align: left; }
    #hudFrame { min-width: 8ch; }
    #hudDate { min-width: 14ch; }
    #hudCities { min-width: 3ch; }
    #hudPop { min-width: 10ch; }
  }
    
  @media (max-width: 1000px) {
    .statbar { flex-direction: column; align-items: stretch; gap: 6px; }
    .statbar .kv span { text-align: left; }
    .statbar .kv { justify-content: space-between; }
    #hudFrame { align-self: center; width: fit-content; text-align: center;}
  }
}