@import "tokens.css";

/* ===========================
   SHORTCUTS-SEITE
   Styles für /de/shortcuts & /en/shortcuts
   =========================== */

/* ── Main content ──────────────────────── */
.shortcuts-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-24) var(--space-8) calc(var(--space-24) * 1.5);
}

/* ── Intro card ────────────────────────── */
.shortcuts-intro {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-16);
    margin-bottom: var(--space-24);
    text-align: center;
}

.shortcuts-intro__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-contrast);
    margin: 0 auto var(--space-4);
}

.shortcuts-intro__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.5rem;
}

.shortcuts-intro__body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-soft);
    max-width: 560px;
    margin: 0 auto;
}

/* ── Shortcut card ─────────────────────── */
.shortcut-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-16);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
    .shortcut-card {
        background: var(--surface-2);
    }
}

@media (max-width: 600px) {
    .shortcut-card { padding: var(--space-4); }
    .shortcuts-intro { padding: var(--space-8) var(--space-4); }
}

.shortcut-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.shortcut-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.shortcut-card__icon--orange { background: var(--warning); }
.shortcut-card__icon--purple { background: var(--purple-500); }
.shortcut-card__icon--green  { background: var(--success); }

.shortcut-card__meta {
    flex: 1;
    min-width: 0;
}

.shortcut-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.4rem;
    line-height: 1.3;
}

.shortcut-card__subtitle {
    font-weight: 500;
    opacity: 0.55;
    font-size: 0.875em;
}

.shortcut-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ── Badges ─────────────────────────────── */
.shortcut-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.shortcut-badge--blue   { background: var(--brand-surface);   color: var(--brand-text); }
.shortcut-badge--orange { background: var(--warning-surface); color: var(--warning-text); }
.shortcut-badge--purple { background: var(--purple-100);      color: var(--purple-600); }

@media (prefers-color-scheme: dark) {
    .shortcut-badge--purple { background: rgba(124, 92, 214, 0.22); color: #B9A6F0; }
}

/* ── Description ───────────────────────── */
.shortcut-card__description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-soft);
    margin: 0 0 var(--space-4);
}

/* ── Setup ─────────────────────────────── */
.shortcut-card__setup h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.6rem;
}

.shortcut-steps {
    margin: 0 0 var(--space-4);
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.shortcut-steps li {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-soft);
}

.shortcut-steps li strong { color: var(--text); }

/* ── Notice callout ────────────────────── */
.shortcut-notice {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    margin: var(--space-4) 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.shortcut-notice p {
    margin: 0;
    color: var(--text-soft);
    font-size: inherit;
    line-height: inherit;
}

.shortcut-notice--warning {
    background: var(--warning-surface);
    border-left: 3px solid var(--warning);
}

.shortcut-notice--purple {
    background: color-mix(in srgb, var(--purple-500) 12%, transparent);
    border-left: 3px solid var(--purple-500);
}

.shortcut-notice__icon { flex-shrink: 0; margin-top: 0.1rem; }
.shortcut-notice__icon--orange { color: var(--warning); }
.shortcut-notice__icon--purple { color: var(--purple-500); }

.shortcut-notice strong { color: var(--text); font-weight: 600; }

/* ── Card footer ───────────────────────── */
.shortcut-card__footer {
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.shortcut-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: var(--brand);
    color: var(--brand-contrast);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}

.shortcut-download-btn:hover {
    background: var(--brand-hover);
    transform: translateY(-1px);
    color: var(--brand-contrast);
}