/* P238 slice 5: the real site's additions to the approved app styles (loaded only on simuly.ai/{lang}/). */

/* waiting tiles: the real pictures appear on the guide page, so a finished tile turns solid with a check */
.prog .tile.done{border-style:solid;border-color:color-mix(in oklch,var(--ok) 55%,var(--line));background:color-mix(in oklch,var(--ok) 12%,var(--surface))}
.prog .tile.done::before{animation:none;opacity:0}
.prog .tile.done::after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;
  animation:rise .3s var(--ease)}

/* "your guide is ready" — one calm card above the bottom edge, from any screen */
.vg-ready{position:fixed;z-index:60;inset-inline:12px;bottom:max(12px,env(safe-area-inset-bottom));margin-inline:auto;max-width:560px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px 12px;padding:12px 12px 12px 14px;
  border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 34px oklch(0.2 0.03 262 / .18);animation:rise .3s var(--ease)}
.vg-ready[hidden]{display:none}
.vg-ready .vg-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in oklch,var(--ok) 16%,transparent);color:var(--ok)}
.vg-ready .vg-ic .ic{width:20px;height:20px}
.vg-ready .vg-t{display:grid;min-width:0}
.vg-ready .vg-t b{font-size:.98rem;font-weight:800}
.vg-ready .vg-t bdi{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:.88rem}
.vg-ready .btn{min-height:42px;padding:0 16px}
.vg-ready .ghost{min-height:42px}
@media (max-width:760px){  /* above the phone tab bar */
  .vg-ready{bottom:calc(var(--tab-h) + 10px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  .vg-ready{grid-template-columns:auto minmax(0,1fr) auto}
  .vg-ready .ghost{display:none}
}
@media (prefers-reduced-motion:reduce){ .vg-ready,.prog .tile.done::after{animation:none} }

/* P241: "first steps ready" - the reader can start while the rest is drawn */
.vg-early{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:14px;padding:10px;
  border-radius:16px;background:color-mix(in oklch,var(--honey) 14%,var(--surface));border:1px solid color-mix(in oklch,var(--honey) 45%,var(--line));
  color:inherit;text-decoration:none;animation:rise .3s var(--ease)}
.vg-early[hidden]{display:none}
.vg-early img{width:84px;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block}
.vg-early .vg-t{display:grid;min-width:0}
.vg-early .vg-t b{font-size:1.02rem;font-weight:800}
.vg-early .vg-t small{color:var(--muted);font-size:.9rem}
.vg-early .btn{min-height:44px;padding:0 16px}
@media (max-width:420px){ .vg-early{grid-template-columns:auto minmax(0,1fr)} .vg-early .btn{grid-column:1 / -1} }
@media (prefers-reduced-motion:reduce){ .vg-early{animation:none} }

/* P250: the automatic lists sit above the user's own lists */
.listsp .lgrid.auto{margin-bottom:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}