/* ======================================================================
   FABLES LIBRARY — GLOBAL LEARNING BOT UI SYSTEM
   Reusable visual/interaction grammar extracted from Shadow Choice Garden
   Phase 8 lock.

   CONTRACT (important):
   CSS styles the hierarchy, but it cannot guarantee state logic.
   Each visible interaction state should render 0 or 1 .fl-btn--primary.

   Recommended class families:
   .fl-btn .fl-btn--primary | --secondary | --ghost
   .fl-choice [aria-pressed="true"] | .is-correct | .is-incorrect
   .fl-pill | .is-current | .is-done
   .fl-grownup
   .fl-card | .fl-card--inner
   ====================================================================== */

:root{
  /* Brand palette */
  --fl-forest-dark:#1a3a2e;
  --fl-forest-deep:#2d5a4a;
  --fl-forest-mid:#3d6b58;
  --fl-sage:#718b7f;
  --fl-moss:#697d6f;
  --fl-cream:#f4f1e8;
  --fl-parchment:#e8e4d9;
  --fl-parchment-2:#ddd8c8;
  --fl-earth:#8b7355;
  --fl-gold:#D2AB66;
  --fl-gold-light:#EBCA87;
  --fl-gold-faint:rgba(210,171,102,.15);

  /* Semantic radii */
  /* Interactive controls share one corner radius for visual consistency. */
  --fl-radius-control:10px;
  --fl-radius-choice:10px;
  --fl-radius-inner:12px;
  --fl-radius-card:16px;
  --fl-radius-pill:999px;

  /* Spacing */
  --fl-space-1:.35rem;
  --fl-space-2:.5rem;
  --fl-space-3:.75rem;
  --fl-space-4:1rem;
  --fl-space-5:1.25rem;
  --fl-space-6:1.5rem;
  --fl-inline-gap:.4rem;
  --fl-control-gap:.625rem;
  --fl-card-gap:.75rem;
  --fl-section-gap:1rem;
  --fl-card-pad:.95rem;
  --fl-card-pad-compact:.75rem;

  /* Control sizes */
  --fl-control-height:48px;
  --fl-control-height-quiet:42px;
  --fl-icon-sm:18px;
  --fl-icon-md:24px;

  /* Command buttons */
  --fl-primary-bg:var(--fl-forest-deep);
  --fl-primary-hover:var(--fl-forest-dark);
  --fl-secondary-bg:rgba(255,250,240,.90);
  --fl-secondary-hover:rgba(210,171,102,.08);
  --fl-secondary-border:rgba(185,154,85,.46);
  --fl-secondary-border-hover:var(--fl-gold);

  /* Choice controls */
  --fl-choice-bg:rgba(255,250,240,.92);
  --fl-choice-bg-hover:rgba(255,255,255,.98);
  --fl-choice-border:rgba(185,154,85,.42);
  --fl-choice-selected-bg:rgba(45,90,74,.10);
  --fl-choice-selected-border:var(--fl-forest-deep);
  --fl-choice-selected-ring:rgba(45,90,74,.08);
  --fl-choice-correct-bg:rgba(74,124,63,.12);
  --fl-choice-correct-border:#4a7c3f;
  --fl-choice-incorrect-bg:rgba(139,115,85,.10);
  --fl-choice-incorrect-border:rgba(139,115,85,.66);
  --fl-choice-disabled-bg:rgba(244,241,232,.72);

  /* Pills */
  --fl-pill-min-height:30px;
  --fl-pill-pad-y:.30rem;
  --fl-pill-pad-x:.68rem;
  --fl-pill-font-size:.78rem;
  --fl-pill-neutral-bg:#f3f2ec;
  --fl-pill-neutral-border:rgba(113,139,127,.26);
  --fl-pill-neutral-text:#5c7066;
  --fl-pill-done-bg:rgba(45,90,74,.09);
  --fl-pill-done-border:rgba(45,90,74,.18);
  --fl-pill-done-text:#3f6657;
  --fl-pill-current-bg:var(--fl-forest-deep);
  --fl-pill-current-border:var(--fl-forest-deep);
  --fl-pill-current-text:#fff;

  /* For Grown-Ups */
  --fl-grownup-bg-top:#f7f4ed;
  --fl-grownup-bg-bottom:#f4f1e9;
  --fl-grownup-border:rgba(216,182,111,.28);
  --fl-grownup-accent:#d6aa56;
  --fl-grownup-text:#45685b;
  --fl-grownup-label:#8a6845;
  --fl-grownup-icon:var(--fl-forest-deep);
}

/* ---------- Global shrink / overflow safety ---------- */
*,*::before,*::after{box-sizing:border-box;}

.fl-bot,
.fl-screen,
.fl-shell,
.fl-content,
.fl-card,
.fl-card--inner,
.fl-grid,
.fl-row,
.fl-copy{
  min-width:0;
  max-width:100%;
}

.fl-screen,
.fl-content{
  overflow-wrap:anywhere;
}

img,svg,video,canvas,input,textarea,select{
  max-width:100%;
}

/* ---------- 1. COMMAND BUTTON HIERARCHY ---------- */
.fl-btn,
.btn-primary,
.btn-secondary,
.btn-ghost{
  max-width:100%;
  min-width:0;
  min-height:var(--fl-control-height);
  padding:11px 18px;
  border-radius:var(--fl-radius-control);
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.01em;
  white-space:normal;
  overflow-wrap:anywhere;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--fl-inline-gap);
  cursor:pointer;
  text-align:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}

/* CONTRACT: only one visible primary per interaction state. */
.fl-btn--primary,
.btn-primary{
  border:1.5px solid var(--fl-primary-bg);
  background:var(--fl-primary-bg);
  color:#fff;
  box-shadow:0 4px 12px rgba(26,58,46,.16);
}
.fl-btn--primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled){
  background:var(--fl-primary-hover);
  border-color:var(--fl-primary-hover);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(26,58,46,.20);
}
.fl-btn--primary:active:not(:disabled),
.btn-primary:active:not(:disabled){
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(26,58,46,.14);
}

.fl-btn--secondary,
.btn-secondary{
  border:1.5px solid var(--fl-secondary-border);
  background:var(--fl-secondary-bg);
  color:var(--fl-forest-dark);
  box-shadow:none;
}
.fl-btn--secondary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled){
  border-color:var(--fl-secondary-border-hover);
  background:var(--fl-secondary-hover);
  color:var(--fl-forest-deep);
  transform:translateY(-1px);
}

.fl-btn--ghost,
.btn-ghost{
  min-height:var(--fl-control-height-quiet);
  padding:8px 13px;
  border:1.5px solid rgba(185,154,85,.34);
  background:rgba(255,250,240,.66);
  color:var(--fl-forest-dark);
  box-shadow:none;
}
.fl-btn--ghost:hover:not(:disabled),
.btn-ghost:hover:not(:disabled){
  border-color:rgba(210,171,102,.78);
  background:rgba(255,250,240,.94);
  color:var(--fl-forest-deep);
  transform:translateY(-1px);
}

.fl-btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled{
  opacity:.52;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Active toggles are NOT primary actions. */
.fl-toggle[aria-pressed="true"]{
  color:var(--fl-forest-deep);
  border-color:var(--fl-choice-selected-border);
  background:var(--fl-choice-selected-bg);
  box-shadow:0 0 0 2px var(--fl-choice-selected-ring);
}

/* ---------- 2. CHOICE SYSTEM ---------- */
.fl-choice,
.choice-btn{
  position:relative;
  min-width:0;
  max-width:100%;
  min-height:var(--fl-control-height);
  padding:.75rem .9rem;
  border:1.5px solid var(--fl-choice-border);
  border-radius:var(--fl-radius-choice);
  background:var(--fl-choice-bg);
  color:var(--fl-forest-dark);
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-weight:700;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.fl-choice:hover:not(:disabled),
.choice-btn:hover:not(:disabled){
  border-color:var(--fl-gold);
  background:var(--fl-choice-bg-hover);
  color:var(--fl-forest-deep);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(26,58,46,.06);
}

.fl-choice[aria-pressed="true"],
.choice-btn[aria-pressed="true"]{
  border-color:var(--fl-choice-selected-border);
  background:var(--fl-choice-selected-bg);
  color:var(--fl-forest-deep);
  box-shadow:0 0 0 2px var(--fl-choice-selected-ring);
  transform:none;
}
.fl-choice[aria-pressed="true"]::after,
.choice-btn[aria-pressed="true"]::after{
  content:" ✓";
  font-weight:900;
  white-space:nowrap;
}

.fl-choice.is-correct{
  border-color:var(--fl-choice-correct-border);
  background:var(--fl-choice-correct-bg);
  color:var(--fl-forest-dark);
}
.fl-choice.is-correct::after{content:" ✓";font-weight:900;}
.fl-choice.is-incorrect{
  border-color:var(--fl-choice-incorrect-border);
  background:var(--fl-choice-incorrect-bg);
  color:var(--fl-earth);
}
.fl-choice.is-incorrect::after{content:" ×";font-weight:900;}
.fl-choice:disabled{
  opacity:.58;
  cursor:not-allowed;
  background:var(--fl-choice-disabled-bg);
  transform:none;
  box-shadow:none;
}

/* ---------- 3. PILL / COMPACT STATE SYSTEM ---------- */
.fl-pill{
  min-width:0;
  max-width:100%;
  min-height:var(--fl-pill-min-height);
  padding:var(--fl-pill-pad-y) var(--fl-pill-pad-x);
  border:1px solid var(--fl-pill-neutral-border);
  border-radius:var(--fl-radius-pill);
  background:var(--fl-pill-neutral-bg);
  color:var(--fl-pill-neutral-text);
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:var(--fl-pill-font-size);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.018em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
.fl-pill.is-done{
  border-color:var(--fl-pill-done-border);
  background:var(--fl-pill-done-bg);
  color:var(--fl-pill-done-text);
}
.fl-pill.is-done::before{content:"✓ ";font-weight:900;}
.fl-pill.is-current,
.fl-pill[aria-current="step"]{
  border-color:var(--fl-pill-current-border);
  background:var(--fl-pill-current-bg);
  color:var(--fl-pill-current-text);
}

.fl-step-rail{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.2rem;
}
.fl-step-rail .fl-pill{
  width:100%;
  padding:.34rem .28rem;
  font-size:clamp(.54rem,1.75vw,.66rem);
}

/* ---------- 4. FOR GROWN-UPS ---------- */
.fl-grownup{
  min-width:0;
  max-width:100%;
  padding:.85rem 1rem .9rem 1.05rem;
  border:1px solid var(--fl-grownup-border);
  border-left:3px solid var(--fl-grownup-accent);
  border-radius:0 var(--fl-radius-control) var(--fl-radius-control) 0;
  background:linear-gradient(180deg,var(--fl-grownup-bg-top),var(--fl-grownup-bg-bottom));
  color:var(--fl-grownup-text);
  font-family:'Nunito Sans',system-ui,sans-serif;
  text-align:left;
  box-shadow:none;
}
.fl-grownup__heading{
  display:block;
  margin:0 0 .45rem;
  color:var(--fl-grownup-label);
  font-size:.72rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.fl-grownup__list{
  list-style:none;
  margin:.35rem 0 0;
  padding:0;
  display:grid;
  gap:.38rem;
}
.fl-grownup__row{
  min-width:0;
  display:grid;
  grid-template-columns:1.35rem minmax(0,1fr);
  gap:.55rem;
  align-items:start;
}
.fl-grownup__icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:var(--fl-grownup-icon);
  margin-top:.05rem;
}
.fl-grownup__icon img,
.fl-grownup__icon svg{
  width:20px;
  height:20px;
  object-fit:contain;
}
.fl-grownup__row p{
  min-width:0;
  margin:0;
  color:var(--fl-grownup-text);
  font-size:.82rem;
  font-weight:500;
  line-height:1.52;
  overflow-wrap:anywhere;
}
.fl-grownup__row strong{color:var(--fl-grownup-label);font-weight:700;}
.fl-grownup details{margin-top:.35rem;}
.fl-grownup summary{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--fl-forest-deep);
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
}
.fl-grownup summary::-webkit-details-marker{display:none;}
.fl-grownup summary .fl-chevron{
  width:16px;
  height:16px;
  flex:0 0 auto;
  transition:transform .18s ease;
}
.fl-grownup details[open] summary .fl-chevron{transform:rotate(180deg);}

/* ---------- 5. SHARED GEOMETRY ---------- */
.fl-card{
  min-width:0;
  max-width:100%;
  padding:var(--fl-card-pad);
  border-radius:var(--fl-radius-card);
}
.fl-card--inner{
  min-width:0;
  max-width:100%;
  padding:var(--fl-card-pad-compact);
  border-radius:var(--fl-radius-inner);
}
.fl-btn-group,
.fl-choice-group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--fl-control-gap);
}
.fl-section + .fl-section{margin-top:var(--fl-section-gap);}

/* ---------- 6. RESPONSIVE / OVERFLOW PROTECTION ---------- */
.fl-grid{display:grid;gap:var(--fl-card-gap);min-width:0;}
.fl-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.fl-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.fl-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));}

.fl-btn > *,
.fl-choice > *,
.fl-grownup__row > *,
.fl-card > *,
.fl-card--inner > *{
  min-width:0;
}

@media (max-width:620px){
  .fl-grid--3,
  .fl-grid--5:not(.fl-step-rail){
    grid-template-columns:1fr;
  }
  .fl-btn-group,
  .fl-choice-group{
    flex-direction:column;
  }
  .fl-btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .fl-choice,
  .choice-btn{
    width:100%;
  }
  .fl-step-rail{gap:.14rem;}
  .fl-step-rail .fl-pill{
    min-height:30px;
    padding:.30rem .18rem;
    font-size:clamp(.50rem,2.35vw,.58rem);
    letter-spacing:.012em;
  }
}

@media (max-width:430px){
  .fl-card{padding:var(--fl-space-3);}
  .fl-grownup{padding:.8rem .82rem .85rem .9rem;}
}

@media (max-width:360px){
  .fl-btn,
  .btn-primary,
  .btn-secondary,
  .fl-choice,
  .choice-btn{
    padding-left:12px;
    padding-right:12px;
  }
}

/* ---------- 7. ACCESSIBILITY STATES ---------- */
.fl-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.fl-choice:focus-visible,
.choice-btn:focus-visible,
.fl-grownup summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--fl-forest-deep);
  outline-offset:3px;
  box-shadow:0 0 0 4px var(--fl-gold-faint);
}

[hidden]{display:none!important;}

/* Decorative icons inside an already-labelled control should use aria-hidden="true" in HTML. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .fl-btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover,
  .fl-choice:hover,
  .choice-btn:hover{
    transform:none!important;
  }
  .fl-grownup summary .fl-chevron{transition:none!important;}
}