/* search.css - home's search (boards F22 to F25, F77, F78, 3.1 to 3.4b): the
   four tabs with their counts, then one row with the search box, its
   filter button and the switch's place, and the results as rows of one
   panel in their own scrolling space, two lines where the second says
   something, one date or status at the right, the matches marked. */

@layer components {
  /* ---- the search row: the box filling it, the filter, the switch's
     place at its right, held on every tab (F78) ---- */
  .search-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--hit-target);
    margin-top: var(--search-bar-gap);
  }
  .search-icon {
    display: block;
    position: absolute;
    left: var(--space-5);
    color: var(--ink-faint);
    pointer-events: none;
  }
  .search-icon .icon, .search-icon .icon svg { width: var(--icon-result); height: var(--icon-result); }
  .search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) * 2 + var(--icon-result));
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-btn);
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-md);
  }
  .search-input::placeholder { color: var(--ink-faint); }
  .search-input:focus-visible { outline: var(--focus-ring); outline-offset: 0; }
  .search-input::-webkit-search-cancel-button { appearance: none; }
  /* a tab without a filter keeps the button's place, empty */
  .search-filter[data-state="none"] { visibility: hidden; }
  .search-filter[aria-expanded="true"] { --icon-btn-ink: var(--accent); background: var(--accent-soft); }
  .home-switch { flex: 0 0 var(--home-switch-width); display: flex; justify-content: flex-end; }
  .home-switch[data-state="held"] { visibility: hidden; }

  /* ---- the tabs: Signals, Deliverables, Chats, Documents, the shared
     underline tabs (F25, F78, 237) with each tab's count ---- */
  /* the tabs touch, each padded, so a dragged tab's neighbours slide by its
     width alone (tab-drag.js); the underline is drawn under the words only */
  .search-tabs {
    position: relative;
    flex-wrap: wrap;
    gap: 0;
    margin-left: calc(-1 * var(--space-3));
  }
  .search-tab {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-inline: var(--space-3);
    border-bottom-color: transparent;
  }
  .search-tab[aria-selected="true"] {
    background: linear-gradient(var(--tab-under), var(--tab-under)) no-repeat center bottom /
      calc(100% - 2 * var(--space-3)) var(--tab-underline);
  }
  .tab-count {
    color: var(--ink-faint);
    font-weight: var(--weight-regular);
  }
  .tab-count:empty { display: none; }

  /* ---- a tab dragged to a new place (F26, F26b): it lifts and follows the
     pointer, the others slide aside, a dashed slot shows where it lands;
     no handle and no hint ---- */
  .search-tab {
    touch-action: pan-y;
    transform: translateX(var(--tab-shift, 0));
  }
  .search-tabs[data-state="dragging"] .search-tab {
    transition: transform var(--motion-slide) ease-out;
    cursor: grabbing;
  }
  .search-tabs[data-state="dragging"] .search-tab[data-drag="lifted"] {
    background: var(--panel);
    position: relative;
    z-index: 1;
    transition: none;
    transform: translateX(var(--tab-shift, 0)) translateY(var(--tab-lift)) rotate(var(--tab-tilt));
    box-shadow: var(--shadow-lifted);
  }
  .tab-slot { display: none; }
  .search-tabs[data-state="dragging"] .tab-slot {
    display: block;
    position: absolute;
    top: 0;
    left: var(--tab-slot-left);
    width: var(--tab-slot-width);
    height: var(--tab-slot-height);
    border: var(--hairline) dashed var(--slot-line);
    border-radius: var(--radius-btn);
    transition: left var(--motion-slide) ease-out;
    pointer-events: none;
  }

  /* ---- the results: one list in its own space (F23, F24) ---- */
  .home-results {
    margin-top: var(--results-gap);
    padding-right: var(--space-3);
  }
  .home-results .banner:empty { display: none; }
  .result-list {
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .result-list:empty, .home-results[data-state="none"] .result-list { display: none; }
  .result-list .skeleton-row { margin: var(--space-6) var(--space-7); }
  .result-none {
    padding: var(--space-5) var(--space-7);
    color: var(--ink-faint);
    font-size: var(--text-md);
  }
  .result-none:empty { display: none; }

  /* one result: the chat icon, its title (and passage), its pin and time;
     under the pointer the dots take the time's place (F31, 3.3d) */
  .result-row {
    --chat-row-ink: var(--ink);
    --result-row-bg: var(--chat-row-bg);
    background: var(--result-row-bg);
  }
  /* a document: its page icon, its title and passage, nothing more (3.4, 3.4b) */
  .document-row { --result-row-bg: transparent; }
  .document-row:hover, .document-row:focus-within { --result-row-bg: var(--mist); }
  .result-row:not(:last-child) { border-bottom: var(--hairline) solid var(--line); }
  .result-open {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    width: 100%;
    padding: var(--result-pad-y) var(--space-7);
    color: var(--chat-row-ink);
    text-align: left;
  }
  .result-icon { color: var(--ink-faint); padding-top: var(--space-1); }
  .result-icon .icon, .result-icon .icon svg { width: var(--icon-result); height: var(--icon-result); }
  .result-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }
  .result-title, .result-passage {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .result-title { font-size: var(--text-menu); }
  .result-passage { color: var(--ink-soft); font-size: var(--text-note); }
  .result-passage:empty { display: none; }
  .result-row .chat-pin { align-self: center; }
  .result-row .chat-time { align-self: flex-start; padding-left: var(--space-6); }
  .result-row[data-state="deleting"] .result-passage { color: var(--danger); }
  .result-row .chat-dots { padding-right: var(--space-5); }
  /* Rename: the name edited in its row, beside the chat icon (3.3f) */
  .result-row[data-state="renaming"] .result-open { width: auto; flex: none; padding-right: 0; }
  .result-row[data-state="renaming"] :is(.result-text, .chat-pin, .chat-time, .chat-dots) { display: none; }
  .result-row .chat-rename { padding: var(--space-1) var(--space-6) var(--space-1) var(--space-5); }

  /* the right end: one date or status, never cut (F77) */
  .result-right, .signal-result-date {
    display: block;
    flex: none;
    align-self: flex-start;
    padding-left: var(--space-6);
    color: var(--ink-faint);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .result-right:empty, .signal-result-date:empty { display: none; }

  /* a signal: a row like every other, the pulse at its left, its name on
     its product, line 2 its stage and footer words or the terms it was
     found by, its date at the right, then its marks; urgent or overdue,
     pale red with a red edge (F77, 230) */
  .signal-result {
    --result-row-bg: var(--panel);
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--result-pad-y) var(--space-7);
    border: var(--hairline) solid transparent;
    border-bottom-color: var(--line);
    cursor: pointer;
  }
  .signal-result:last-child { border-bottom-color: transparent; }
  /* red on every side, its corners whole inside the panel (F77, 230); the
     lines between rows would otherwise take its foot */
  .signal-result.red-item[data-red="true"] { border-color: var(--alarm); border-radius: var(--radius); }
  .signal-result[data-red="false"]:hover, .signal-result[data-red="false"]:focus-within { --result-row-bg: var(--mist); }
  .signal-result-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .signal-result-open:focus-visible { outline: var(--focus-ring); }
  .signal-result-line { display: block; }
  .signal-result-marks { display: block; flex: none; align-self: flex-start; }
  .signal-result-marks:empty { display: none; }
  .signal-result-news {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }

  /* typed words found, in a result or in the message a chat opens at (3.6a) */
  .search-mark {
    border-radius: var(--radius-mark);
    background: var(--mark-bg);
    color: inherit;
  }

  /* ---- a filter: its rows, each opening its options beside it (3.3c, 3.3c2) ---- */
  .filter-menu {
    --menu-pad: var(--space-3);
    --menu-radius: var(--radius);
    min-width: 0;
  }
  .filter-menu .menu-item {
    --menu-item-pad-y: var(--space-4);
    --menu-item-ink: var(--ink);
  }
  .filter-menu .menu-item[aria-expanded="true"] { --menu-item-bg: var(--mist); }
  .filter-options { min-width: var(--filter-options-width); }
  .filter-value {
    margin-left: auto;
    color: var(--ink-faint);
    font-size: var(--text-note);
  }
  .filter-menu .icon, .filter-menu .icon svg { width: var(--icon-chevron); height: var(--icon-chevron); }
  .filter-option .icon, .filter-option .icon svg { width: var(--icon-result); height: var(--icon-result); }
  .filter-option .icon { margin-left: auto; color: var(--accent); }
  .filter-option[aria-checked="false"] .icon { visibility: hidden; }
}