/* signals.css - a product's Signals tab (boards 4.60, F51, F79, 4.13 to
   4.24, 4.65 to 4.68): Worklist | Dashboard on its own line, the toolbar
   (the search box filling the row, the view's choices at its right), the
   columns sharing the width with their cards, a dragged card's dimmed columns, the New signal
   window, a signal's right panel in New, and the plain line without the
   lifecycle. */

@layer components {
  /* ---- Worklist | Dashboard on its own line (238) ---- */
  .signals-views { align-self: flex-start; }

  /* ---- the toolbar: the search box filling the row's left, the view's
     choices at its right (238, F79); data-choices names whose show ---- */
  .signals-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--hit-target);
  }
  .signals-switch, .signals-dashboard-choices { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-4); }
  .signals-toolbar:not([data-choices="switch"]) .signals-switch,
  .signals-toolbar:not([data-choices="dashboard"]) .signals-dashboard-choices { display: none; }

  /* ---- the columns, sharing the whole width; narrower only for a side
     panel, then scrolling sideways at their least width (241) ---- */
  .signals-columns {
    --board-columns: 7;
    display: grid;
    /* Evren to confirm: a column's least width before scrolling sideways stays 150 px */
    grid-template-columns: repeat(var(--board-columns), minmax(var(--board-column-min), 1fr));
    gap: var(--space-4);
    min-width: 0;
    overflow-x: auto;
  }
  .signals-columns[data-state="loading"] { display: flex; flex-direction: column; }
  .signals-column {
    --column-bg: var(--column-ground);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: var(--board-height);
    padding: var(--space-4);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--column-bg);
  }
  .signals-column[data-drop="allowed"] { --column-bg: var(--column-drop); border-color: var(--accent); }
  .signals-column[data-drop="dimmed"] { opacity: 0.45; }
  /* every header one height, so every first card sits on one line (219) */
  .signals-column-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-2);
    height: var(--space-10);
    white-space: nowrap;
    color: var(--ink-faint);
    font-size: var(--text-tag);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .signals-column-name { font-size: var(--text-tag); font-weight: var(--weight-regular); }
  .signals-column-count { margin-left: auto; }
  .signals-new { min-width: 0; min-height: 0; padding: var(--space-1); }
  .signals-new .icon, .signals-new .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .signals-column-why { color: var(--ink-faint); font-size: var(--text-sm); line-height: var(--leading); }
  .signals-column[data-drop="allowed"] .signals-column-why { color: var(--accent-deep); }
  /* the stage line (5.6): the stage, then a button per move from it */
  .signal-stage-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .signal-rounds { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .signal-rounds-line { margin: 0; color: var(--ink-soft); }
  .signal-stage-name { font-weight: var(--weight-medium); margin-inline-end: var(--space-2); }
  .signals-cards { display: flex; flex-direction: column; gap: var(--space-4); }

  /* ---- a card: chips, its name, its lines ---- */
  .signal-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-5) var(--space-5);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-md);
    line-height: var(--leading);
    text-align: left;
  }
  button.signal-card:hover { border-color: var(--accent-line); }
  .signal-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 var(--hairline) var(--accent); }
  .signal-card[data-dragging="true"] { opacity: 0.4; }
  .signal-card-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .signal-chip {
    --chip-bg: var(--accent);
    --chip-ink: var(--on-accent);
    display: block;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--chip-bg);
    color: var(--chip-ink);
    font-size: var(--text-chip);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .signal-card-title { display: block; color: var(--ink); font-size: var(--text-md); }
  .signal-card-line { display: block; color: var(--ink-faint); font-size: var(--text-sm); }
  .signal-card-ask { display: block; color: var(--ink); font-size: var(--text-sm); }
  .signal-card-overdue { display: block; color: var(--danger); font-size: var(--text-sm); }
  .signal-tag {
    display: block;
    align-self: flex-start;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--text-xs);
  }

  /* ---- a card's corner: its dots on hover, its overdue clock and urgent ! (4.12a to 4.12k) ---- */
  .signal-card-slot { position: relative; }
  .signal-card[data-marked="true"] { background: var(--urgent-ground); border-color: var(--urgent-edge); }
  .signal-card[data-marked="true"] .signal-card-title { padding-right: var(--space-10); }
  .signal-card-corner {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .signal-card-dots { min-width: 0; min-height: 0; padding: var(--space-1); opacity: 0; }
  .signal-card-dots .icon, .signal-card-dots .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .signal-card-slot:hover .signal-card-dots, .signal-card-dots:focus-visible,
  .signal-card-dots[aria-expanded="true"] { opacity: 1; }
  .signal-mark { display: block; color: var(--urgent-edge); }
  .signal-mark .icon, .signal-mark .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .signal-mark-urgent {
    width: var(--icon-sm);
    height: var(--icon-sm);
    border: var(--hairline) solid var(--urgent-edge);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    line-height: var(--icon-sm);
    text-align: center;
  }

  /* ---- Stand it down: why, then Yes (4.12g) ---- */
  .signal-stand-down { gap: var(--space-3); min-width: var(--role-start-width); }
  .signal-stand-down-reason { min-height: var(--justification-min); margin: 0 var(--space-5); }
  .signal-stand-down .menu-item { align-self: flex-start; }

  /* ---- the New signal window: Start, Sources, Frequency (4.65 to 4.67x) ---- */
  .new-signal-form { display: contents; }
  .new-signal-body { display: flex; flex-direction: column; gap: var(--space-8); }
  .new-signal-body p { margin-bottom: 0; }
  .new-signal-part { display: flex; flex-direction: column; gap: var(--space-6); }
  .new-signal-part[hidden] { display: none; }
  .new-signal-trigger[data-state="empty"] { color: var(--ink-faint); }
  .new-signal-own { min-height: var(--justification-min); margin-top: var(--space-4); }
  .new-signal-sources, .new-signal-every { margin: 0; padding: 0; border: 0; min-width: 0; }
  .new-signal-source-rows { display: flex; flex-direction: column; }
  .new-signal-source { align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-btn); }
  .new-signal-source:hover { background: var(--mist); }
  .new-signal-source input[type="checkbox"] { margin: 0; }
  .new-signal-source-info { display: block; color: var(--ink-faint); }
  .new-signal-source-info .icon, .new-signal-source-info svg { display: block; width: var(--icon-sm); height: var(--icon-sm); }
  .new-signal-every legend { padding: 0; }
  .new-signal-every-row { display: flex; gap: var(--space-4); }
  .new-signal-count { width: calc(var(--space-12) * 2); flex: 0 0 auto; }
  .new-signal-unit { width: calc(var(--space-12) * 4.5); flex: 0 0 auto; }
  .new-signal-slower:empty { display: none; }
  .new-signal-slower-line { color: var(--ink-faint); font-size: var(--text-sm); }
  .new-signal-foot { display: flex; justify-content: flex-end; gap: var(--space-4); }

  /* ---- a signal's right panel in New (4.13 to 4.24) ---- */
  .signal-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8) var(--space-10);
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-md);
  }
  .signal-panel-line { color: var(--ink-soft); font-size: var(--text-sm); }
  .signal-panel-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .signal-panel-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .signal-panel-tabs > .signal-panel-tab { flex-shrink: 0; }
  .signal-panel-tab {
    --pill-bg: transparent;
    --pill-ink: var(--ink);
    padding: var(--space-1) var(--space-4);
    white-space: nowrap;
  }
  .signal-panel-tab[aria-selected="true"] { --pill-bg: var(--accent-soft); --pill-ink: var(--accent); }
  .signal-panel-tab[aria-disabled="true"] { --pill-ink: var(--ink-faint); cursor: default; }
  .signal-panel-data { display: flex; flex-direction: column; gap: var(--space-10); }
  .signal-panel-part { display: flex; flex-direction: column; gap: var(--space-5); }
  .signal-panel-close { padding-top: var(--space-10); border-top: var(--hairline) solid var(--line); }
  .signal-panel-head { color: var(--ink); font-size: var(--text-row); font-weight: var(--weight-strong); }
  .signal-panel-label { color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--weight-regular); }
  .signal-panel-value { color: var(--ink); font-size: var(--text-md); }
  .signal-panel-brought { line-height: var(--leading); }
  .signal-panel-priorities { display: flex; gap: var(--space-4); }
  .signal-priority { --btn-bg: var(--accent-soft); --btn-ink: var(--accent-deep); --btn-line: transparent; }
  .signal-priority[aria-checked="true"] { --btn-bg: var(--accent); --btn-ink: var(--on-accent); }
  .signal-priority[aria-checked="true"]:hover { background: var(--accent-hover); }
  .signal-panel-date {
    position: absolute;
    width: var(--signal-date-size);
    height: var(--signal-date-size);
    opacity: 0;
    pointer-events: none;
  }
  .signal-panel .field { position: relative; }

  /* ---- without the lifecycle (4.68): one card, the line, Ask Altio ---- */
  .signals-plan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    max-width: var(--home-width);
    margin: var(--space-10) auto;
    padding: var(--space-8);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
  }
  .signals-plan-title { color: var(--ink); font-size: var(--text-row); font-weight: var(--weight-strong); }
  .signals-plan-line { color: var(--ink-soft); font-size: var(--text-md); line-height: var(--leading); }

  /* ---- the committee's outcome window (5.21, 5.23): its next steps ---- */
  .signal-outcome-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .signal-outcome-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: var(--hairline) solid var(--line);
  }
  .signal-outcome-what { flex: 1 1 100%; color: var(--ink); font-size: var(--text-md); }
  .signal-outcome-acts { display: flex; gap: var(--space-4); margin-left: auto; }

  /* ---- Actions and Effectiveness: the steps' table, the watch, a redline (5.24 to 5.28) ---- */
  .signal-actions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .signal-actions-table th {
    text-align: left;
    color: var(--ink-soft);
    font-weight: normal;
    border-bottom: var(--hairline) solid var(--line);
    padding: var(--space-1) var(--space-2);
  }
  .signal-actions-table td {
    vertical-align: top;
    border-bottom: var(--hairline) solid var(--line);
    padding: var(--space-2);
  }
  .signal-actions-watch { color: var(--ink); line-height: var(--leading); }
  .signal-actions-redline { padding-left: var(--space-4); font-size: var(--text-sm); }
  .signal-actions-redline ins { color: var(--accent-deep); }
  .signal-actions-redline del { color: var(--ink-faint); }

  /* ---- the i card (F43a) and the terms window (4.46 to 4.46c) ---- */
  .signal-panel-top-acts { display: flex; gap: var(--space-2); }
  .signal-info {
    padding: var(--space-6);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
  }
  .signal-info-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-md);
  }
  .signal-info-list dt { display: flex; flex-direction: column; gap: var(--space-1); color: var(--ink-soft); }
  .signal-info-terms-list { display: flex; flex-direction: column; gap: var(--space-1); }
  .signal-info-list .btn[aria-disabled="true"] { --btn-ink: var(--ink-faint); cursor: default; }
  .terms-window { display: flex; flex-direction: column; gap: var(--space-3); }
  .terms-label { color: var(--ink-soft); font-size: var(--text-sm); }
  .terms-list { display: flex; flex-direction: column; gap: var(--space-2); }
  .terms-tick { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); }
  .terms-flagged { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
    padding-left: var(--space-8); }
  .terms-flagged .btn[aria-pressed="true"] { --btn-ink: var(--accent); --btn-line: var(--accent); }
}