/* The Guide (js/windows/guide-ui.js): phone window, confirm step and travel banner, in the phone UI kit's art. */
.guide-window{position:absolute;inset:10px;z-index:30;pointer-events:auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:#101215 url(/ui/mobile/sheetbg.png?v=f16b55896a7aa2db) center/cover;border:1px solid #a8894a88;border-radius:6px;color:var(--ink,#efe6cf);font:13px system-ui,sans-serif}
.guide-window[hidden],.guide-banner[hidden],.guide-confirm[hidden]{display:none}
.guide-window *{box-sizing:border-box}
.guide-window button{font-family:inherit;cursor:pointer}
.guide-head{display:flex;align-items:baseline;gap:12px;padding-right:40px}
.guide-head h2{margin:0;font:600 20px var(--serif);color:var(--gold,#e2c47c)}
.guide-head p{margin:0;color:var(--mute,#aaa391);font-size:12px}
.guide-close{position:absolute;right:10px;top:8px;background:none;border:0;padding:0;width:30px;height:30px}
.guide-close img{width:100%;height:100%}
.guide-body{display:flex;gap:10px;flex:1;min-height:0}
.guide-side{display:flex;flex-direction:column;gap:8px;width:132px;flex:none;min-height:0}
/* Seven city tabs just fit a 390px-high phone at 30px; a shorter screen scrolls them. The tab badge needs the bottom padding. */
.guide-tabs{display:flex;flex-direction:column;gap:5px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:6px}
.guide-tab{flex:none;height:30px;border:0;background:url(/ui/mobile/tab.png?v=3b5f3f0e7e8c4f3a) center/100% 100%;color:#152433;font:600 13px var(--serif);position:relative}
.guide-tab.on{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6)}
.guide-tab small{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);font:600 8px system-ui;color:#2b1d05;background:var(--gold,#e2c47c);border-radius:3px;padding:0 4px;white-space:nowrap}
.guide-here{margin:auto 0 0;color:var(--mute,#aaa391);font-size:11px;line-height:1.5}
.guide-here b{color:var(--gold,#e2c47c);font-weight:600}
.guide-list{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:6px;align-content:start;overscroll-behavior:contain}
.guide-row{background:url(/ui/mobile/card.png?v=ea1529f9c8e23a06) center/100% 100%;border-radius:4px;padding:8px 14px;display:flex;align-items:center;gap:10px;min-height:44px}
.guide-row-text{flex:1;min-width:0;display:flex;flex-direction:column}
.guide-row-text b{font:600 13px var(--serif);color:var(--gold,#e2c47c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-row-text span{font-size:10.5px;color:var(--mute,#aaa391);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-tag{font:700 8.5px system-ui;font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:#1d1406;background:linear-gradient(#f6c65b,#d9902a);border-radius:3px;padding:1px 4px;margin-left:6px;vertical-align:2px}
.guide-chip{font:700 9px system-ui;background:#0007;color:var(--gold,#e2c47c);border:1px solid #e2c47c55;border-radius:4px;padding:2px 5px;white-space:nowrap}
.guide-go{width:54px;height:30px;flex:none;border:0;background:url(/ui/mobile/btnY.png?v=be065432cc957cb3) center/100% 100%;color:#382704;font:600 12px var(--serif)}
.guide-group{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px 12px}
.guide-group-top{display:flex;align-items:center;gap:8px}
.guide-zones{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.guide-zone{background:#0006;border:1px solid #79715c77;border-radius:4px;padding:4px 6px;display:flex;flex-direction:column;gap:1px;text-align:left;color:inherit}
.guide-zone b{font:600 12px var(--serif);color:#ffe3a2}
.guide-zone span{font-size:10px;color:var(--mute,#aaa391)}
.guide-zone.on{border-color:var(--gold,#e2c47c);background:#3b3423}
.guide-via{grid-column:1/-1;margin:0;font-size:11.5px;line-height:1.45;color:#dbc894;background:#0006;border:1px dashed #e2c47c66;border-radius:4px;padding:6px 8px}
.guide-confirm{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#0008;border-radius:6px}
.guide-confirm-card{width:360px;max-width:calc(100% - 24px);background:#0b0c0ef7;border:1px solid var(--gold2,#a8894a);border-radius:6px;padding:14px;box-shadow:0 10px 30px #000}
.guide-confirm-card h3{margin:0 0 6px;font:600 16px var(--serif);color:var(--gold,#e2c47c)}
.guide-confirm-card p{margin:0 0 10px;font-size:12px;line-height:1.5}
.guide-short{color:#ffb39f}
.guide-confirm-buttons{display:flex;gap:10px;justify-content:center}
.guide-btn{width:120px;height:32px;border:0;background:url(/ui/mobile/btnY.png?v=be065432cc957cb3) center/100% 100%;color:#382704;font:600 13px var(--serif);cursor:pointer}
.guide-btn.red{background-image:url(/ui/mobile/btnR.png?v=f4b0de3fdd6bb610);color:#fff}
.guide-btn:disabled{opacity:.45;cursor:default}
.guide-banner{position:absolute;left:50%;top:calc(var(--safe-t,0px) + 22px);transform:translateX(-50%);z-index:25;pointer-events:auto;display:flex;align-items:center;gap:12px;padding:7px 10px 7px 12px;background:#0b0c0ef2;border:1px solid var(--gold2,#a8894a);border-radius:6px;box-shadow:0 6px 16px #000b;max-width:calc(100% - 340px)}
.guide-banner-text{display:flex;flex-direction:column;min-width:0}
.guide-banner-title{font:600 14px var(--serif);color:var(--gold,#e2c47c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-banner-line,.guide-banner-step{font-size:11px;color:var(--mute,#aaa391);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-banner-step{color:#dbc894}
.guide-banner .guide-btn{width:78px;height:28px;font-size:12px;flex:none}
/* The menu tile beside View: the original client's map orb, labelled like View. */
.m-guide-tile{display:flex;flex-direction:column;align-items:center;justify-content:center}
.m-guide-tile img{width:24px;height:24px;object-fit:contain}
.m-guide-tile span{font-size:9px;line-height:11px;color:var(--ink);text-shadow:0 1px 2px #000}