/**
 * Styles for /tutorials/isp-call-script/ -- the "My numbers" card, the
 * cheat-sheet tables, and the spoken-script blockquotes. Loaded only on that
 * page, so .wm-tut__body rules here don't touch other tutorials.
 */

/* intro + callouts */
.wm-tut__body .wm-isp-intro { font-size: 1.08rem; color: var(--wm-text, #e6f2ee); }
.wm-tut__body .wm-isp-cta,
.wm-tut__body .wm-isp-more {
    border: 1px solid rgba(127,255,212,.4);
    border-left: 3px solid var(--wm-aqua, #7fffd4);
    background: rgba(127,255,212,.06);
    border-radius: 12px; padding: 14px 16px; margin: 20px 0;
}
.wm-tut__body .wm-isp-cta a,
.wm-tut__body .wm-isp-more a { color: var(--wm-aqua, #7fffd4); font-weight: 700; white-space: nowrap; }

/* spoken script lines */
.wm-tut__body blockquote {
    margin: 12px 0; padding: 12px 16px;
    border-left: 3px solid var(--wm-aqua, #7fffd4);
    background: var(--wm-panel-2, #122735);
    border-radius: 0 10px 10px 0;
    color: var(--wm-text, #e6f2ee); font-size: 1.02rem; line-height: 1.5;
}

/* cheat-sheet tables */
.wm-tut__body .wm-isp-tablewrap { overflow-x: auto; margin: 14px 0 22px; border-radius: 10px; }
.wm-tut__body table {
    width: 100%; border-collapse: collapse; min-width: 560px;
    font-size: 0.92rem; background: var(--wm-panel, #0d1e2a);
}
.wm-tut__body th, .wm-tut__body td {
    text-align: left; padding: 9px 12px;
    border-bottom: 1px solid var(--wm-line, #1d3b44);
    vertical-align: top;
}
.wm-tut__body thead th {
    background: var(--wm-panel-2, #122735); color: var(--wm-aqua, #7fffd4);
    font-size: 0.78rem; letter-spacing: .04em; text-transform: uppercase;
    position: sticky; top: 0;
}
.wm-tut__body tbody tr:last-child td { border-bottom: 0; }
.wm-tut__body td:first-child { font-weight: 600; color: var(--wm-text, #e6f2ee); white-space: nowrap; }

/* sources list */
.wm-tut__body .wm-isp-sources { font-size: 0.9rem; color: var(--wm-text-dim, #9db1ae); }
.wm-tut__body .wm-isp-sources a { color: var(--wm-aqua, #7fffd4); }

/* -------- the "My numbers" card (built by isp-card.js) -------- */
.wm-isp-card {
    border: 1px solid rgba(127,255,212,.4); border-radius: 16px;
    background: linear-gradient(180deg, rgba(18,39,53,.6), rgba(13,30,42,.6));
    padding: 18px 18px 16px; margin: 6px 0 10px;
}
.wm-isp-card__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid var(--wm-line, #1d3b44); padding-bottom: 10px; margin-bottom: 12px;
}
.wm-isp-card__title { font-weight: 800; font-size: 1.1rem; color: var(--wm-text, #e6f2ee); }
.wm-isp-card__date {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.75rem; color: var(--wm-text-dim, #9db1ae);
}
.wm-isp-card__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0;
}
@media (max-width: 420px) { .wm-isp-card__grid { grid-template-columns: 1fr; } }
.wm-isp-card__grid dt {
    font-size: 0.82rem; color: var(--wm-text-dim, #9db1ae); margin: 0;
}
.wm-isp-card__grid dd {
    margin: 0 0 4px; font-weight: 800; font-size: 1.15rem; color: var(--wm-text, #e6f2ee);
    font-variant-numeric: tabular-nums;
}
.wm-isp-card__grid dd .wm-isp-unit { font-size: 0.8rem; font-weight: 600; color: var(--wm-text-dim, #9db1ae); }
.wm-isp-card__grid dd .wm-isp-blank { color: var(--wm-text-dim, #9db1ae); font-weight: 600; }
.wm-isp-card__fill, .wm-isp-card__empty {
    font-size: 0.9rem; color: var(--wm-text-dim, #9db1ae); line-height: 1.5; margin: 12px 0 0;
}
.wm-isp-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.wm-isp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--wm-aqua, #7fffd4); color: var(--wm-bg, #06121a);
    border: 1px solid var(--wm-aqua, #7fffd4); border-radius: 999px;
    padding: 8px 16px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    text-decoration: none; transition: filter .15s ease;
}
.wm-isp-btn:hover { filter: brightness(1.08); }
.wm-isp-btn--ghost, .wm-isp-btn--go {
    background: transparent; color: var(--wm-aqua, #7fffd4);
}
.wm-isp-btn--go { border-color: rgba(127,255,212,.5); }

@media print {
    .wm-isp-card { break-inside: avoid; }
    .wm-isp-card__actions { display: none; }
}