/* ============================================================================
   Shared interaction layer for the three English Skills views.
   Command palette, shortcut sheet, recently-opened strip and toasts.
   BolEnglish palette; CSS transitions only.
   ========================================================================== */
:root { --sk-ease: cubic-bezier(.4, 0, .2, 1);
        --sk-grad: linear-gradient(135deg, #7c3aed, #ec4899); }

body.sk-lock { overflow: hidden; }

/* ---------------------------------------------------- the search button --- */
.sk-openbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
              border-radius: 999px; cursor: pointer; min-height: 44px; font-family: inherit;
              font-size: .8125rem; font-weight: 600; color: var(--muted);
              background: var(--card); border: 1.5px solid var(--line);
              transition: border-color .18s var(--sk-ease), color .18s var(--sk-ease),
                          transform .18s var(--sk-ease); }
.sk-openbtn:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-1px); }
.sk-openbtn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.sk-openbtn kbd { font: inherit; font-size: .6875rem; font-weight: 700; padding: 2px 6px;
                  border-radius: 5px; background: var(--bg-soft, #f3f0ff); color: var(--muted);
                  border: 1px solid var(--line); }

/* ------------------------------------------------------ command palette --- */
.sk-pal, .sk-keys { position: fixed; inset: 0; z-index: 2147483100;
                    display: grid; place-items: start center; padding: 10vh 16px 16px; }
.sk-pal-back { position: fixed; inset: 0; background: rgba(24, 18, 46, .45);
               -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.sk-pal-box { position: relative; width: 100%; max-width: 560px; border-radius: 18px;
              background: var(--card, #fff); border: 1px solid var(--line);
              box-shadow: 0 30px 70px -28px rgba(40, 20, 90, .65); overflow: hidden;
              animation: skPop .18s var(--sk-ease); }
@keyframes skPop { from { opacity: 0; transform: translateY(-8px) scale(.99); } }

.sk-pal-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
              border-bottom: 1px solid var(--line); }
.sk-pal-ico { color: var(--muted); font-size: .9375rem; }
.sk-pal-top input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
                    font-family: inherit; font-size: 1rem; color: var(--ink); }
.sk-pal-esc { flex: none; padding: 5px 10px; border-radius: 7px; cursor: pointer;
              border: 1px solid var(--line); background: var(--bg-soft, #f3f0ff);
              color: var(--muted); font-family: inherit; font-size: .6875rem; font-weight: 700; }
.sk-pal-esc:hover { color: var(--purple); border-color: var(--purple); }

.sk-pal-list { list-style: none; max-height: min(52vh, 420px); overflow-y: auto; padding: 6px; }
.sk-pal-list li { display: flex; align-items: center; gap: 11px; padding: 9px 11px;
                  border-radius: 10px; cursor: pointer; }
.sk-pal-list li.is-on { background: color-mix(in srgb, var(--c) 11%, transparent); }
.sk-pal-badge { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid;
                place-items: center; font-size: .8125rem; font-weight: 800; color: var(--c);
                background: color-mix(in srgb, var(--c) 14%, transparent); }
.sk-pal-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sk-pal-tx b { font-size: .875rem; font-weight: 600; color: var(--ink);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-pal-tx small { font-size: .6875rem; color: var(--muted); }
.sk-pal-kind { flex: none; font-size: .625rem; font-weight: 800; text-transform: uppercase;
               letter-spacing: .06em; color: var(--muted); }
.sk-pal-list li.is-on .sk-pal-kind { color: var(--c); }
.sk-pal-none { padding: 26px 12px; text-align: center; color: var(--muted); font-size: .875rem; }

.sk-pal-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
               padding: 9px 16px; border-top: 1px solid var(--line);
               background: var(--bg-soft, #faf9ff);
               font-size: .6875rem; color: var(--muted); }
.sk-pal-hint { margin-left: auto; }
.sk-pal-foot kbd, .sk-keys kbd { font: inherit; font-size: .625rem; font-weight: 700;
                                 padding: 2px 5px; border-radius: 4px; background: var(--card);
                                 border: 1px solid var(--line); color: var(--muted); }

/* ------------------------------------------------------ shortcut sheet ---- */
.sk-keys-box { position: relative; width: 100%; max-width: 380px; border-radius: 18px;
               padding: 22px; background: var(--card, #fff); border: 1px solid var(--line);
               box-shadow: 0 30px 70px -28px rgba(40, 20, 90, .65);
               animation: skPop .18s var(--sk-ease); }
.sk-keys-box h2 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 14px; }
.sk-keys-box dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; align-items: center; }
.sk-keys-box dt { display: flex; gap: 3px; }
.sk-keys-box dd { font-size: .8125rem; color: var(--muted); }
.sk-keys-close { margin-top: 18px; width: 100%; padding: 10px; border-radius: 10px; min-height: 44px;
                 cursor: pointer; border: 0; background: var(--sk-grad); color: #fff;
                 font-family: inherit; font-size: .875rem; font-weight: 700; }
.sk-keys-close:hover { filter: brightness(1.06); }

/* ---------------------------------------------------- recently opened ----- */
.sk-recent { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px;
             border-radius: 999px; text-decoration: none; min-height: 40px;
             background: var(--card); border: 1px solid var(--line); color: var(--ink);
             transition: transform .18s var(--sk-ease), border-color .18s var(--sk-ease); }
.sk-recent:hover { transform: translateY(-1px); border-color: var(--c); }
.sk-recent:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.sk-recent-ic { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid;
                place-items: center; font-size: .8125rem;
                background: color-mix(in srgb, var(--c) 13%, transparent); }
.sk-recent-n { font-size: .78125rem; font-weight: 600; }
.sk-recent-lbl { font-size: .6875rem; font-weight: 800; letter-spacing: .09em;
                 text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sk-recent-row { display: flex; gap: 7px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .sk-recent-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .sk-recent-row::-webkit-scrollbar { display: none; }
  .sk-recent { flex: 0 0 auto; }
}

/* --------------------------------------------------------------- toast ---- */
.sk-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
            z-index: 2147483200; padding: 11px 20px; border-radius: 999px;
            background: #1e1b2e; color: #fff; font-size: .8125rem; font-weight: 600;
            box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6);
            opacity: 0; pointer-events: none;
            transition: opacity .22s var(--sk-ease), transform .22s var(--sk-ease); }
.sk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------- reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  .sk-pal-box, .sk-keys-box { animation: none; }
  .sk-openbtn, .sk-recent, .sk-toast { transition: none; }
  .sk-openbtn:hover, .sk-recent:hover { transform: none; }
  .sk-toast { transform: translate(-50%, 0); }
}

@media print { .sk-openbtn, .sk-pal, .sk-keys, .sk-toast, .sk-recent-row { display: none !important; } }