/* ------------------------------------------------------------------ tool
 * templates/ui/tool.html. An action without a state - search, download,
 * full screen: a 17 px line icon (stroke 1.3), no frame, a square of the
 * control height. Its plain name is the tooltip and the aria-label, so an
 * icon is never the only thing that says what happens (WEB-KOM-05). */
@layer ui {
.tools { display: flex; align-items: center; gap: 2px; }
.tool { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: var(--ctl-h); height: var(--ctl-h); margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.tool:hover, .tool[aria-expanded="true"], .tool[aria-pressed="true"] { background: var(--surface-subtle); color: var(--text-primary); }
/* A download link in a table: its label and the download icon (K-44). */
.dl-link { display: inline-flex; align-items: center; gap: .2em; }
.dl-link svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.tool svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }
.tool:focus-visible { outline: 2px solid var(--rule-brand); outline-offset: 1px; }
.tool[disabled], .tool[disabled]:hover { color: var(--text-disabled); background: transparent; cursor: default; }
/* The tooltip: under the icon, right-aligned so it never leaves the content
   at the right edge (.tool--start: left-aligned, for a tool at the left). */
.tool[data-tip]:hover::after, .tool[data-tip]:focus-visible::after,
.seg__opt[data-tip]:hover::after, .seg__opt[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 45; pointer-events: none;
  white-space: nowrap; padding: var(--s-1) var(--s-2); font-size: var(--t-micro); line-height: 1.4;
  color: var(--text-inverse); background: var(--ink); }
.tool[aria-expanded="true"]::after { display: none; }
.tool--start[data-tip]:hover::after, .tool--start[data-tip]:focus-visible::after { right: auto; left: 0; }
/* The row search that a tool opens is a line of the bar (ui/control-bar.css,
   .ctl-bar__find). */
@media (max-width: 720px) {
  .tool[data-tip]:hover::after, .tool[data-tip]:focus-visible::after { right: auto; left: 0; }
}
}  /* @layer ui */