/* "Start here", the beginner's guide (Pages/Start.cshtml, docs/beginner-guide.md). Uses info.css (nav pills, the spots
   table) and badges.css (guide-points, guide-sub); only the class cards and the "what comes next" cards are new. */
#account > .guide-points, #install > .guide-points { margin-top: 0; }
.panel > p { line-height: 1.65; }
.panel > p:first-of-type { margin-top: 0; }

/* The seven classes */
.class-grid {
    list-style: none;
    margin: 0.4rem 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.class-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
}
.class-card img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center 20%;
    border: 1px solid var(--line-strong);
}
.class-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.84rem; line-height: 1.45; }
.class-name { color: #fff; font-weight: 600; font-size: 0.95rem; }
.class-role { color: var(--accent-hi); }
.class-unlock { color: var(--ok); }
.class-card.is-locked .class-unlock { color: #fcd34d; }
.class-town { color: var(--faint); }

/* What comes next: link cards */
.next-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.next-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
    transition: border-color 0.2s, background 0.2s;
}
.next-card b { color: #fff; font-size: 0.95rem; }
.next-card:hover { text-decoration: none; border-color: var(--accent-line); background: rgba(143, 123, 255, 0.06); }
.next-card code { word-break: normal; }

@media (max-width: 600px) {
    .class-grid, .next-grid { grid-template-columns: 1fr; }
    .class-card img { width: 56px; height: 56px; }
}