/* Cards for things of one project pointing at each other (public/refs.js): Notes, tables, the board's cards and the "Used in" lists. Tokens only. */
.rf-card { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 520px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rf-card:hover, .rf-card:focus-visible { border-color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); outline: none; }
.rf-card.small { padding: 5px 8px; gap: 8px; }
.rf-card.gone { border-style: dashed; color: var(--mute); }
.rf-card.done .rf-tx b { text-decoration: line-through; color: var(--mute); }
.rf-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; background: var(--wash); color: var(--ink-2); overflow: hidden; }
.rf-card.small .rf-ic { width: 26px; height: 26px; }
.rf-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-emo { font-size: 18px; line-height: 1; }
.rf-card.k-page .rf-ic { color: var(--ft-violet); } .rf-card.k-board .rf-ic { color: var(--ft-blue); } .rf-card.k-table .rf-ic, .rf-card.k-row .rf-ic { color: var(--ft-green); }
.rf-card.k-link .rf-ic { color: var(--ft-blue); } .rf-card.k-clip .rf-ic { color: var(--ft-amber); } .rf-card.k-task .rf-ic { color: var(--ft-red); }
.rf-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.rf-tx b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-tx small { color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-go { flex: none; color: var(--mute); display: grid; }
/* inline links in a notes paragraph */
a.nt-rf { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ft-blue); padding: 0 2px; border-radius: 2px; background: color-mix(in srgb, var(--ft-blue) 10%, transparent); cursor: pointer; }
a.nt-rf::before { content: '↗ '; color: var(--ft-blue); font-size: .85em; }
a.nt-rf.gone { color: var(--mute); border-bottom-style: dashed; background: none; text-decoration: line-through; }
/* the picker */
.rf-pick { width: min(620px, calc(100vw - 24px)); }
.rf-pick form { display: flex; flex-direction: column; gap: 10px; max-height: min(720px, calc(100vh - 48px)); }
.rf-find input { width: 100%; box-sizing: border-box; }
.rf-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rf-kinds button { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.rf-kinds button i { font-style: normal; color: var(--mute); font-size: 12px; }
.rf-kinds button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.rf-kinds button[aria-selected="true"] i { color: var(--on-ink); opacity: .75; }
.rf-list { flex: 1 1 auto; min-height: 160px; max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.rf-row { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 6px 8px; border-radius: 4px; cursor: pointer; min-width: 0; }
.rf-row .rf-ic { width: 32px; height: 32px; }
.rf-row:hover, .rf-row.at { background: var(--wash); }
.rf-row.on { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.rf-tick { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--mute); border-radius: 4px; position: relative; }
.rf-row.on .rf-tick { background: var(--ink); border-color: var(--ink); }
.rf-row.on .rf-tick::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--on-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rf-none { color: var(--mute); font-size: 14px; padding: 18px 8px; margin: 0; text-align: center; }
.rf-n { color: var(--mute); font-size: 13px; }
/* used in */
.rf-used { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rf-usedd { width: min(480px, calc(100vw - 24px)); }
.rf-usedb { max-height: 50vh; overflow: auto; }
@media (max-width: 760px) { .rf-list { max-height: none; } .rf-pick form { max-height: calc(100vh - 24px); } .rf-card { max-width: none; } }
.ph-used { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.ph-used > b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 600; }