/* Weekly rank and AI-answer tracking, /sites/rankings (2 Nov 2026).
   In a file of its own so it does not collide with rules other work appends
   to application.css. Everything is scoped under .trk. */

.trk .trk-add { display: grid; gap: 1rem; margin: 0 0 1.2rem; }
@media (min-width: 52rem) {
  .trk .trk-add { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.trk .trk-form { display: grid; gap: .35rem; }
.trk .trk-form label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.trk .trk-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; }
.trk .trk-form .btn { justify-self: start; }
.trk .trk-hint { margin: 0; font-size: .8rem; }
.trk .trk-import { padding: .8rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); }
.trk .trk-import p { margin: 0 0 .5rem; font-size: .9rem; }
.trk .trk-import .trk-hint { margin: .4rem 0 0; }

.trk .trk-table td { vertical-align: top; }
.trk .trk-table tr.is-paused td { opacity: .6; }
.trk .trk-paused { display: block; font-size: .74rem; color: var(--muted); }
.trk .trk-unknown { color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; }
.trk .trk-url a { overflow-wrap: anywhere; }
.trk .trk-name { min-width: 10rem; }
.trk .trk-pos { white-space: nowrap; }
.trk .trk-pos__change, .trk .trk-pos__best { display: block; font-size: .76rem; margin-top: .15rem; }
.trk .trk-url { min-width: 9rem; }
.trk .trk-when { white-space: nowrap; font-size: .8rem; }
.trk .trk-question { min-width: 14rem; }
.trk .trk-rivals { font-size: .82rem; min-width: 8rem; }
/* Check now and Remove sit under the keyword, so the table needs no
   actions column - it was the one pushed off the right edge. */
.trk .trk-actions { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; margin-top: .25rem; font-size: .78rem; }
.trk .trk-actions form { display: inline; margin: 0; }
.trk .trk-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* The sparkline takes its colour from the theme: no hard-coded hex. */
.trk .trk-spark { display: block; overflow: visible; }
.trk .trk-spark polyline { stroke: var(--accent); }
.trk .trk-spark circle { fill: var(--accent); }

/* Remove sits behind a disclosure: there is no Turbo, so data-confirm would
   never fire (site-loads-no-javascript). */
.trk .trk-remove { display: inline-block; }
.trk .trk-remove summary { cursor: pointer; color: var(--muted); }
.trk .trk-remove[open] { display: block; margin: .4rem 0 0; }
.trk .trk-remove p { margin: .3rem 0; white-space: normal; }
.trk .btn--danger { background: transparent; border: 1px solid var(--critical); color: var(--critical); }

.trk .trk-excerpt { margin-top: .35rem; font-size: .82rem; }
.trk .trk-excerpt summary { cursor: pointer; color: var(--accent); }
.trk .trk-excerpt__head { margin: .6rem 0 .1rem; }
.trk .trk-excerpt__text { margin: 0; white-space: pre-line; max-width: 40rem; color: var(--muted); }

@media (max-width: 40rem) {
  .trk .trk-question { min-width: 11rem; }
}