/* Use the shared documentation theme for the guided troubleshooting panels. */
button { font: inherit; cursor: pointer; }

.troubleshooting-page { padding-bottom: 0; }
.troubleshooting-page .content-section { padding-top: 36px; }

.card {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 12px 28px -24px rgba(28, 43, 35, .3);
    scroll-margin-top: 24px;
}
.card[hidden] { display: none; }
.card:focus { outline: none; }
.card:focus-visible { outline: 2px solid var(--grid); outline-offset: 4px; }
.card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.card-icon {
    display: grid;
    flex: 0 0 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #dce7dc;
    border-radius: 10px;
    background: #eff4ee;
    color: var(--grid-deep);
}
.card-title { margin: 0; font-size: 25px; line-height: 1.25; }
.card p { margin: 0 0 14px; color: var(--ink-soft); }
.card strong { color: var(--ink); font-weight: 600; }

.platform-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.platform-button {
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--grid-deep);
    font-size: 16px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}
.platform-button:hover { border-color: var(--grid); background: #eff4ee; }

.steps { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li {
    position: relative;
    min-height: 30px;
    padding-left: 44px;
    margin-bottom: 26px;
    color: var(--ink-soft);
    counter-increment: step;
    overflow-wrap: anywhere;
}
.steps > li:last-child { margin-bottom: 0; }
.steps > li::before {
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #dce7dc;
    border-radius: 8px;
    background: #eff4ee;
    color: var(--grid-deep);
    content: counter(step);
    font: 500 11px var(--mono);
}
.step-screenshot {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.question-box {
    padding-top: 24px;
    margin-top: 28px;
    border-top: 1px solid var(--line);
}
.question-box h3 { margin: 0; font-size: 21px; }
.btn-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.question-box .btn { min-width: 90px; }
.btn-primary { border-color: var(--grid); background: var(--grid); color: #fff; }
.btn-primary:hover { border-color: var(--grid-deep); background: var(--grid-deep); }
.btn-secondary { border-color: var(--line); background: var(--panel); color: var(--grid-deep); }
.btn-secondary:hover { border-color: var(--grid); background: #eff4ee; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--grid); outline-offset: 3px; }

.warning-box, .success-box {
    padding: 16px 18px;
    margin: 20px 0;
    border: 1px solid var(--line);
    border-left: 3px solid var(--cell-amber);
    border-radius: 0 8px 8px 0;
    background: var(--cell-amber-bg);
    font-size: 13.5px;
}
.warning-box p, .success-box p { margin: 0; }
.warning-box p { color: #7b581b; }
.success-box { margin: 0; border-color: #b8cbbd; border-left-color: var(--grid); background: #eff4ee; }
.success-box p { color: var(--grid-deep); }
.command-block {
    max-width: 100%;
    padding: 18px;
    margin: 16px 0 0;
    overflow-x: auto;
    border-radius: 8px;
    background: var(--ink);
    color: #f4f2ea;
    font: 11.5px/1.8 var(--mono);
    white-space: pre;
}

@media (max-width: 560px) {
    .hero .wrap { padding-top: 30px; padding-bottom: 30px; }
    .hero-brand { margin-bottom: 28px; }
    .hero .cta-row { gap: 8px; }
    .hero .btn { padding: 9px 12px; font-size: 12px; }
    .troubleshooting-page .content-section { padding-top: 24px; }
    .card { padding: 20px 16px; }
    .card-header { align-items: flex-start; gap: 10px; }
    .card-title { font-size: 22px; }
    .platform-options { grid-template-columns: 1fr; gap: 10px; }
    .platform-button { min-height: 72px; }
    .steps > li { padding-left: 36px; }
    .btn-group .btn { flex: 1 1 auto; }
    .command-block { padding: 14px; font-size: 11px; }
    footer { margin-top: 48px; }
}