/* ============================================================================
   Link Checker: styles (Nitro Sites tools hub)

   SKINNED TO THE HOST. Everything here is driven by nitrosites' design tokens
   (src/styles/tokens.css) and reuses its component recipes (.btn/.btn-primary/
   .btn-ghost, .card, .field) which the BaseLayout shell loads globally via
   global.css (AGENTS.md §2). No raw brand colours, fonts, spacing or radii here
 only var(--…) host tokens. This tool has no brand-simulation surface, so
   there is NO literal hex anywhere in this file.

   Cascade note (AGENTS.md §2f): on the LIVE site app.css loads BEFORE the host
   bundle, so the host wins same-specificity battles there (opposite of dev,
   where the shim loads first). Anywhere we override a property a host class
   sets (.field's margin, .btn's padding, …) we use a parent selector for extra
   specificity rather than relying on source order.
   ========================================================================== */
.lnk{
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 56rem;
  margin: 0 auto;
  width: 100%;
}
.lnk *{box-sizing:border-box}
.lnk ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* ---------- search form ---------- */
.lnk-form{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:stretch; margin:var(--sp-4) auto 0; max-width:44rem}
/* host .field is a column with bottom margin; flatten it into the inline search row. */
.lnk-form .lnk-field{flex:1; min-width:12rem; margin:0}
.lnk-input{font-size:var(--fs-lg)}
.lnk-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.lnk-btn{white-space:nowrap; display:inline-flex; align-items:center; gap:var(--sp-2)}
.lnk-btn:disabled{opacity:.6; cursor:progress}
.lnk-ico{width:1.1em; height:1.1em; display:inline-flex; flex-shrink:0}
.lnk-ico svg{width:100%; height:100%}

/* ---------- options row (checkboxes) ---------- */
.lnk-opts{
  display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-5);
  width:100%; margin-top:var(--sp-3);
}
.lnk-check{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--color-muted); cursor:pointer; user-select:none;
}
.lnk-check:hover{color:var(--color-text)}
.lnk-check-input{
  width:1.1em; height:1.1em; accent-color:var(--color-primary); cursor:pointer; margin:0;
}

/* ---------- status / spinner ---------- */
.lnk-status{min-height:1.6rem; text-align:center; color:var(--color-muted); font-size:var(--fs-sm); margin:var(--sp-3) 0}
.lnk-status.is-live{color:var(--color-text)}
.lnk-spin{
  display:inline-block; width:0.9em; height:0.9em; margin-right:var(--sp-2);
  border:2px solid var(--color-border-strong); border-top-color:var(--color-primary);
  border-radius:var(--r-full); vertical-align:-0.15em;
  animation: lnk-spin var(--dur-slow, .9s) linear infinite;
}
@keyframes lnk-spin{to{transform:rotate(360deg)}}

/* ---------- error / empty ---------- */
.lnk-error{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--color-surface-2); border:1px solid var(--color-danger);
  border-radius:var(--r-lg); padding:var(--sp-4); margin:var(--sp-4) 0;
}
.lnk-error-ico{font-size:var(--fs-xl); color:var(--color-danger); line-height:1}
.lnk-error-msg{color:var(--color-muted); margin-top:var(--sp-1); font-size:var(--fs-sm)}
.lnk-empty{padding:var(--sp-5); margin:var(--sp-4) 0; color:var(--color-muted); text-align:center}

/* ---------- progress header ---------- */
.lnk-progress{padding:var(--sp-5); margin:var(--sp-4) 0}
.lnk-progress-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.lnk-counter{font-family:var(--font-display); font-weight:700; font-size:var(--fs-xl); color:var(--color-text)}
.lnk-stop{display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-3)}
.lnk-stop:disabled{opacity:.5; cursor:default}
.lnk-stop .lnk-ico{width:0.9em; height:0.9em}

.lnk-bar{
  display:flex; height:0.6rem; border-radius:var(--r-full); overflow:hidden;
  background:var(--color-surface-3);
}
.lnk-seg{height:100%; transition:width var(--dur-slow, .3s) var(--ease-out, ease)}
.lnk-seg.tone-ok{background:var(--color-success)}
.lnk-seg.tone-redirect{background:var(--color-status-partial)}
.lnk-seg.tone-broken{background:var(--color-danger)}
.lnk-seg.tone-other{background:var(--color-border-strong)}

/* ---------- summary ---------- */
.lnk-summary{margin-bottom:var(--sp-4)}
.lnk-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(7rem, 1fr)); gap:var(--sp-3); margin-bottom:var(--sp-3)}
.lnk-card{padding:var(--sp-4); text-align:center}
.lnk-card-n{font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl); color:var(--color-text); line-height:1}
.lnk-card-l{font-size:var(--fs-xs); color:var(--color-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-top:var(--sp-1)}

.lnk-note{
  font-size:var(--fs-sm); color:var(--color-muted); padding:var(--sp-2) var(--sp-1);
}
.lnk-note a{color:var(--color-accent-2)}
.lnk-note a:hover{color:var(--color-primary)}

/* ---------- broken shortlist ---------- */
.lnk-broken{padding:var(--sp-4); margin-bottom:var(--sp-3); border-color:var(--color-danger)}
.lnk-broken-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.lnk-broken-head strong{color:var(--color-danger); font-size:var(--fs-base)}
.lnk-broken-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); max-height:14rem; overflow-y:auto}
.lnk-broken-list li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-sm); border-bottom:1px solid var(--color-border); padding-bottom:var(--sp-1)}
.lnk-broken-list li:last-child{border-bottom:none}
.lnk-broken-code{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-danger); flex-shrink:0}

/* ---------- mini buttons (Copy for AI / Copy list) ---------- */
.lnk-mini{font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-3); display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap}
.lnk-mini svg{width:1em; height:1em}
.lnk-mini.done{color:var(--color-success)}
.lnk-copyai{margin:var(--sp-3) 0}

/* ---------- results table ---------- */
.lnk-tablewrap{overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--color-border); margin-bottom:var(--sp-3)}
.lnk-table{width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:38rem}
.lnk-table thead{background:var(--color-surface-2)}
.lnk-th{
  text-align:left; padding:var(--sp-3) var(--sp-3); font-weight:700; color:var(--color-muted);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  white-space:nowrap; border-bottom:1px solid var(--color-border);
}
.lnk-th.is-sortable{cursor:pointer; user-select:none}
.lnk-th.is-sortable:hover{color:var(--color-text)}
.lnk-row td{padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--color-border); vertical-align:middle}
.lnk-row:last-child td{border-bottom:none}
.lnk-row:hover{background:var(--color-surface-2)}
.lnk-text{color:var(--color-muted); max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lnk-flags{color:var(--color-status-partial); font-size:var(--fs-xs); white-space:nowrap}
.lnk-url{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-text); word-break:break-all}

/* status badge */
.lnk-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem;
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); font-family:var(--font-mono);
  font-size:var(--fs-xs); font-weight:700; white-space:nowrap;
}
.lnk-badge.tone-ok{background:color-mix(in srgb, var(--color-success) 18%, transparent); color:var(--color-success)}
.lnk-badge.tone-redirect{background:color-mix(in srgb, var(--color-status-partial) 18%, transparent); color:var(--color-status-partial)}
.lnk-badge.tone-broken{background:color-mix(in srgb, var(--color-danger) 18%, transparent); color:var(--color-danger)}
.lnk-badge.tone-muted{background:var(--color-surface-3); color:var(--color-muted)}
.lnk-badge.tone-pending{background:var(--color-surface-3); color:var(--color-muted)}

/* type chip */
.lnk-chip{
  display:inline-block; padding:0.15em 0.6em; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600; text-transform:capitalize; white-space:nowrap;
  border:1px solid var(--color-border-strong); color:var(--color-muted);
}
.lnk-chip.tone-internal{color:var(--color-accent-2); border-color:var(--color-accent-2)}
.lnk-chip.tone-external{color:var(--color-secondary-soft, var(--color-secondary)); border-color:var(--color-secondary)}

/* ---------- skipped <details> ---------- */
.lnk-skipped{margin-bottom:var(--sp-4); font-size:var(--fs-sm)}
.lnk-skipped summary{cursor:pointer; color:var(--color-muted); padding:var(--sp-2) 0; user-select:none}
.lnk-skipped summary:hover{color:var(--color-text)}
.lnk-skipped-list{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.lnk-skipped-list li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-1) 0; border-bottom:1px solid var(--color-border)}
.lnk-skipped-list li:last-child{border-bottom:none}
.lnk-skip-reason{font-size:var(--fs-xs); color:var(--color-muted); flex-shrink:0}

/* ---------- responsive ---------- */
@media (max-width: 30rem){
  .lnk-form{flex-direction:column}
  .lnk-progress-head{flex-direction:column; align-items:flex-start; gap:var(--sp-2)}
  .lnk-cards{grid-template-columns:repeat(2, 1fr)}
  .lnk-text{max-width:8rem}
}