/* global-learning-activity-styles.css
   Layout backbone for all Learning Activities (v1.0 rules)
*/
:root{
  --activity-max-width-desktop: 60vw;
  --activity-max-width-small: 90vw;
  --activity-total-height: 90vh;
  --activity-top-offset: 10px;
  --lb-height: 10vh;
 --titlebar-bg: linear-gradient(#ffffcc,#ccccaa);
/* --titlebar-bg: linear-gradient(#f3d782,#dcb54f);*/
  --titlebar-text: #233d7b;
  --shell-bg: #d9e6bc;--shell-border:#e8e2cf; --shell-shadow:0 8px 20px rgba(0,0,0,.06);
  --accent-gold-4:#d7b444;
}

/* Other colors for shell: #f2eeda; #ecf2df; #fffdf4;   */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#faf8f1;color:#263238;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;}
  
.activity-box{ position:relative;width:var(--activity-max-width-desktop);max-width:var(--activity-max-width-desktop);
  margin-inline:auto;margin-top:var(--activity-top-offset);min-height:var(--activity-total-height);
  background:var(--shell-bg);border:1px solid var(--shell-border);border-radius:16px;box-shadow:var(--shell-shadow);
  display:flex;flex-direction:column;}
  
  
.content-box{display:flex;flex-direction:column;flex:1 1 auto;padding:0 1rem 1rem;position:relative;}


.lilbit-composite{ margin-top:10px;display:flex;align-items:flex-start;justify-content:left;gap:12px;padding:0 1rem;}

.lilbit-composite .speech-bubble{ position:relative; overflow:visible; z-index:1;min-width:30%;max-width:50%;max-height:calc(var(--lb-height)*1.9);overflow:visible;background:#fff;
  border:1px solid var(--accent-gold-4);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:.35rem 1rem;position:relative;}


.speech-bubble:after{content:"";position:absolute;left:-10px;top:16px;width:0;height:0;border-top:8px solid transparent;
  border-bottom:8px solid transparent;border-right:10px solid var(--accent-gold-4);}
  
.speech-bubble:before{content:"";position:absolute;left:-9px;top:16px;width:0;height:0;border-top:7px solid transparent;
  border-bottom:7px solid transparent;border-right:9px solid #fff;}
  
.title-bar{height:calc(var(--lb-height)*0.5);min-height:44px;display:flex;align-items:center;justify-content:center;gap:12px;
  position:relative;background:var(--titlebar-bg);border:0px solid var(--shell-border);border-radius:10px;
  padding:.5rem 2.5rem;margin:.25rem auto .75rem;box-shadow:0 6px 16px rgba(255,255,200,.8) inset;}
  
.title-bar h1{font-family:"Playfair Display",serif;color:var(--titlebar-text);font-size:clamp(1.2rem, 2vw, 2rem);margin:0;text-align:center;line-height:1.15;}

.title-bar .title-logo{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:45px;height:45px;object-fit:contain;border-radius:50%;}

.activity-area{flex:1 1 auto;overflow:auto;padding:.5rem 0;}

.activity-credit{font-size:.78rem;color:#6b6b6b;text-align:center;margin-top:.5rem;}

.activity-credit a{color:inherit;text-decoration:underline;}

@media (max-width: 1025px){.activity-box{ position:relative;width:var(--activity-max-width-small);max-width:var(--activity-max-width-small);}}

@media (max-width: 768px){
  .activity-box{ position:relative;width:var(--activity-max-width-small);max-width:var(--activity-max-width-small);}
  .title-bar h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
}

.activity-logo{
  position:absolute;
  right:10px; top:10px;
  width:45px; height:45px;
  object-fit:contain;
  border-radius:50%;
  z-index:2;
}

@media (pointer: coarse){
  /* stop long-press callout or accidental selection during drags */
  .activity-area .stage{
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
  }
}