/* The controls, in ardana.ai's vocabulary: quiet gray text buttons that turn ink, one ink pill for Run, the command
   box's 6px icon buttons and its copy key, outline pills for tags and the picked segment, terminal-gray fields, and
   an ink tooltip that names a control's shortcut or a figure's meaning. */

/* Buttons: gray at rest, ink on hover, like the landing's nav and text switch. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-inner);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-15);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--fast) ease,
    background-color var(--fast) ease,
    transform var(--fast) ease;
}

.button:hover:not(:disabled, [aria-disabled="true"]),
.button:active:not(:disabled, [aria-disabled="true"]),
.button[aria-expanded="true"] {
  color: var(--ink);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* Primary: the ink pill, the landing's Copy pill at the top bar's scale. One per screen. */
.button-primary {
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.button-primary:hover:not(:disabled, [aria-disabled="true"]),
.button-primary:active:not(:disabled, [aria-disabled="true"]),
.button-primary[aria-expanded="true"] {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.button-primary:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(0.97);
}

.button-primary:disabled,
.button-primary[aria-disabled="true"] {
  opacity: 0.35;
}

/* Busy: full strength, the caret blinking after the label. */
.button-primary[aria-busy="true"] {
  opacity: 1;
}

/* Run's face and its unseen sizer share one cell, so the pill is as wide as "Running" with its caret whatever it says
   (the landing's Copy pill keeps its width when it says Copied). A phone's top bar has no room to spare: there the pill
   fits its label. */
.run-key {
  display: inline-grid;
  place-items: center;
}

.run-face,
.run-sizer {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
}

.run-sizer {
  visibility: hidden;
}

.run-sizer .caret {
  animation: none;
}

@media (max-width: 720px) {
  .run-sizer {
    display: none;
  }
}

/* Icon button: the command box's 6px key; its name is its aria-label and its tooltip. */
.button-icon {
  width: 32px;
  min-width: 32px;
  padding: 0;
  color: var(--code-muted);
}

.button-icon:hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--code-ink);
  background: var(--code-hover);
}

.button-icon.button-sm {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
}

/* Small: row-level actions (Edit, Add option, Remove question). */
.button-sm {
  min-height: 28px;
  padding: 0 8px;
  font-size: var(--text-14);
}

/* Segmented control: a native radio group; the picked option is an ink-outlined pill, the others gray words. With
   enlarged text it wraps, its options under the legend and onto further rows, rather than run off a phone's screen. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: 100%;
}

/* The legend names the group in the label voice, regular weight, so it never reads as one more option. */
.segmented-legend {
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 400;
}

.segmented-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1) 2px;
  min-width: 0;
}

.segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--fast) ease,
    box-shadow var(--fast) ease;
}

.segment:hover:not(.on) {
  color: var(--ink);
}

/* The picked segment: an ink outline that holds 3:1 on the paper, not colour alone. */
.segment.on {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  cursor: default;
}

/* The real radio covers its segment, invisible: pointer, arrow keys and assistive tech all reach the native control. */
.segment-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.segment:has(.segment-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Fields: what the API reads, so they sit on the terminal gray like the landing's command boxes; a box you type in
   carries a 1px ring in the landing's code gray (3:1 and more on the paper and on its fill, WCAG 1.4.11), where a box
   you copy from, the landing's own command box, has none. */
.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field-label {
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 500;
  line-height: 1.4;
}

.field-input {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--code-bg);
  box-shadow: inset 0 0 0 1px var(--code-muted);
  color: var(--code-ink);
  font-size: var(--text-15);
  line-height: 1.5;
  transition: box-shadow var(--fast) ease;
}

textarea.field-input {
  resize: vertical;
}

.field-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--danger);
}

/* A field the builder cannot edit (structured JSON) is drawn as an outline, its text gray. */
.field-input:disabled {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

.field-code {
  font-family: var(--mono);
  font-size: var(--text-13);
}

.field-note {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.4;
}

/* The model picker: a native select as a small command box, the model's name in the terminal's voice. */
.select {
  position: relative;
  display: block;
  min-width: 0;
}

.select-input {
  appearance: none;
  width: 100%;
  min-height: 40px;
  padding: 0 36px 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--code-bg);
  box-shadow: inset 0 0 0 1px var(--code-muted);
  color: var(--code-ink);
  font-family: var(--mono);
  font-size: var(--text-13);
  line-height: 1.45;
  text-overflow: ellipsis;
  cursor: pointer;
}

.select .icon {
  position: absolute;
  top: 50%;
  right: 13px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  color: var(--code-muted);
  pointer-events: none;
  transition: color var(--fast) ease;
}

.select:hover .icon {
  color: var(--code-ink);
}

/* Tag: the landing's "default" pill, a hairline outline around a 12px gray word. Its words wrap only when they are
   wider than their row (enlarged text on a phone), rather than widen the page. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--text-12);
  font-weight: 500;
  line-height: 1.4;
}

/* Tooltip: an ink card (paper in the dark scheme) on hover and focus, with an optional shortcut line. It describes;
   it is never the only name of a control. */
.tip {
  position: relative;
}

/* Hidden tooltips take no layout at all (an absolutely positioned box off the page edge would scroll the page).
   The 6px gap to the control is a transparent border, so the pointer can cross onto the tooltip and it stays
   (WCAG 1.4.13); Escape dismisses every tooltip through `.tips-off` on the root. Its words are drawn, never read out
   (the empty alternative text): they would join the control's name, which its label or `aria-label` already says. */
.tip::after {
  content: attr(data-tip) / "";
  display: none;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: min(272px, 60vw);
  padding: 6px 10px;
  border: 6px solid transparent;
  border-radius: 12px;
  background: var(--ink);
  background-clip: padding-box;
  color: var(--bg);
  font-family: var(--font);
  font-size: var(--text-12);
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-line;
  text-align: center;
}

.tip:focus-visible::after,
.tip:has(:focus-visible)::after {
  display: block;
}

/* The first name of a fact row, the row's one stop for Tab, says how to reach the others when the keyboard brings it
   the focus. */
.tip[data-keys]:focus-visible::after {
  content: attr(data-tip) "\A" attr(data-keys) / "";
}

/* Hover shows a tooltip only where a pointer can hover: a tap on a phone leaves nothing behind over the page. */
@media (hover: hover) {
  .tip:hover::after {
    display: block;
  }
}

.tips-off .tip::after {
  display: none;
}

/* A held or busy Run sends nothing when pressed: its tooltip would say otherwise, at the pill's faded strength and over
   the banner that says why. */
.tip.run-key[aria-disabled="true"]::after,
.tip.run-key[aria-busy="true"]::after {
  display: none;
}

.tip-below::after {
  bottom: auto;
  top: 100%;
}

.tip-end::after {
  left: auto;
  right: -6px;
  transform: none;
}

.tip-start::after {
  left: -6px;
  transform: none;
}

/* A defined term in a fact's name: plain, its meaning in the tooltip on hover or focus. */
.dfn {
  font-style: normal;
  cursor: help;
}

.dfn:focus-visible {
  outline-offset: 2px;
  border-radius: 3px;
}

/* While a run is in flight the banner stays under the top bar and the page brings a term just under it, so a term's
   meaning opens downwards, never over the banner's progress or Stop; a term Tab brings up from below keeps the room
   for it above the window's foot. */
html:has(.banner.busy) .dfn.tip::after {
  top: 100%;
  bottom: auto;
}

html:has(.banner.busy) .dfn {
  scroll-margin-bottom: 6em;
}

/* The copy key: the landing's command-box button. The glyph turns into a check for a moment once the text is on the
   clipboard; a refusal is said in the toast. */
.copy {
  display: inline-flex;
  align-items: center;
}

.copy-key {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-inner);
  background: transparent;
  color: var(--code-muted);
  cursor: pointer;
  transition:
    color var(--fast) ease,
    background-color var(--fast) ease;
}

.copy-key:hover,
.copy-key[data-copied="true"] {
  color: var(--code-ink);
}

.copy-key:hover {
  background: var(--code-hover);
}

.copy-key .icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--fast) ease,
    transform var(--normal) var(--ease-out);
}

.copy-key .icon-check,
.copy-key[data-copied="true"] .icon-copy {
  opacity: 0;
  transform: scale(0.6);
}

.copy-key[data-copied="true"] .icon-check {
  opacity: 1;
  transform: none;
}

/* The toast: an ink pill at the bottom right, only for what the clipboard refused. */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--text-14);
  font-weight: 500;
  line-height: 1.4;
}

.toast:empty {
  display: none;
}

/* A copy that worked is said to screen readers only: the check on the key shows it. */
.toast.quiet {
  position: absolute;
  right: auto;
  bottom: auto;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Under a coarse pointer (a finger) every control takes at least 44px by 44px (WCAG 2.5.5) and looks as it does under a
   mouse: a small key or segment reaches past its drawn edges through a transparent box around it, and a field, which
   has no box to lend, is drawn 44px tall. */
@media (pointer: coarse) {
  .button,
  .copy-key {
    position: relative;
  }

  .button::before,
  .copy-key::before,
  .segment::before {
    content: "";
    position: absolute;
    inset: min(0px, (100% - 44px) / 2);
  }

  .field-input,
  .select-input {
    min-height: 44px;
  }

  /* Wrapped segments keep their 44px reach apart. */
  .segmented-options {
    row-gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .segment,
  .field-input,
  .select .icon,
  .copy-key,
  .copy-key .icon {
    transition: none;
  }

  .button-primary:active:not(:disabled, [aria-disabled="true"]) {
    transform: none;
  }
}

@media (forced-colors: active) {
  .button,
  .field-input,
  .select-input,
  .tag,
  .copy-key {
    border: 1px solid ButtonText;
  }

  .button-primary {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .button[aria-disabled="true"],
  .button:disabled {
    color: GrayText;
  }

  /* A held or busy Run is drawn as text on the canvas, not as a faded fill. */
  .button-primary[aria-disabled="true"],
  .button-primary[aria-busy="true"] {
    opacity: 1;
    background: Canvas;
    color: GrayText;
    border-color: GrayText;
  }

  .toast,
  .skip-link {
    border: 1px solid CanvasText;
  }

  .segment.on {
    outline: 2px solid Highlight;
  }

  .tip::after {
    border: 1px solid CanvasText;
  }
}