/* Technology command controls and one-line desktop filter shell. */

.results-kicker {
  margin: 0 0 .12rem;
  color: var(--pal-cyan);
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.clear-button {
  min-height: 2.1rem;
  padding: .3rem .65rem;
  color: #c7d4d6;
  background: rgba(110, 123, 129, .18);
  border-color: rgba(208, 226, 228, .28);
  clip-path: polygon(var(--pal-cut) 0, 100% 0, 100% calc(100% - var(--pal-cut)), calc(100% - var(--pal-cut)) 100%, 0 100%, 0 var(--pal-cut));
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.clear-button:hover {
  color: #fff;
  background: rgba(0, 93, 101, .32);
  border-color: rgba(0, 232, 248, .45);
}

.tree-command-row.catalog-controls {
  margin-top: 0;
  align-items: center;
  grid-template-columns: auto minmax(14rem, 1fr) minmax(11rem, 15rem) minmax(8rem, 11rem) auto;
  gap: .55rem;
}

.catalog-control-label {
  color: #aabcbf;
  font-size: .58rem;
  letter-spacing: .04em;
}

.tree-command-row .technology-search-control > .catalog-control-label,
.tree-command-row .command-control > .catalog-control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Search sits recessed like the tree surface, underlined in Tecnología teal. */
.search-control input {
  border-radius: 0;
  color: var(--pal-text);
  background:
    repeating-linear-gradient(120deg, transparent 0 100px, rgba(164, 208, 214, .045) 100px 145px),
    linear-gradient(180deg, #081b22, #0a2530);
  border: 1px solid rgba(0, 232, 248, .3);
  border-bottom: 2px solid rgba(0, 232, 248, .55);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.search-control input:hover {
  border-color: rgba(0, 232, 248, .5);
  border-bottom-color: var(--pal-cyan);
}

.range-fields input,
.catalog-input-shell input {
  border-radius: 0;
  color: var(--pal-text);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .03) 50%, transparent 50%) 0 0 / 4.5rem 4.5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .03) 50%, transparent 50%) 2.25rem 0 / 4.5rem 4.5rem,
    linear-gradient(180deg, rgba(4, 20, 24, .94), rgba(6, 30, 34, .94));
  border-color: rgba(0, 232, 248, .3);
  clip-path: polygon(var(--pal-cut) 0, 100% 0, 100% calc(100% - var(--pal-cut)), calc(100% - var(--pal-cut)) 100%, 0 100%, 0 var(--pal-cut));
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

/* The two triggers mirror the lane headings: teal Tecnología, purple Tecnología antigua. */
.tree-command .catalog-trigger {
  border-radius: 0;
  color: #f2f8fa;
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 2px solid rgba(255, 255, 255, .22);
  font-size: .88rem;
  font-weight: 640;
  letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  clip-path: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}

.tree-command .level-picker-trigger {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 0 0 / 5rem 5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 2.5rem 0 / 5rem 5rem,
    #00636a;
}

.search-control input:focus {
  border-color: var(--pal-cyan);
  box-shadow: inset 0 0 0 1px rgba(0, 232, 248, .22), 0 0 14px rgba(0, 232, 248, .12);
}

.tree-command .level-picker-trigger:hover,
.tree-command .level-picker-trigger[aria-expanded="true"] {
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .08) 50%, transparent 50%) 0 0 / 5rem 5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .08) 50%, transparent 50%) 2.5rem 0 / 5rem 5rem,
    #00747d;
  border-color: rgba(0, 232, 248, .55);
  border-bottom-color: var(--pal-cyan);
  box-shadow: 0 0 16px rgba(0, 232, 248, .2);
}

.tree-command .filter-trigger {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 0 0 / 5rem 5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 2.5rem 0 / 5rem 5rem,
    #6a287c;
}

.tree-command .filter-trigger:hover,
.tree-command .filter-trigger[aria-expanded="true"] {
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .08) 50%, transparent 50%) 0 0 / 5rem 5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .08) 50%, transparent 50%) 2.5rem 0 / 5rem 5rem,
    #7c3490;
  border-color: rgba(223, 121, 240, .55);
  border-bottom-color: #df79f0;
  box-shadow: 0 0 16px rgba(162, 74, 179, .3);
}

.tree-command .clear-button {
  border-radius: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .04) 50%, transparent 50%) 0 0 / 4.5rem 4.5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .04) 50%, transparent 50%) 2.25rem 0 / 4.5rem 4.5rem,
    linear-gradient(180deg, rgba(34, 54, 60, .92), rgba(16, 30, 35, .92));
  border-color: rgba(190, 214, 218, .38);
  clip-path: none;
}