/* The search on /explore. Uses the site's own colours (assets/css/site.css); logical properties so Hebrew and Arabic mirror by themselves. */
.xs { max-width: 680px; margin: 1.5rem 0 1.75rem; } /* clear of the header's bottom rule (walks.css .walk-head) */
.xs[hidden], .xs-out[hidden] { display: none; }
.xs-box { display: block; width: 100%; box-sizing: border-box; padding: .85rem 1rem; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-1, none); }
.xs-box:focus { outline: 2px solid var(--pine); outline-offset: 1px; border-color: var(--pine); }
.xs-out { margin-top: 1rem; }
.xs-h { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 .4rem; }
.xs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.xs-country { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .7rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.xs-cname { font-weight: 600; color: var(--ink); }
.xs-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.xs-chip { display: inline-block; padding: .3rem .7rem; font-size: .9rem; color: var(--pine-deep); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.xs-chip:hover, .xs-chip:focus-visible { background: var(--pine); border-color: var(--pine); color: #fff; }
.xs-item { display: grid; gap: .15rem; padding: .7rem 1rem; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.xs-item:hover, .xs-item:focus-visible { border-color: var(--pine); }
.xs-name { font-weight: 600; color: var(--ink); }
.xs-meta { font-size: .88rem; color: var(--muted); }
.xs-note { margin: 0; padding: .9rem 1rem; color: var(--ink-soft); background: var(--paper-2); border-radius: 12px; }