/* Line 15611: the Story Generator's genre door and host (resources/views/story/partials/genre-door.blade.php).
   Google-path tokens: one clean type family, an 8 px grid, tonal chips, light and dark. */
.sg-door {
    --sg-font: var(--ns-font, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif);
    --sg-surface: var(--ns-card, #ffffff);
    --sg-on-surface: var(--ns-text, #1f1f1f);
    --sg-muted: var(--ns-text-2, #444746);
    --sg-outline: var(--ns-border-strong, #c4c7c5);
    --sg-primary: var(--ns-gold-light, #0b57d0);
    --sg-chip-on: var(--ns-elevated, #d3e3fd);
    --sg-on-chip-on: var(--ns-text, #041e49);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    max-width: 960px;
    margin: 16px auto;
    padding: 16px 24px;
    font-family: var(--sg-font);
    color: var(--sg-on-surface);
    background: var(--sg-surface);
    border: 1px solid var(--sg-outline);
    border-radius: var(--ns-radius, 24px);
}
@media (prefers-color-scheme: dark) {
    .sg-door {
        --sg-surface: var(--ns-card, #1f1f1f);
        --sg-on-surface: var(--ns-text, #e3e3e3);
        --sg-muted: var(--ns-text-2, #c4c7c5);
        --sg-outline: var(--ns-border-strong, #444746);
        --sg-primary: var(--ns-gold-light, #a8c7fa);
        --sg-chip-on: var(--ns-elevated, #0842a0);
        --sg-on-chip-on: var(--ns-text, #d3e3fd);
    }
}
[data-bs-theme="dark"] .sg-door {
    --sg-surface: var(--ns-card, #1f1f1f);
    --sg-on-surface: var(--ns-text, #e3e3e3);
    --sg-muted: var(--ns-text-2, #c4c7c5);
    --sg-outline: var(--ns-border-strong, #444746);
    --sg-primary: var(--ns-gold-light, #a8c7fa);
    --sg-chip-on: var(--ns-elevated, #0842a0);
    --sg-on-chip-on: var(--ns-text, #d3e3fd);
}
.sg-host {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 1 360px;
    min-width: 0;
}
.sg-host-face {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px;
    font: 400 3.6px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0;
    white-space: pre;
    overflow: hidden;
    color: var(--sg-face-ink, #eadcc4);
    background: var(--sg-face-ground, #101215);
    border-radius: 16px;
}
.sg-host-words { min-width: 0; }
.sg-host-name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sg-muted);
}
.sg-host-ai {
    display: inline-block;
    margin-left: 4px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 20px;
    border: 1px solid var(--sg-outline);
    border-radius: 8px;
}
.sg-host-line {
    margin: 0;
    min-height: 3em;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
}
.sg-pick { flex: 1 1 320px; min-width: 0; }
.sg-title {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
}
.sg-sub {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sg-muted);
}
.sg-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sg-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sg-on-surface);
    text-decoration: none;
    border: 1px solid var(--sg-outline);
    border-radius: 8px;
}
.sg-chip:hover { color: var(--sg-primary); border-color: var(--sg-primary); }
.sg-chip:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }
.sg-chip[aria-current="page"] {
    color: var(--sg-on-chip-on);
    background: var(--sg-chip-on);
    border-color: transparent;
}
@media (max-width: 575.98px) {
    .sg-door { margin: 8px; padding: 16px; gap: 16px; border-radius: 16px; }
    .sg-host { flex-basis: 100%; }
    .sg-host-face { font-size: 2.6px; border-radius: 12px; }
    .sg-host-line { font-size: 16px; }
    .sg-chip { min-height: 44px; }
}
/* Line 15630 (story_generator_2026): the three-tap start. */
.sg-quick { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sg-steps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--sg-muted); }
.sg-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-right: 4px;
    font-weight: 500; color: var(--sg-on-chip-on); background: var(--sg-chip-on); border-radius: 50%;
}
.sg-seeds { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-seed { font-family: inherit; text-align: left; background: none; cursor: pointer; }
.sg-seed[aria-pressed="true"] { color: var(--sg-on-chip-on); background: var(--sg-chip-on); border-color: transparent; }
.sg-own { font-size: 14px; font-weight: 500; color: var(--sg-muted); }
.sg-idea {
    box-sizing: border-box; width: 100%; padding: 8px 16px; font: 400 16px/1.5 var(--sg-font); color: var(--sg-on-surface);
    background: transparent; border: 1px solid var(--sg-outline); border-radius: 8px; resize: vertical;
}
.sg-idea:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 1px; }
.sg-quick-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.sg-safe, .sg-safe-note { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--sg-muted); }
.sg-write {
    min-height: 44px; padding: 0 24px; font: 500 14px var(--sg-font); color: var(--ns-on-accent, #ffffff);
    background: var(--ns-gold, var(--sg-primary)); border: 0; border-radius: 20px; cursor: pointer;
}
.sg-write:disabled { opacity: .6; cursor: default; }
@media (prefers-color-scheme: dark) { .sg-write { color: var(--ns-on-accent, #062e6f); } }
[data-bs-theme="dark"] .sg-write { color: var(--ns-on-accent, #062e6f); }
.sg-quick-status { margin: 0; min-height: 20px; font-size: 14px; color: var(--sg-muted); }
.sg-quick-status a { color: var(--sg-primary); }
@media (max-width: 575.98px) { .sg-write { flex: 1 1 100%; } }
/* Line 17418 (story_teacher_mode): the Story or Lesson choice on the quick form, two tonal chips. */
.sg-kind {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}
.sg-kind-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.sg-kind-opt input {
    accent-color: var(--sg-primary);
}