/* A320: help only; reuse A317's approved cream/leaf menu roles. */
html body.pack-ui #guide-panel,html body #guide-panel{box-sizing:border-box;width:min(800px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px 20px;border:1px solid var(--ui-panel-menu-line);border-image:none;border-radius:16px;background:var(--ui-panel-menu-bg);color:var(--ui-panel-menu-fg);box-shadow:var(--ui-panel-menu-shadow);overflow:hidden;z-index:9}
html body #guide-panel:not([hidden]){display:flex;flex-direction:column;gap:12px}
html body #guide-panel [hidden]{display:none!important}
html body #guide-panel h2{flex:none;color:var(--ui-panel-menu-fg)}
html body #guide-tabs{display:flex;gap:6px;flex:none;border-bottom:1px solid var(--ui-panel-menu-line);padding-bottom:8px}
html body #guide-panel button{min-width:44px;min-height:44px;box-sizing:border-box;padding:8px 14px;margin:0;border:1px solid var(--ui-panel-menu-line);border-image:none;border-radius:10px;background:var(--ui-panel-menu-soft);color:var(--ui-panel-menu-fg);text-shadow:none;font:inherit;font-size:14px;white-space:normal;line-height:1.4}
html body #guide-panel button:focus-visible{outline:3px solid var(--ui-panel-menu-accent);outline-offset:2px}
html body #guide-tabs button{flex:1}
html body #guide-tabs [aria-selected="true"],html body #guide-close{background:var(--ui-panel-menu-accent);border-color:var(--ui-panel-menu-accent);color:var(--ui-panel-menu-accent-fg)}
html body #guide-content{overflow:auto;min-height:0;overscroll-behavior:contain;padding:0 4px 4px 0;scrollbar-gutter:stable;outline-offset:-3px}
html body #guide-panel :is(p,small){font-size:13px;line-height:1.6;color:var(--ui-panel-menu-fg);word-break:normal;overflow-wrap:anywhere}
html body #guide-intro>p{margin:0 0 12px}
html body #guide-intro .guide-grid article{background:var(--ui-panel-menu-soft);border-color:var(--ui-panel-menu-line)}
html body #guide-activities>p{margin:0 0 14px;color:var(--ui-panel-menu-muted)}
html body #guide-panel .activity-group{margin:0 0 20px}
html body #guide-panel .activity-group:last-child{margin-bottom:0}
html body #guide-panel .activity-group h3{font-size:15px;color:var(--ui-panel-menu-accent);margin:0 0 4px}
html body #guide-panel .activity-group ul{margin:0;padding:0;list-style:none}
html body #guide-panel .activity-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--ui-panel-menu-line)}
html body #guide-panel .activity-name{align-self:center;min-width:0;font-size:14px;line-height:1.5;word-break:normal;overflow-wrap:anywhere}
html body #guide-panel .activity-state{align-self:start;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.5;padding:3px 8px;border:1px solid var(--ui-panel-menu-line);border-radius:12px;background:var(--ui-panel-menu-soft);color:var(--ui-panel-menu-muted)}
html body #guide-panel [data-state="open"] .activity-state{background:var(--ui-panel-menu-accent-soft);color:var(--ui-panel-menu-accent)}
html body #guide-panel .activity-how,html body #guide-panel .activity-extra{grid-column:1/-1;margin:0}
html body #guide-panel .activity-extra{color:var(--ui-panel-menu-muted);font-size:12px}
html body #guide-panel .activity-place,html body #guide-panel .activity-actions{grid-column:1/-1;margin:0}
html body #guide-panel .activity-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
html body #guide-panel .activity-story{margin:0 0 12px}
html body #guide-panel .activity-row:focus-visible{outline:3px solid var(--ui-panel-menu-accent);outline-offset:-3px}
html body #guide-panel button:disabled{opacity:.65}
@media(max-width:450px){html body #guide-panel .activity-row{grid-template-columns:minmax(0,1fr)}html body #guide-panel .activity-state{justify-self:start}html body #guide-panel .activity-actions{flex-direction:column}}
html body #guide-panel .guide-actions{display:flex;gap:10px;justify-content:flex-end;flex:none;border-top:1px solid var(--ui-panel-menu-line);padding-top:10px}
@media(max-width:450px){html body.pack-ui #guide-panel,html body #guide-panel{padding:14px}}
@media(orientation:landscape) and (max-height:450px){html body.pack-ui #guide-panel,html body #guide-panel{padding:10px 16px;gap:8px}html body #guide-panel .guide-actions{padding-top:6px}}