/* ---------- story guide («دليل المتشابهات») ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.story { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: right; padding: 14px 12px; border-radius: 16px;
  background: var(--paper-2); border: 1px solid var(--gold-soft); min-height: 84px; }
.story:active { background: var(--paper-3); }
.story b { font-family: "Amiri", serif; font-size: 18px; color: var(--accent); line-height: 1.4; }
.story small { font-size: 12px; color: var(--ink-3); }
.g-h { font-family: "Amiri", serif; font-size: 18px; color: var(--accent); margin: 18px 0 6px; }
.g-h small { font-family: "Naskh", serif; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.stop { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: right; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.stop:active { background: var(--gold-soft); }
.stop-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink-3); font-size: 12.5px; border: 1px solid var(--line); }
.stop.main .stop-n { background: var(--green); color: var(--gold-2); border-color: var(--gold); }
.stop-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.stop-body b { font-family: "Amiri", serif; font-size: 16.5px; color: var(--ink); }
.stop-body small { color: var(--ink-3); font-size: 12.5px; }
.stop-title { flex-basis: 100%; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.stop-m { flex-basis: 100%; font-size: 12.5px; color: var(--gold); }

/* trail bar */
.trail {
  position: absolute; left: 10px; right: 10px; top: calc(var(--safe-top) + 10px); z-index: 13;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 6px; border-radius: 16px;
  background: var(--green); color: var(--on-green); border: 1px solid var(--gold); box-shadow: var(--shadow); animation: drop .3s ease;
}
#app:not(.chrome-hidden) .trail { top: calc(var(--safe-top) + 92px); }
.t-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; padding-inline-start: 6px; }
.t-info b { font-family: "Amiri", serif; font-size: 16px; color: var(--gold-2); }
.t-info small { font-size: 12px; opacity: .9; }
.t-info span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-ctl { display: flex; gap: 2px; flex: none; }
.t-ctl button { width: 36px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--on-green); }
.t-ctl button svg { width: 22px; height: 22px; }
.t-ctl button:disabled { opacity: .35; }
.t-ctl button:active { background: rgba(255, 255, 255, .1); }
.trailing .slide { padding-top: calc(var(--safe-top) + 84px); }
.w.in-range { background: rgba(201, 169, 94, .18); }