/* ============================================================
   Walking an item's links (modules/LinkWalk.js): the SmartBar's
   "n links" and the choice a step opens where several links lead. On a
   phone the choice is the shared mobile sheet (ContextMenuUtils), so only
   its rows are sized for a finger here.
   ============================================================ */

/* "n links" on the bar: a button that lists them all. As wide for 1 as for
   12, so the › after it stays where the pointer is from item to item. */
.sb-links {
    flex: none; min-width: 5.6em; height: 34px; padding: 0 6px; border: 0; border-radius: 10px;
    background: none; color: var(--ui-text-bright, #e8f2f4); cursor: pointer; text-align: center;
    font: 700 13px var(--ui-font); font-variant-numeric: tabular-nums;
}
.sb-links:hover { background: rgba(var(--ui-accent-rgb), 0.1); }
.sb-links:focus-visible { outline: 2px solid rgb(var(--ui-teal-rgb)); outline-offset: 1px; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
    .sb-links { min-width: 2.6em; height: 44px; font-size: 14px; }
}

/* The choice: where the links lead, a row each. */
.link-choose {
    position: fixed; z-index: var(--z-lightbox); width: max-content; min-width: 240px; max-width: min(420px, calc(100vw - 24px));
    max-height: min(60vh, 420px); overflow-y: auto; box-sizing: border-box; padding: 6px;
    background: rgba(var(--ui-surface-rgb), 0.95); border: 2px solid var(--ui-border); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: var(--ui-text, #dadfe0); font: 400 14px var(--ui-font);
    animation: ctxMenuIn 0.12s ease-out;
}
.lc-head { padding: 6px 10px 8px; color: var(--ui-text-dim, #9fb5bc); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-row {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; box-sizing: border-box;
    border: 0; border-radius: 9px; background: none; color: inherit; font: 500 14px var(--ui-font); text-align: left; cursor: pointer;
}
.lc-row:hover, .lc-row:focus-visible { background: rgba(var(--ui-accent-rgb), 0.1); outline: none; }
.lc-way { flex: none; width: 16px; color: rgb(var(--ui-teal-rgb)); font-weight: 700; text-align: center; }
.lc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-seen { flex: none; color: var(--ui-text-dim, #9fb5bc); font-size: 12px; }
.lc-row.seen .lc-name { color: var(--ui-text-muted, #a9bcc2); }
/* One more link of its own (modules/ItemLinks.js), after the ones it has. */
.lc-row.lc-more { margin-top: 4px; border-top: 1px solid rgba(var(--ui-accent-rgb), 0.14); border-radius: 0 0 9px 9px; color: var(--ui-text-dim, #9fb5bc); }
.lc-row.lc-more:first-of-type { margin-top: 0; border-top: 0; border-radius: 9px; }
.link-choose.mobile-sheet .lc-row { min-height: 48px; }

@media (prefers-reduced-motion: reduce) { .link-choose { animation: none; } }