/* Line 15612: the Learning Center's seven teachers (resources/views/learning_center/teachers.blade.php).
   Google-path tokens as the Story door uses them: one type family, an 8 px grid, tonal surfaces, light and dark,
   375 px first. The host's face styles come from story-genre-door.css (.sg-host-face). */
.lc-teachers {
    --lc-font: "Google Sans", "Google Sans Text", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
    --lc-surface: #ffffff;
    --lc-surface-2: #f0f4f9;
    --lc-on-surface: #1f1f1f;
    --lc-muted: #444746;
    --lc-outline: #c4c7c5;
    --lc-primary: #0b57d0;
    --lc-on-primary: #ffffff;
    --lc-chip-on: #d3e3fd;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: var(--lc-font);
    color: var(--lc-on-surface);
    background: var(--lc-surface);
}
@media (prefers-color-scheme: dark) {
    .lc-teachers {
        --lc-surface: #131314;
        --lc-surface-2: #1e1f20;
        --lc-on-surface: #e3e3e3;
        --lc-muted: #c4c7c5;
        --lc-outline: #444746;
        --lc-primary: #a8c7fa;
        --lc-on-primary: #062e6f;
        --lc-chip-on: #0842a0;
    }
}
[data-bs-theme="dark"] .lc-teachers {
    --lc-surface: #131314;
    --lc-surface-2: #1e1f20;
    --lc-on-surface: #e3e3e3;
    --lc-muted: #c4c7c5;
    --lc-outline: #444746;
    --lc-primary: #a8c7fa;
    --lc-on-primary: #062e6f;
    --lc-chip-on: #0842a0;
}
.lc-host {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--lc-outline);
    border-radius: 24px;
    background: var(--lc-surface-2);
}
/* The host desk's ASCII grid is 96 x 48: the Story door's phone glyph (2.6 px) paints the whole face, unclipped. */
.lc-host-face {
    font-size: 2.6px;
}
.lc-host-words { min-width: 0; }
.lc-host-name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lc-muted);
}
.lc-host-ai {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    background: var(--lc-chip-on);
    color: var(--lc-on-surface);
}
.lc-host-line {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.lc-head h1, .lc-teacher h1 {
    margin: 32px 0 8px;
    font-size: 28px;
    line-height: 36px;
    font-weight: 400;
}
.lc-lead {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 24px;
    color: var(--lc-muted);
}
.lc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 720px) {
    .lc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .lc-grid { grid-template-columns: repeat(3, 1fr); }
}
.lc-card-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--lc-outline);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
}
.lc-card-link:hover { background: var(--lc-surface-2); }
.lc-card-name { font-size: 18px; font-weight: 500; }
.lc-card-what { font-size: 14px; line-height: 20px; color: var(--lc-muted); }
.lc-card-host { margin-top: auto; font-size: 12px; color: var(--lc-primary); }
.lc-steps {
    margin: 0 0 24px;
    padding-left: 24px;
    font-size: 16px;
    line-height: 28px;
}
.lc-actions, .lc-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}
.lc-start, .lc-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    font: 500 14px/20px var(--lc-font);
    text-decoration: none;
    cursor: pointer;
}
.lc-start { background: var(--lc-primary); color: var(--lc-on-primary); border: 0; }
.lc-back { background: transparent; color: var(--lc-primary); border: 1px solid var(--lc-outline); }
.lc-start:focus-visible, .lc-back:focus-visible, .lc-card-link:focus-visible, .lc-chip:focus-visible {
    outline: 2px solid var(--lc-primary);
    outline-offset: 2px;
}
.lc-others {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0 0;
}
.lc-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--lc-outline);
    border-radius: 8px;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}
.lc-sheet {
    max-width: min(440px, calc(100vw - 32px));
    padding: 24px;
    border: 0;
    border-radius: 28px;
    font-family: var(--lc-font);
    background: var(--lc-surface-2, #f0f4f9);
    color: var(--lc-on-surface, #1f1f1f);
}
.lc-sheet::backdrop { background: rgba(0, 0, 0, .4); }
.lc-sheet h2 { margin: 0 0 8px; font-size: 22px; line-height: 28px; font-weight: 400; }
.lc-sheet p { margin: 0 0 24px; font-size: 14px; line-height: 20px; }