/* ============================================================
   GP Team Hub - links.css

   The link directory on links.php: one row a link, and the note that
   closes the page. Split out of tools.css, which was over the size
   ceiling and holding a page it has nothing else to do with.

   Loaded by the css/tools.css set in includes/manifest.php.

   COLOR RULE: no literal color values. Tokens only.

   Doc: docs/notes/new/css/links.css.md
   ============================================================ */

/* ---- Link rows ----
   One line each. The old grid gave every link a card the size of a
   paragraph, which turned two hundred links into a scroll nobody could
   find anything in. */
.lnk-rows{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));}
.lnk{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  color:var(--ink);
}
.lnk:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.lnk-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
/* One line each. A name that wrapped made its row taller than the rest
   of the grid and left the domain floating in the middle of the gap. */
.lnk-name{
  font-size:.9rem;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lnk-desc{
  color:var(--ink-soft);font-size:.78rem;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lnk-dom{
  color:var(--ink-faint);font-size:.72rem;
  white-space:nowrap;flex-shrink:1;min-width:0;
  max-width:38%;
  overflow:hidden;text-overflow:ellipsis;
  text-align:right;
}
.lnk-ic{font-size:.72rem;color:var(--ink-faint);flex-shrink:0;}
.lnk:hover .lnk-ic{color:var(--ink);}

@media (max-width:520px){
  .lnk-dom{display:none;}
}

/* Category jump chips sit under the filter box, not under a heading,
   so they carry their own lead-in. */
.links-chipnav{margin-top:18px;}

/* Category sections are anchor targets and must clear both sticky bars. */
.links-section{scroll-margin-top:calc(var(--topbar-h) + 52px);}

/* Closing callout under the last category. */
.links-note{margin-top:34px;}


/* ---- Saving a check ----
   The verdict is useful for ten seconds; the record is useful for
   months. A merchant who missed on volume in March is worth another
   look in September, and nobody remembers that unaided. */
.chk-save{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.chk-save-name{
  flex:1;min-width:170px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:8px 11px;
  font-size:.9rem;
  outline:none;
}
.chk-save-name:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.chk-save-name::placeholder{color:var(--ink-faint);}
.chk-save-msg{font-size:.8rem;color:var(--ink-soft);}

.chk-saved{margin-top:16px;}
.chk-saved-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:9px;
}
.chk-saved-title{font-size:.86rem;font-weight:600;}
.chk-saved-title i{color:var(--ink-faint);font-size:.82rem;}
.chk-saved-tally{font-size:.78rem;color:var(--ink-faint);}
.chk-rows{display:flex;flex-direction:column;gap:5px;}
.chk-saved-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 11px;
}
.chk-saved-ic{font-size:.9rem;flex-shrink:0;color:var(--ink-faint);}
.chk-saved-main{display:flex;flex-direction:column;min-width:0;gap:1px;}
.chk-saved-name{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chk-saved-note{font-size:.78rem;color:var(--ink-soft);line-height:1.4;}
.chk-saved-when{margin-left:auto;flex-shrink:0;font-size:.76rem;color:var(--ink-faint);white-space:nowrap;}
.chk-saved-x{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.82rem;
}
.chk-saved-x:hover{background:var(--surface-high);color:var(--ink);}
.chk-saved-x:disabled{opacity:.4;}
.chk-saved-empty{
  font-size:.82rem;color:var(--ink-soft);line-height:1.55;
  max-width:96ch;
}
.chk-saved-empty[hidden]{display:none;}