/* Inline preferences and persistent navigation for long guides. */
.developer-notes { display: grid; gap: 22px; margin-top: 22px; }
.patch-note { border-top: 1px solid var(--line); padding-top: 18px; }
.patch-note h3 { margin: 0 0 12px; color: var(--accent); font-size: 17px; font-weight: 800; }
.patch-note ul { margin: 0; padding-left: 20px; list-style: disc outside; color: var(--ink); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.patch-note li + li { margin-top: 7px; }
.menu-theme { border: 0; border-bottom: 1px solid var(--line); padding: 10px 0 18px; margin: 0 0 4px; min-width: 0; }
.menu-theme legend { padding: 0; font-size: 13px; font-weight: 800; }
.menu-theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:5px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--bg) 55%,var(--surface)); }
.menu-theme-option { --mode-color:var(--mint); position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:52px; padding:8px; border:1px solid transparent; border-radius:15px; color:var(--muted); cursor:pointer; font-size:12px; font-weight:800; white-space:nowrap; transition:background-color 180ms,border-color 180ms,box-shadow 180ms,color 180ms; }
.menu-theme-option.theme-light { --mode-color:#e8b65d; }
.menu-theme-option.theme-dark { --mode-color:#b9a2e8; }
.menu-theme-option > input { position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; opacity:0; margin:0; padding:0; cursor:pointer; }
.menu-theme-symbol { position:relative; display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:50%; background:color-mix(in srgb,var(--mode-color) 12%,var(--surface)); color:var(--mode-color); transition:background-color 180ms,color 180ms,transform 220ms; }
.menu-theme-symbol>.icon { width:17px; height:17px; }
.menu-theme-check { position:absolute; right:-3px; bottom:-2px; display:grid; place-items:center; width:13px; height:13px; border:2px solid var(--surface); border-radius:50%; background:var(--accent); color:var(--bg); opacity:0; transform:scale(.5); transition:opacity 180ms,transform 220ms; }
.menu-theme-check>.icon { width:8px; height:8px; stroke-width:3; }
.menu-theme-option:hover { background:var(--surface-raised); color:var(--ink); }
.menu-theme-option:hover .menu-theme-symbol { transform:translateY(-1px); }
.menu-theme-option:has(input:checked) { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface-raised)); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:0 3px 10px #00000012,inset 0 1px 0 #ffffff0d; color:var(--ink); }
.menu-theme-option:has(input:checked) .menu-theme-symbol { color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,var(--surface)); }
.menu-theme-option:has(input:checked) .menu-theme-check { opacity:1; transform:scale(1); }
[data-theme="light"] .menu-theme-option.theme-light { --mode-color:#b57b24; }
[data-theme="light"] .menu-theme-option.theme-dark { --mode-color:#8563b4; }
[data-theme="light"] .menu-theme-check { color:white; }
.feedback-mail-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feedback-mail-actions > a { min-height:50px; padding:12px; font-size:14px; gap:8px; text-decoration:none; }
.feedback-mail-actions .icon { width:18px; height:18px; margin:0; }
@media (max-width:540px) {
  .feedback-mail-actions { grid-template-columns:1fr; gap:12px; }
}
.coffee-greeting { white-space: pre-line; }
.coffee-payment { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.coffee-qr { display: block; width: auto; height: auto; max-width: 100%; max-height: min(300px,40dvh); border-radius: 12px; background: #fff; }
.coffee-instructions { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.coffee-pay-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 18px; border-radius: 12px; background: #fee500; color: #191919; text-decoration: none; font-size: 15px; font-weight: 800; }
.coffee-pay-link:hover { background: #f3da00; }
.coffee-pay-link .icon { width: 16px; height: 16px; }
@media (max-width: 540px) {
  .coffee-payment { gap: 10px; margin-top: 12px; }
  .coffee-qr { max-height: min(260px,35dvh); }
  .coffee-instructions { font-size: 11px; }
  .coffee-pay-link { min-height: 44px; font-size: 13px; }
}
.help-modal.dialog-list>.dialog-body { display:flex; flex-direction:column; height:min(660px,var(--dialog-max-height)); overflow:hidden; }
.guide-categories { display:flex; flex-wrap:wrap; flex-shrink:0; gap:7px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.guide-categories button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface-raised); font-size:12px; font-weight:800; }
.guide-categories button>span { font-size:10px; opacity:.7; }
.guide-categories button.is-selected { background:var(--accent); color:var(--bg); border-color:var(--accent); }
[data-theme="light"] .guide-categories button.is-selected { color:white; }
.guide-content { flex:1; min-height:0; padding:20px 8px 0 0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.guide-content>h3 { margin:0 0 16px; font-size:18px; }
.guide-content .help-rules { display:grid; gap:16px; margin:0; padding:0; list-style:none; counter-reset:guide-rule; }
.guide-content .help-rules[start="3"] { counter-reset:guide-rule 2; }
.guide-content .help-rules>li { position:relative; margin:0; padding:0 0 0 32px; color:var(--muted); font-size:14px; font-weight:500; line-height:1.75; word-break:keep-all; }
.guide-content .help-rules>li::before { counter-increment:guide-rule; content:counter(guide-rule); position:absolute; left:0; top:1px; display:grid; place-items:center; width:23px; height:23px; border-radius:8px; color:var(--mint); background:color-mix(in srgb,var(--mint) 12%,transparent); font-size:12px; font-weight:800; }
.guide-content .help-rules>li>b { display:block; margin:0 0 4px; color:var(--ink); font-size:15px; }
.guide-details { margin:14px 0 18px 32px; font-size:13px; }
.guide-details>summary { width:fit-content; cursor:pointer; color:var(--accent); padding:7px 0; font-weight:700; }
.guide-details .location-affinities { margin:6px 0 0; padding:10px 12px; gap:0 16px; }
.guide-details .location-affinities>div { font-size:12px; }
.guide-overview { margin:0 0 20px; font-size:13px; line-height:1.8; color:var(--muted); word-break:keep-all; }
@media (max-width: 540px) {
  .menu-theme-options { gap:3px; padding:4px; border-radius:17px; }
  .menu-theme-option { gap:5px; min-height:48px; padding:6px 4px; border-radius:12px; font-size:11px; }
  .menu-theme-symbol { width:25px; height:25px; }
  .menu-theme-symbol>.icon { width:15px; height:15px; }
}