/* The product's buttons for the static landing: frontend/src/styles/controls.css copied as is, after the tokens it
   reads (tokens.css, glass.css). The landing has no glass buttons, so .button.glass is left out. Set on .button so
   they stay off the landing's own :root. Keep in step with those files. */
.button {
  --fs-s: 14px; --fs-m: 16px; --lh-s: 20px; --lh-m: 24px; --fw-m: 500; --fw-b: 600;
  --btn-s: 32px; --btn-l: 44px; --ic-s: 16px; --ic-m: 20px; --sw-s: 1.5px; --sw-m: 1.5px;
  --sp-xs: 4px; --sp-s: 8px; --sp-m: 12px;
  --text: #111827; --muted: #6b7280; --red: #c8102e;
  --fill-hover: rgb(0 0 0 / .05);
  --lg-accent: #1549D4; --lg-text: #111827; --lg-shadow-1: 0 1px 3px rgb(0 0 0 / .08);
  --file-item-active: rgb(21 73 212 / .10); --file-item-active-text: #1549D4;
}

/* Buttons: the one place their sizes and looks are set. Loaded last.
   Every button is .button (as in AI-LegalSearch); the default is large: --btn-l tall, --fs-m text, --ic-m icons
   (rows, menus, send, close, forms). Sub-styles are added as classes:
   Size:
     .btn-sm    small: --btn-s tall, --fs-s text, --ic-s icons (message actions, edit actions, text links,
                the second scope capsule's tabs)
   A shape, when it is not a pill with text (side padding = half the height):
     .btn-icon  a square holding only an icon
     .btn-row   a full-width row, content from the left, text cut with an ellipsis
   A look, when it is not the default (no fill, a quiet fill on hover):
     .plain     never filled; muted, darkens on hover (message actions, the sidebar toggle)
     .lens      the scope capsule's green lens with a white glyph (send, stop)
     .primary   the accent fill (sign in, checkout, save an edit)
     .filled    white with a hairline shadow
     .danger    red text
     .glass     a glass capsule of its own, like the scope capsules (glass-surfaces.js, glass.css): the sources' close
   A state:
     .active    the chosen one (the open chat): a green wash that stays as it is on hover
   The scope capsules' tabs (.hz-opt) take the sizes only; their look is the capsule's.
   The vendored needlesearch .button rules are stripped (vendor/needlesearch/SOURCE.md), so nothing else styles it. */

/* what a component may change: place, margins, colour, weight, motion. Element-level weight (button:where(.button))
   beats the element resets in base.css / app.css, and any class rule beats it. */
button:where(.button) {
  position: relative; margin: 0; color: inherit; font: inherit; font-weight: var(--fw-m);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.button {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 0;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none;
}
.button[hidden] { display: none; }
.button:not(:disabled):hover { background: var(--fill-hover); }
.button:disabled { opacity: .5; cursor: default; }
.button svg { flex: none; }

/* sizes */
.button, .hz-seg:not(.hz-seg--sub) .hz-opt {
  height: var(--btn-l); min-height: var(--btn-l); padding: 0 calc(var(--btn-l) / 2); gap: var(--sp-s);
  font-size: var(--fs-m); line-height: var(--lh-m);
}
.button.btn-sm, .hz-seg--sub .hz-opt {
  height: var(--btn-s); min-height: var(--btn-s); padding: 0 calc(var(--btn-s) / 2); gap: var(--sp-xs);
  font-size: var(--fs-s); line-height: var(--lh-s);
}
.button:not(.btn-sm) svg { width: var(--ic-m); height: var(--ic-m); stroke-width: var(--sw-m); }
.button.btn-sm svg, .hz-opt svg { width: var(--ic-s); height: var(--ic-s); stroke-width: var(--sw-s); }

/* icons outside buttons: the step is the icon's own class (icons.js) */
svg.ic { flex: none; }
/* the line is a fixed number of screen pixels, so a 16px and a 24px icon draw it equally thick */
svg[stroke="currentColor"] :is(path, circle, line, polyline, polygon, ellipse, rect) { vector-effect: non-scaling-stroke; }
svg.ic-s { width: var(--ic-s); height: var(--ic-s); stroke-width: var(--sw-s); }
svg.ic-m { width: var(--ic-m); height: var(--ic-m); stroke-width: var(--sw-m); }
svg.ic-l { width: var(--ic-l); height: var(--ic-l); stroke-width: var(--sw-l); }

/* shapes */
.button.btn-icon { width: var(--btn-l); padding: 0; }
.button.btn-icon.btn-sm { width: var(--btn-s); }
.button.btn-row { display: flex; width: 100%; justify-content: flex-start; gap: var(--sp-m); padding: 0 var(--sp-m); text-align: left; }
.button.btn-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.button .option-label { font: inherit; line-height: inherit; }

/* looks */
.button.plain { color: var(--muted); }
.button.plain:not(:disabled):hover { background: transparent; color: var(--text); }
.button.lens { background: #1549D4; color: #fff; }
.button.primary { background: var(--lg-accent); color: #fff; font-weight: var(--fw-b); }
.button.lens:not(:disabled):hover, .button.primary:not(:disabled):hover { background: #1549D4; }
.button.filled { background: #fff; color: var(--lg-text); box-shadow: var(--lg-shadow-1); font-weight: var(--fw-b); }
.button.filled:not(:disabled):hover { background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .1); }
.button.danger { color: var(--red); }

/* states */
.button.active { background: var(--file-item-active); color: var(--file-item-active-text); }
.button.active:not(:disabled):hover { background: var(--file-item-active); }

/* Narrow screens: the first scope capsule's tabs give up some side padding to fit */
@media (max-width: 768px) {
  .hz-seg:not(.hz-seg--sub) .hz-opt { padding: 0 var(--sp-l); }
}