/* ELS Sales Kit — modul "Skrip & Template" (scripts).
   Tokens only. Every selector is prefixed .m-scripts (the page view, and the module's sheets via class). */

.m-scripts .s-body { min-width: 0; }

/* ---------- Library layout: search + category rail + cards ---------- */
.m-scripts .s-lib {
  display: grid; gap: var(--space-4); min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "search" "rail" "main";
}
.m-scripts .s-search { grid-area: search; min-width: 0; }
.m-scripts .s-main { grid-area: main; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.m-scripts .s-rail {
  grid-area: rail; display: flex; gap: 8px; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 4px 2px; margin: -4px -2px;
}
.m-scripts .s-rail::-webkit-scrollbar { display: none; }
.m-scripts .s-cat {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 10px 0 6px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--stroke);
  color: var(--muted); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; text-align: left;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.m-scripts .s-cat .tile { width: 30px; height: 30px; border-radius: 50%; }
.m-scripts .s-cat:hover { color: var(--text); border-color: var(--stroke-strong); }
.m-scripts .s-cat:active { transform: scale(.97); }
.m-scripts .s-cat.is-active { color: var(--text); background: var(--accent-soft); border-color: var(--accent-glow); }
.m-scripts .s-cat-label { min-width: 0; }
.m-scripts .s-cat-count {
  flex: none; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--muted);
}
.m-scripts .s-cat.is-active .s-cat-count { background: var(--accent); color: var(--on-accent); }
@media (min-width: 1024px) {
  .m-scripts .s-lib {
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-areas: "rail search" "rail main";
    column-gap: var(--space-6); align-items: start;
  }
  .m-scripts .s-rail {
    flex-direction: column; gap: 2px; margin: 0; padding: 8px;
    position: sticky; top: calc(var(--topbar-h) + 12px);
    max-height: calc(100vh - var(--topbar-h) - 32px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
    border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--stroke);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
  }
  .m-scripts .s-cat { width: 100%; padding: 6px 10px 6px 6px; border-radius: 14px; border-color: transparent; background: transparent; white-space: normal; line-height: 1.3; }
  .m-scripts .s-cat:hover { background: var(--surface-2); border-color: transparent; }
  .m-scripts .s-cat.is-active { background: var(--accent-soft); border-color: transparent; }
  .m-scripts .s-cat-label { flex: 1; }
}

.m-scripts .s-resmeta { font-size: var(--fs-xs); font-weight: 700; color: var(--dim); padding: 0 2px; }
.m-scripts .s-info { display: flex; flex-direction: column; gap: var(--space-3); }
.m-scripts .s-info:empty { display: none; }
.m-scripts .s-info-note { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.m-scripts .s-cross {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px;
  border-radius: var(--radius); border: 1px dashed var(--accent-glow); background: var(--accent-soft);
  color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 650; text-align: left;
}

/* ---------- Script cards ---------- */
.m-scripts .s-cards {
  display: grid; gap: var(--space-3); align-items: start; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 296px), 1fr));
}
.m-scripts .s-group-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: var(--space-3) 2px 0; min-width: 0; }
.m-scripts .s-group-head:first-child { padding-top: 0; }
.m-scripts .s-group-title { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-scripts .s-group-more {
  position: relative; margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 2px;
  min-height: 32px; padding: 0 6px 0 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 750; color: var(--accent-ink);
}
.m-scripts .s-group-more:hover { background: var(--surface-2); }
.m-scripts .s-group-more::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.m-scripts .s-card { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4) var(--space-5); }
.m-scripts .s-card.is-custom { border-color: var(--violet-glow); }
.m-scripts .s-card-head { display: flex; align-items: flex-start; gap: 12px; }
.m-scripts .s-card-titles { flex: 1; min-width: 0; padding-top: 4px; }
.m-scripts .s-card-title { font-size: var(--fs-base); font-weight: 750; line-height: 1.35; letter-spacing: -.005em; overflow-wrap: anywhere; }
.m-scripts .s-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.m-scripts .s-meta-cat { font-size: var(--fs-xs); font-weight: 700; color: var(--dim); }
.m-scripts .s-fav {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px -6px 0;
  border-radius: 50%; color: var(--dim);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.m-scripts .s-fav:hover { color: var(--amber-ink); background: var(--surface-2); }
.m-scripts .s-fav:active { transform: scale(.9); }
.m-scripts .s-fav.is-on { color: var(--amber); }
.m-scripts .s-fav.is-on .ico { fill: currentColor; }
.m-scripts .s-fav.pop .ico { animation: sStar .55s var(--ease-spring); }
.m-scripts .s-situation { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.m-scripts .s-situation-label {
  display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
}
.m-scripts .s-text {
  position: relative; margin: 0; padding: 14px 16px 14px 18px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke);
  font-size: var(--fs-base); line-height: 1.65; color: var(--text); white-space: pre-line; overflow-wrap: anywhere;
}
.m-scripts .s-text::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--accent), var(--accent-2));
}
.m-scripts .s-ph {
  padding: 1px 7px; border-radius: 8px; font-size: .92em; font-weight: 700;
  background: var(--amber-soft); color: var(--amber-ink); border: 1px dashed var(--amber-glow);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.m-scripts .s-ph.is-auto { background: var(--green-soft); color: var(--green-ink); border-style: solid; border-color: transparent; }
.m-scripts .s-gap {
  display: inline-block; min-width: 2.2em; padding: 0 6px; border-radius: 8px; text-align: center; font-weight: 800;
  background: var(--pink-soft); color: var(--pink-ink); border: 1px dashed var(--pink-glow);
}
.m-scripts mark { background: var(--amber-soft); color: inherit; border-radius: 4px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--amber-glow); }
.m-scripts .s-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.m-scripts .s-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--stroke); background: transparent;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 750;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.m-scripts .s-toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.m-scripts .s-toggle:hover { color: var(--text); border-color: var(--stroke-strong); }
.m-scripts .s-toggle-chev { transition: transform var(--dur) var(--ease); }
.m-scripts .s-toggle.is-open .s-toggle-chev { transform: rotate(180deg); }
.m-scripts .s-toggle.is-tips.is-open { color: var(--amber-ink); background: var(--amber-soft); border-color: transparent; }
.m-scripts .s-toggle.is-avoid.is-open { color: var(--red-ink); background: var(--red-soft); border-color: transparent; }
.m-scripts .s-panel {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text); animation: sDrop var(--dur-slow) var(--ease-out);
}
.m-scripts .s-panel > .ico { flex: none; margin-top: 2px; }
.m-scripts .s-panel-tips { background: var(--amber-soft); }
.m-scripts .s-panel-tips > .ico { color: var(--amber-ink); }
.m-scripts .s-panel-avoid { background: var(--red-soft); }
.m-scripts .s-panel-avoid > .ico { color: var(--red-ink); }
.m-scripts .s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-scripts .s-actions-end { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.m-scripts .s-act-wa { color: var(--green-ink); }

/* ---------- Skrip saya ---------- */
.m-scripts .s-mine { display: flex; flex-direction: column; gap: var(--space-3); }
.m-scripts .s-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }

/* ---------- Latihan (flashcards) ---------- */
.m-scripts .s-practice { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 760px; margin: 0 auto; min-width: 0; }
.m-scripts .s-pr-intro { display: flex; align-items: center; gap: 12px; }
.m-scripts .s-pr-cats { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 4px 2px; margin: -4px -2px; }
.m-scripts .s-pr-cats::-webkit-scrollbar { display: none; }
.m-scripts .s-pr-cats .chip { flex: none; }
@media (min-width: 720px) { .m-scripts .s-pr-cats { flex-wrap: wrap; overflow: visible; } }
.m-scripts .s-flash-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.m-scripts .s-flash {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5);
  animation: sFlashIn .45s var(--ease-out) both;
}
.m-scripts .s-flash-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--muted); min-width: 0; }
.m-scripts .s-flash-cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-scripts .s-flash-left { margin-left: auto; flex: none; font-size: var(--fs-xs); font-weight: 750; color: var(--dim); }
.m-scripts .s-flash-situation { font-size: var(--fs-xl); font-weight: 800; line-height: 1.28; letter-spacing: -.015em; overflow-wrap: anywhere; }
.m-scripts .s-flash-topic { font-size: var(--fs-sm); color: var(--muted); }
.m-scripts .s-flash-think {
  display: flex; align-items: center; gap: 10px; margin: var(--space-2) 0; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px dashed var(--stroke-strong); color: var(--muted); font-size: var(--fs-sm); font-weight: 650;
}
.m-scripts .s-flash-think .ico { color: var(--accent-ink); flex: none; animation: sPulse 2.4s ease-in-out infinite; }
.m-scripts .s-flash-answer { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); animation: sReveal .4s var(--ease-out) both; }
.m-scripts .s-flash-tip { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.m-scripts .s-flash-tip .ico { flex: none; margin-top: 2px; color: var(--amber-ink); }
.m-scripts .s-flash-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-2); }
.m-scripts .s-pr-score { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; font-size: var(--fs-sm); color: var(--muted); font-weight: 650; }
.m-scripts .s-pr-score > span { display: inline-flex; align-items: center; gap: 6px; }
.m-scripts .s-pr-score strong { color: var(--text); font-variant-numeric: tabular-nums; }
.m-scripts .s-done .empty-text { max-width: 46ch; }

/* ---------- Sheets (class m-scripts on the sheet) ---------- */
.m-scripts .s-form { display: flex; flex-direction: column; }
.m-scripts .s-form > * + * { margin-top: var(--space-4); }
.m-scripts .s-form > .field + .field { margin-top: var(--space-4); }
.m-scripts .s-fill-preview { min-height: 140px; }
.m-scripts .s-fill-note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.m-scripts .s-fill-reset {
  position: relative; min-height: 32px; padding: 0 10px; border-radius: var(--radius-pill);
  color: var(--accent-ink); font-weight: 750; font-size: var(--fs-xs);
}
.m-scripts .s-fill-reset:hover { background: var(--surface-2); }
.m-scripts .s-fill-reset::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.m-scripts .s-ph-helpers { display: flex; flex-wrap: wrap; gap: 8px; }
.m-scripts .s-ph-chip { color: var(--accent-ink); }
.m-scripts .s-ph-chip .ico { color: var(--accent-ink); }
.m-scripts .s-preview-wrap { display: flex; flex-direction: column; gap: 8px; }
.m-scripts .s-editor-preview { min-height: 56px; }

/* pick sheet */
.m-scripts .s-pick { display: flex; flex-direction: column; gap: var(--space-4); }
.m-scripts .s-pick-list { display: flex; flex-direction: column; gap: var(--space-5); }
.m-scripts .s-pick-group { display: flex; flex-direction: column; gap: 8px; }
.m-scripts .s-pick-head {
  position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 6px 2px;
  background: var(--surface-solid); font-size: var(--fs-sm); font-weight: 800;
}
.m-scripts .s-pick-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--stroke); background: var(--surface-2); color: var(--text); text-align: left;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.m-scripts .s-pick-item:hover { border-color: var(--accent-glow); background: var(--accent-soft); }
.m-scripts .s-pick-item:active { transform: scale(.99); }
.m-scripts .s-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.m-scripts .s-pick-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 750; line-height: 1.35; }
.m-scripts .s-pick-star { color: var(--amber); fill: currentColor; }
.m-scripts .s-pick-sit { font-size: var(--fs-xs); color: var(--dim); font-weight: 600; }
.m-scripts .s-pick-text {
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-scripts .s-pick-chev { flex: none; color: var(--dim); }
.m-scripts .s-pick-all { align-self: center; }

/* ---------- Motion ---------- */
@keyframes sStar { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-14deg); } 100% { transform: none; } }
@keyframes sDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sFlashIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
/* html.reduce-motion and prefers-reduced-motion are handled globally by base.css. */
@media (prefers-reduced-motion: reduce) { .m-scripts .s-flash-think .ico { animation: none; } }