/* AGN owns the frame, button states, focus rings, surfaces and palette.
   Only the flow layout and its phone presentation are page-specific. */
.gm-page { color: var(--agn-text); }
.gm-body { max-width: 1100px; min-width: 0; padding: 12px 10px 32px; }
.gm-page .gm-welcome { flex-direction: row; flex-wrap: wrap; align-items: center; }
.gm-page .gm-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: auto; color: var(--agn-muted); }
.gm-intro { max-width: 78ch; color: var(--agn-muted); }
.gm-intro p { margin: 0 0 8px; }
.gm-toolbar, .gm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-toolbar { margin: 12px 0; }
.gm-actions { margin-top: 12px; }
#guideMePage .gm-button, .agn-guide-howto .gm-button { min-height: 44px; min-width: 44px; white-space: normal; overflow-wrap: anywhere; touch-action: manipulation; }
.gm-page [hidden], .agn-guide-howto [hidden] { display: none !important; }
.gm-step { min-width: 0; }
.gm-question { text-align: center; margin: 4px 0 0; font-size: 1.05rem; }
.gm-branch { position: relative; padding: 24px 0 0 16px; }
.gm-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gm-edges path { fill: none; stroke: var(--agn-border-strong); stroke-width: 1; }
.gm-edges path.is-selected { stroke: var(--agn-accent); }
.gm-choices { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.gm-choices .gm-button { width: 100%; }
.gm-answer { display: none; }
.gm-wire { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 15px 0; color: var(--agn-muted); font-size: .875rem; }
.gm-wire svg { width: 16px; height: 28px; flex: none; }
.gm-result-title { text-align: center; font-size: 1.25rem; margin: 16px 0; }
.gm-tools { padding: 0; list-style: none; counter-reset: gm-steps; display: grid; gap: 12px; }
.gm-tools > li { counter-increment: gm-steps; padding: 16px; min-width: 0; }
.gm-tools .gm-tool-title::before { content: counter(gm-steps) ". "; color: var(--agn-accent); }
.gm-tool-title { font-size: 1.1rem; margin: 0; }
.gm-tool-header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.gm-access { font-size: .875rem; color: var(--agn-muted); }
.gm-reason { margin: 8px 0; }
.gm-details { padding: 0 0 0 16px; }
.gm-details > div { margin: 6px 0; }
.gm-page summary { cursor: pointer; min-height: 44px; padding-block: 10px; overflow-wrap: anywhere; }
.gm-page summary:focus-visible { outline: 2px solid var(--agn-accent); outline-offset: 2px; border-radius: var(--agn-radius-sm); }
.gm-extra { margin-top: 12px; }
.gm-alternative { padding: 12px 0; border-bottom: 1px solid var(--agn-border); }
.gm-outcome { margin: 12px 0; padding: 16px; }
.gm-outcome .gm-result-title { margin-top: 0; }
.gm-note { color: var(--agn-muted); font-size: .9375rem; }
.gm-demo { color: var(--agn-accent); }
#gmStatus:empty { display: none; }

.agn-page-root.agn-guide-howto {
    position: fixed; z-index: 12490;
    right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    width: min(390px, calc(100% - 32px)); min-height: 0; max-height: 60dvh;
    overflow: auto; overscroll-behavior: contain; padding: 16px;
    color: var(--agn-text); box-shadow: var(--agn-shadow);
}
.agn-guide-howto h2 { font-size: 1.05rem; margin: 8px 0; }
.agn-guide-howto p { font-size: .9375rem; }
.agn-guide-howto .gm-actions { justify-content: flex-end; }
.agn-guide-highlight { outline: 2px solid var(--agn-accent) !important; outline-offset: 4px !important; }
.agn-guide-step { font-size: .875rem; color: var(--agn-accent); }

/* Keep the selected path visible, without repeating every answered branch. */
@media (max-width: 720px), (max-width: 1050px) and (max-height: 600px) {
    .gm-body { padding: 10px 8px calc(24px + env(safe-area-inset-bottom)); }
    .gm-page .gm-account { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
    .gm-page[data-started="true"] .gm-intro { display: none; }
    .gm-toolbar { margin: 0 0 12px; }
    .gm-page[data-started="false"] #gmStart { width: 100%; margin-top: 8px; }
    #gmFlow > .gm-wire { display: none; }
    .gm-step { padding: 12px 0; border-bottom: 1px solid var(--agn-border); }
    .gm-question { text-align: left; margin: 0 0 8px; line-height: 1.4; }
    .gm-step[data-answered="true"] .gm-question { font-size: .875rem; color: var(--agn-muted); margin-bottom: 0; }
    .gm-answer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .gm-answer-label { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
    .gm-answer .gm-button { flex: none; }
    .gm-step[data-answered="true"]:not([data-editing="true"]) .gm-branch { display: none; }
    .gm-branch { padding: 4px 0 0; }
    .gm-edges { display: none; }
    .gm-choices { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .gm-choices .gm-button { text-align: left; padding: 10px 12px; }
    .gm-result-title { text-align: left; font-size: 1.125rem; }
    .gm-tools > li, .gm-outcome { padding: 12px; }
    .gm-tool-header { display: block; }
    .gm-access { display: block; margin-top: 4px; }
    .gm-actions .gm-button { flex: 1 1 100%; }
    .agn-page-root.agn-guide-howto { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 12px; }
    .agn-guide-howto .gm-actions .gm-button { flex: 1; }
}

@media (min-width: 600px) and (max-width: 1050px) and (max-height: 600px) {
    .gm-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-page .gm-account { flex-basis: auto; margin-left: auto; }
}