/*
 * Form controls that the browser draws differently on every platform.
 *
 * Right now that is one control: <select>. Chrome, Safari and Firefox each paint their
 * own dropdown arrow, at their own size, hard against the right border - which on the
 * papers filter left the caret touching the edge of the field while the label had room
 * to spare, and means the same page looks like three products depending on who opens it.
 *
 * So the native arrow is turned off once, here, and replaced by one drawn from tokens:
 * every <select> in the product gets the same caret, the same gap from the border, and
 * enough reserved space that the longest option can never run underneath it. Both base
 * templates load this file, which is what makes "every dropdown" true rather than a
 * thing each page remembers to do.
 *
 * Two decisions worth knowing about:
 *
 * 1. The caret is two diagonal gradients, not an SVG. A data-URI SVG has to spell its
 *    colour out, and a colour written outside tokens.css is what StyleTokenTest bans;
 *    a gradient reads var(--color-ink-faint) like any other rule, so the arrow follows
 *    the palette instead of pinning a grey of its own.
 *
 * 2. `!important`, deliberately, on exactly the declarations that make up the caret.
 *    A select's own look comes from a class - `.field-control`, `.papers-sort`,
 *    `.data-table td .field-control`, `.docs-search .field-control` - and every one of
 *    those sets `background` or `padding` as a SHORTHAND, which resets the image and
 *    the reserved space no matter what order the stylesheets load in. The alternatives
 *    were restating the caret inside each of those rules (four copies, and a fifth the
 *    day someone adds a control class) or listing their selectors here (the same list,
 *    inverted). One authoritative rule is the honest version of what this file is for.
 *    Everything else about a select - its border, height, font, colours - is still the
 *    page's business.
 */
:root {
  /* Gap between the caret and the field's right border. */
  --control-caret-inset: 12px;
  /* Drawn size of the caret: 8px wide, 5px tall, built from two 4px halves - close to
     the size Chrome's own arrow reads at, so nothing looks shrunken next to a native
     control on the same page. */
  --control-caret-width: 8px;
  --control-caret-height: 5px;
  /* Reserved on the right so the longest option cannot slide under the caret: the
     inset, the caret, and a text gap the same size as the inset. */
  --control-caret-space: 32px;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-ink-faint) 50%),
    linear-gradient(135deg, var(--color-ink-faint) 50%, transparent 50%) !important;
  background-position:
    right calc(var(--control-caret-inset) + var(--control-caret-width) / 2) center,
    right var(--control-caret-inset) center !important;
  background-size: calc(var(--control-caret-width) / 2) var(--control-caret-height) !important;
  background-repeat: no-repeat !important;
  padding-inline-end: var(--control-caret-space) !important;
}

/* A select is a control, not a text field: the pointer says so on every page. */
select:not([disabled]) {
  cursor: pointer;
}

/* Interactive chrome: buttons, links, and role=button (bell, menus, plan cards). */
button:not(:disabled),
a[href],
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

/* Hover, the same one the pager buttons use: the field answers the mouse before it is
   clicked, which is how the rest of this product behaves. */
select:hover:not([disabled], :focus-visible),
input:hover:not([disabled], :focus-visible),
textarea:hover:not([disabled], :focus-visible) {
  border-color: var(--color-border-hover);
}

/*
 * Focus, and the black rectangle that is not ours.
 *
 * Chrome draws its own focus ring around an open select - a square 2px black box that
 * belongs to no design in this product and is the last obviously-browser-shaped thing
 * left on the control. Replaced, not deleted: a control with no visible focus is
 * unusable by keyboard, and that is a real customer, not a checkbox on an audit.
 *
 * The split matters. `:focus` covers the pointer case - a click that opens the list
 * needs no ring, because the open list IS the feedback - and `:focus-visible` covers
 * the keyboard case, where the ring is the only thing saying where Tab landed.
 *
 * The colour is the product's own "this one is selected", not a new one: it is the
 * charcoal the pagination uses for the current page (--color-ink-charcoal, aliased
 * here as --color-focus-line). Brand green was tried and rejected - green already
 * means "generate" and "active plan" in this product, and a green field reads as a
 * state rather than as focus.
 */
select:focus {
  outline: none;
}

select:focus-visible {
  outline: none;
  border-color: var(--color-focus-line);
  /* A soft neutral ring rather than a second hard line: at 38px tall a hard 2px ring
     plus the field's own border reads as a double border. It is also what carries the
     indicator - a 1px border change alone is too quiet to find with the keyboard. */
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Windows high contrast throws colours away, box-shadow included, so the ring has to
   come back as an outline there or keyboard focus disappears entirely. */
@media (forced-colors: active) {
  select:focus-visible {
    outline: 2px solid;
    outline-offset: 1px;
  }
}

/*
 * The same treatment for text fields, for the same reason.
 *
 * Chrome's ring on a focused input is the same black rectangle, and it was still
 * showing on the papers search box: a 2px square box drawn around a 10px-radius pill.
 * Each family of fields already changes its border on focus in its own colour (black
 * in auth, slate in the admin panel, brand green in the writer sidebar) - that stays,
 * because it is those pages' design. What is added here is the part none of them had:
 * the UA ring goes away and one halo, the same everywhere, says "this field has the
 * keyboard".
 *
 * `:focus-visible`, not `:focus`, so clicking into a search box does not light up -
 * the caret already says where typing goes.
 */
input:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus-line);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/*
 * A field that is showing an error keeps its own colour in the halo too. These two
 * class names are the product's error markers (auth forms and the settings field), and
 * naming them here is the price of not making every page restate the halo.
 */
.auth-input--error:focus-visible,
.input-field--error .input-field__input:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-pale);
}

/* Buttons and links: an outline rather than a halo, because a button's own background
   can be any colour - a ring inside the edge of a filled green button is not seen. */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-focus-line);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid;
    outline-offset: 1px;
  }
}

/*
 * The option list is drawn by the operating system: padding, radius and the highlight
 * colour are not ours to set, and every trick that claims otherwise breaks keyboard
 * behaviour or mobile. What CAN be set is the palette it paints with, so the list at
 * least belongs to the same product as the field above it.
 */
select option {
  background-color: var(--color-surface);
  color: var(--color-ink);
}

/*
 * Tabs: one page, two jobs that are read at very different rates.
 *
 * Here rather than in a page stylesheet because the next screen that needs them must
 * not invent a second look - that is the same reason <select> lives in this file. Both
 * base templates load it, so `.tabs` is available everywhere without an import.
 *
 * The selected state is read from `aria-selected`, not from a class of our own. One
 * source of truth: a tab that looks selected but does not say so to a screen reader is
 * the bug this avoids, and markup that forgets the attribute stays visibly unstyled
 * rather than quietly inaccessible.
 *
 * Underline, not a segmented pill. A pill is what `.alerts-seg` uses for a VALUE you
 * are choosing inside a form; tabs move you between views. Two controls that look the
 * same and do different things is the confusion worth spending a border on.
 */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  /* The rail scrolls on a narrow screen instead of wrapping into two rows, which
     would move the content under it every time a label grew. */
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs > button {
  padding: 9px 14px;
  border: 0;
  /* Reserves the underline's space in the resting state, so selecting a tab moves
     nothing on the page. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--color-ink-faint);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}

.tabs > button:hover {
  color: var(--color-ink);
}

.tabs > button[aria-selected="true"] {
  border-bottom-color: var(--color-brand);
  color: var(--color-ink);
  cursor: default;
}

/* Keyboard only: a mouse user who has just clicked a tab does not need a ring around
   the thing they are looking at, and a keyboard user cannot afford to lose it. */
.tabs > button:focus-visible {
  border-radius: 6px 6px 0 0;
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}