/* ==========================================================================================
   EvoTrace components — what a button, a chip, a badge and a card look like, decided once.

   The page's own stylesheet (styles.css) sits in the `legacy` layer and says where things go;
   this file is the `components` layer and says what they look like. A later layer wins over an
   earlier one whatever the selectors, so a family here is the look everywhere its members appear,
   including their hover, focus, pressed and disabled states. A new control joins a family by
   being listed here, not by being styled on its own.

   Every value comes from tokens.css.
   ========================================================================================== */
@layer legacy, components;

@layer components {

  /* ---- buttons: one shape, four intents ---------------------------------------------------- */
  :is(.btn-primary, .btn-secondary,
      .run-actions button, .decision-choices button, .dialog-actions button, .conclusion-actions button,
      .concl-followup button, .concl-related button, .rail-next-step-go, .library-open, .demo-start:not(.link),
      .composer button[type="submit"], .rail-composer button[type="submit"], .session-form-actions button,
      .door-pick, .fast-dispatch, .coach-ok, .run-retry) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 34px;
    padding: 0 var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--ink-2);
    font: var(--weight-medium) var(--text-base)/1.2 var(--font-ui);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: translate var(--t-quick) var(--ease-out), scale var(--t-press) var(--ease-out),
      background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out),
      color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
  }

  /* secondary: the default, an action that does not move the analysis on */
  :is(.btn-secondary,
      .run-actions button, .decision-choices button, .dialog-actions button, .conclusion-actions button,
      .concl-followup button, .concl-related button, .door-pick, .fast-dispatch, .coach-ok):not(.is-primary):not(.is-danger):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--teal);
    background: var(--teal-wash);
    color: var(--teal-ink);
  }

  /* primary: the one action that moves the analysis on */
  :is(.btn-primary, .is-primary, .rail-next-step-go, .library-open:not(.btn-secondary), .demo-start:not(.link),
      .composer button[type="submit"], .rail-composer button[type="submit"],
      .session-form-actions button[type="submit"]):not(.is-danger) {
    border-color: var(--teal);
    background: var(--teal);
    color: var(--surface);
  }
  :is(.btn-primary, .is-primary, .rail-next-step-go, .library-open:not(.btn-secondary), .demo-start:not(.link),
      .composer button[type="submit"], .rail-composer button[type="submit"],
      .session-form-actions button[type="submit"]):not(.is-danger):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--teal-deep);
    background: var(--teal-deep);
    color: var(--surface);
    box-shadow: var(--shadow-accent);
  }

  /* danger: cannot be taken back; it says so before it is pressed */
  .is-danger {
    border-color: var(--red-line);
    background: var(--surface);
    color: var(--red-ink);
  }
  .is-danger:is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--red);
    background: var(--red-wash);
    color: var(--red-ink);
  }
  .is-danger.is-primary {
    border-color: var(--red);
    background: var(--red);
    color: var(--surface);
  }
  .is-danger.is-primary:is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--red-ink);
    background: var(--red-ink);
    color: var(--surface);
  }

  /* quiet: words that act -- a link's look, a button's behaviour */
  :is(.btn-quiet, .link, .finding-link, .record-link, .notify-toggle, .login-toggle, .bubble-link, .concl-link) {
    padding: 0;
    border: 0;
    background: none;
    color: var(--teal);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  :is(.btn-quiet, .link, .finding-link, .record-link, .notify-toggle, .login-toggle, .bubble-link, .concl-link):is(:hover, :focus-visible) {
    color: var(--teal-deep);
    background: none;
  }

  /* pressed and unavailable, the same for every button */
  :is(.btn-primary, .btn-secondary, .run-actions button, .decision-choices button, .dialog-actions button,
      .conclusion-actions button, .concl-followup button, .concl-related button, .rail-next-step-go,
      .library-open, .demo-start:not(.link), .composer button[type="submit"],
      .rail-composer button[type="submit"], .session-form-actions button, .door-pick, .fast-dispatch, .coach-ok):active:not(:disabled) {
    translate: 0 0;
    box-shadow: none;
  }
  :is(.btn-primary, .btn-secondary, .run-actions button, .decision-choices button, .dialog-actions button,
      .conclusion-actions button, .concl-followup button, .concl-related button, .rail-next-step-go,
      .library-open, .demo-start, .composer button, .rail-composer button, .session-form-actions button,
      .door-pick, .fast-dispatch, .coach-ok):disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
  }

  /* the composer's send sits inside a pill-shaped field */
  :is(.composer, .rail-composer) button[type="submit"] { border-radius: var(--r-pill); }

  /* ---- controls in the header: one height, one shape ---------------------------------------- */
  /* Shape only, never whether they show: each decides that for itself by width and page (the
     assistant and panel buttons exist only where their sheet does, the plus not beside the demo
     pill), and a display set in this layer overrode every one of those. */
  :is(.files-open, .record-open, .rail-drawer, .inspector-toggle, .new-analysis) {
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--ink-2);
    font: var(--weight-medium) var(--text-sm)/1 var(--font-ui);
    cursor: pointer;
  }
  .new-analysis { border-color: var(--teal-line); color: var(--teal-ink); }
  :is(.files-open, .record-open, .rail-drawer, .inspector-toggle, .new-analysis):is(:hover, :focus-visible) {
    border-color: var(--teal);
    background: var(--teal-wash);
    color: var(--teal-ink);
  }
  :is(.files-open, .record-open, .rail-drawer, .inspector-toggle)[aria-expanded="true"] {
    border-color: var(--teal-line);
    background: var(--teal-wash);
    color: var(--teal-ink);
  }
  .account-button {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font: var(--weight-medium) var(--text-sm)/1 var(--font-ui);
  }
  .account-button:is(:hover, :focus-visible), .account-button[aria-expanded="true"] { border-color: var(--teal-line); }

  /* ---- chips: an answer, a filter, a toggle ---------------------------------------------- */
  :is(.choice-chip, .rail-choice-chip, .starter-chip:not(.link), .library-chip, .monitor-chip,
      .concl-hero-filter, .run-board-toggle, .session-preset, .monitor-details-toggle, .tree-names-toggle) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    /* A chip whose words wrap (a legend's "Other: …") keeps its padding and reads from its start. */
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font: var(--weight-medium) var(--text-sm)/1.2 var(--font-ui);
    text-align: start;
    cursor: pointer;
  }
  :is(.choice-chip, .rail-choice-chip, .starter-chip:not(.link), .library-chip, .monitor-chip,
      .concl-hero-filter, .run-board-toggle, .session-preset, .monitor-details-toggle, .tree-names-toggle):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--teal);
    background: var(--teal-wash);
    color: var(--teal-ink);
  }
  :is(.choice-chip, .rail-choice-chip, .library-chip, .concl-hero-filter, .session-preset, .monitor-chip):is(.is-active, .is-chosen, [aria-pressed="true"], [aria-checked="true"]) {
    border-color: var(--teal-line);
    background: var(--teal-wash);
    color: var(--teal-ink);
  }
  :is(.choice-chip, .rail-choice-chip).is-primary {
    border-color: var(--teal);
    background: var(--teal);
    color: var(--surface);
  }
  :is(.choice-chip, .rail-choice-chip).is-primary:is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--teal-deep);
    background: var(--teal-deep);
    color: var(--surface);
  }
  /* The answers to a question are the size of an answer, not of a filter. */
  :is(.choice-chip, .rail-choice-chip) { min-height: 34px; padding: 0 var(--space-4); font-size: var(--text-base); }

  /* ---- icon buttons: close, collapse, reveal ------------------------------------------------ */
  :is(.files-close, .library-close, .files-preview-close, .runtime-banner-close, .rail-collapse) {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs)/1 var(--font-ui);
    cursor: pointer;
  }
  :is(.files-close, .library-close, .files-preview-close, .runtime-banner-close, .rail-collapse):is(:hover, :focus-visible) {
    border-color: var(--teal);
    background: var(--teal-wash);
    color: var(--teal-ink);
  }

  /* ---- badges: a word about a thing, never an action ---------------------------------------- */
  :is(.validation-badge, .review-badge, .run-badge, .library-badge, .node-badge, .delib-badge,
      .choice-badge, .concl-reliability-badge, .record-ground-tag) {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--r-pill);
    font: var(--weight-medium) var(--text-xs)/1 var(--font-ui);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  /* ---- cards: one surface ----------------------------------------------------------------- */
  :is(.card, .place-card, .plan-card, .step-card, .upload-card, .library-card, .node-card, .concl-card) {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-m);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  :is(.decision-card, .run-board, .next-step) { border-radius: var(--r-m); }
  :is(.card-kicker, .run-kicker, .next-step-kicker) {
    color: var(--teal-ink);
    font: var(--weight-strong) var(--text-xs)/1.3 var(--font-ui);
    letter-spacing: 0.06em;
  }

  /* ---- fields --------------------------------------------------------------------------------- */
  :is(.session-form input, .session-form select, .record-own-form textarea) {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
  }
  :is(.session-form input, .session-form select, .record-own-form textarea):focus-visible {
    border-color: var(--teal);
    outline: none;
    box-shadow: var(--focus-ring);
  }

  /* ---- tabs: where to look on this page ----------------------------------------------------
     The top navigation's shape, one size down: a well of options, the one in view lifted out of
     it. The report sections, the trees page's two views and the tree explorer's axis. */
  :is(.stage-tabs, .trees-switch, .tx-segmented) {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: 100%;
    margin: 0;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-m);
    background: var(--surface-3);
  }
  :is(.stage-tabs, .trees-switch, .tx-segmented) > button {
    position: static;
    flex: 0 0 auto;
    min-height: 28px;
    margin: 0;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--r-s);
    background: transparent;
    color: var(--muted);
    font: var(--weight-medium) var(--text-sm)/1 var(--font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out),
      box-shadow var(--t-quick) var(--ease-out);
  }
  :is(.stage-tabs, .trees-switch, .tx-segmented) > button:is(:hover, :focus-visible) {
    color: var(--teal-ink);
    background: var(--surface-2);
  }
  :is(.stage-tabs, .trees-switch, .tx-segmented) > button:is(.is-on, [aria-current="true"], [aria-selected="true"]) {
    color: var(--teal-ink);
    background: var(--surface);
    box-shadow: var(--shadow-1), 0 0 0 1px var(--line-soft);
  }

  /* ---- one focus ring --------------------------------------------------------------------- */
  :is(button, a, [role="switch"], [role="tab"], summary):focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
  }

  /* The legacy sheet hides some members by width or state. A display set in this layer beats any
     rule there, so those hides are restated here, where they win again. */
  .chat-page:not([data-mode="running"]):not([data-mode="gate"]):not([data-mode="failed"]) .run-board-toggle,
  .delib-badge:empty { display: none; }
  @media (max-width: 720px) {
    .validation-badge { display: none; }
  }

  /* A family sets how its members display; `hidden` still hides every one of them. */
  :is(.btn-primary, .btn-secondary, .run-actions button, .decision-choices button, .dialog-actions button,
      .conclusion-actions button, .concl-followup button, .concl-related button, .rail-next-step-go,
      .library-open, .demo-start, .composer button, .rail-composer button, .session-form-actions button,
      .door-pick, .fast-dispatch, .coach-ok, .run-retry, .btn-quiet, .link, .finding-link, .record-link,
      .notify-toggle, .login-toggle, .bubble-link, .concl-link, .files-open, .record-open, .rail-drawer,
      .inspector-toggle, .new-analysis, .account-button, .choice-chip, .rail-choice-chip, .starter-chip,
      .library-chip, .monitor-chip, .concl-hero-filter, .run-board-toggle, .session-preset,
      .monitor-details-toggle, .tree-names-toggle, .files-close, .library-close, .files-preview-close,
      .runtime-banner-close, .rail-collapse, .validation-badge, .review-badge, .run-badge,
      .library-badge, .node-badge, .delib-badge, .choice-badge, .concl-reliability-badge,
      .record-ground-tag, .card, .place-card, .plan-card, .step-card, .upload-card, .library-card,
      .node-card, .concl-card, .stage-tabs, .trees-switch, .tx-segmented)[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.btn-primary, .is-primary, .rail-next-step-go):hover { translate: none; }
  }
}