/* /public/assets/styles/rank_checker.css
   Rank Checker – clean, left-aligned, NF-level typography
   Isolated .rc-* selectors (independent from nf-*)
*/

.rank-checker-page .hero__inner{
  padding-bottom: 46px;
}

/* ====== Stacked search layout (centered, full-width fields) ====== */
.rc-search{
  width: 100%;
  max-width: 720px;          /* schmaler, aber mittig */
  margin: 0 auto;            /* ✅ centered */

  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  justify-items: stretch;    /* ✅ children stretch */
}

/* Inputs full-width */
.rc-search select,
.rc-search input{
  width: 100%;
  min-width: 0;
}

/* Only the main run button full-width */
.rc-row--btn .rc-btn{
  width: 100%;
}


/* Row wrapper */
.rc-row{ width: 100%; }
.rc-row--btn{ padding-top: 2px; }
.rc-btn{ width: 100%; }

/* Video row overlays */
.rc-row--video{
  position: relative;
}

/* When a link is picked: field becomes white and text disappears */
.rc-search.is-picked #rt-video{
  background: #fff !important;
  color: transparent;
  caret-color: transparent;
  text-shadow: none;
}
.rc-search.is-picked #rt-video::placeholder{
  color: transparent;
}

/* Selected video mini-card (inside input area) */
.rc-picked{
  position: absolute;
  inset: 2px;
  display:flex;
  gap: 10px;
  background: #fff;
}

.rc-search.is-picked .rc-row--video{
  min-height: 86px;
}
.rc-search.is-picked #rt-video{
  height: 86px;
}

/* smaller thumb than results card */
.rc-picked__thumb{
  width: 116px;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow:hidden;
  flex: 0 0 auto;
  background: rgba(15,19,32,.06);
}
.rc-picked__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}


.rc-picked__title{
   margin:0;
  text-decoration:none;
  color: var(--text);
  font-size:1.0rem;
  text-align: left;
  font-weight:600;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  cursor: pointer;
}

.rc-picked__channel{
 margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  color:var(--muted-2);
  line-height:1.35;
  font-weight:420;
  font-variant-numeric: tabular-nums;
}

/* X remove button (top right) */
.rc-picked__x{
  position:absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rc-picked__x:hover{
  background: rgba(15,19,32,.10);
}

/* ====== Result cards ====== */
.rc-card{
  margin-top: 16px;
  width: 100%;
  max-width: none;

  background: #fff;
  border: 0;
  box-shadow: none;

  border-radius: 16px;
  padding: 14px;

  transform: translateY(6px);
  opacity: 0;
  animation: rcIn .26s ease-out forwards;
}

@keyframes rcIn{
  to { transform: translateY(0); opacity: 1; }
}

/* Top row: thumbnail left, meta right */
.rc-card__top{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.rc-thumb{
  width: 200px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}

.rc-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rc-meta{
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}

.rc-videoTitle{
  margin:0;
  text-decoration:none;
  color: var(--text);
  font-size:1.0rem;
  text-align: left;
  font-weight:600;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  cursor: pointer;
}

.rc-videoTitle:hover{ text-decoration:underline; }

.rt-line{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-top: 8px;
  font-size:.9rem;
  color:var(--muted-2);
  line-height:1.35;
  font-weight:420;
  font-variant-numeric: tabular-nums;
}

/* Table */
.rc-tableWrap{
  overflow: auto;
}

.rc-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
}

.rc-table thead th{
  padding: 10px 0;
  color: var(--text);
  font-weight: 500;
  text-align: left;
}

.rc-table tbody td{
  padding: 11px 0;
  border-top: 1px solid rgba(15,19,32,.08);
  vertical-align: middle;
}

/* Rank column */
.rc-col-rank{
  text-align: right;
  width: 150px;
}

.rc-table td.rc-col-rank{
  font-variant-numeric: tabular-nums;
}

.rc-rank{
  text-align: left;
  font-weight: 600;
  color: var(--text);
}

/* Missing keyword row */
.rt-row--missing td{
  color: rgba(15,19,32,.42);
}
.rt-row--missing .rc-rank{
  color: rgba(15,19,32,.33);
  font-weight: 650;
}

/* Results stack */
.rc-results{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-top: 44px;
}

/* Loading state: subtle shimmer + disabled interactions */
.rc-card.is-loading{
  pointer-events:none;
}

/* Spinner row (like NF) */
.rc-loadingRow{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 6px;
  color: var(--muted-2);
  font-size: .9rem;
  font-weight: 500;
}

.rc-spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(15,19,32,.18);
  border-top-color: rgba(15,19,32,.65);
  animation: rcSpin .8s linear infinite;
}

@keyframes rcSpin{ to { transform: rotate(360deg); } }

/* Soft skeleton blocks inside loading card */
.rc-sk{
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(15,19,32,.05),
    rgba(15,19,32,.10),
    rgba(15,19,32,.05)
  );
  background-size: 220% 100%;
  animation: rcShimmer 1.1s ease-in-out infinite;
}

@keyframes rcShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -20% 0; }
}

/* Skeleton sizes for loading card */
.rc-thumb--sk{ width: 200px; aspect-ratio: 16/9; }
.rc-title--sk{ height: 16px; width: min(520px, 90%); margin: 2px 0 8px; }
.rc-line--sk{ height: 12px; width: 220px; margin: 6px 0; }
.rc-table--sk{ height: 84px; width: 100%; margin-top: 12px; }

/* Channel link styling (subtle) */
.rc-chLink{
  color: inherit;
  text-decoration: none;
}
.rc-chLink:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 560px){
  .rc-search{ max-width: 100%; }

  .rc-picked__thumb{ width: 96px; }
  .rc-search.is-picked .rc-row--video{ min-height: 78px; }
  .rc-search.is-picked #rt-video{ height: 78px; }

  .rc-thumb{ width: 112px; }
  .rc-col-rank{ width: 96px; }
}