/*
  apply.css: the application dialog on Careers (065/026; design package, section 15b; the owner's
  pick B). The dialog is the waitlist's: it carries .waitlist and reuses waitlist.css's classes
  for its frame, views, fields, errors, alert and buttons. This adds only what the waitlist
  lacks: the role eyebrow, the CV field (a 46px box over a visually hidden file input), the
  attached file, the upload's progress, the note's placeholder and the drop overlay. Linked by
  careers.html alone, after waitlist.css. Every rule is scoped to .apply, the dialog. Logical
  properties only, so it mirrors in RTL.
*/

.apply {
  --apply-drop-top: 0px; /* the overlay's place: apply.js sets both from the dialog's scroll */
  --apply-drop-h: 100%;
  --apply-progress: 0; /* the upload's progress, 0 to 1 (apply.js) */
}

/* The role over the title: Gold mono caps 11px. The title keeps clear of the close icon. */
.apply__head {
  display: grid;
  gap: 0.5rem;
  padding-inline-end: 2.5rem;
}
.apply__role {
  margin-block-end: 0;
  font-size: 0.6875rem;
}
/* A role's title stays English, in its caps, on every page. */
.apply__role [lang='en'] {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.apply__head .waitlist__title {
  padding-inline-end: 0;
}

.apply textarea::placeholder {
  color: var(--ash);
  opacity: 1;
}
/* An empty note (dir="auto") would be left to right: its placeholder reads in the page's
   direction until something is typed. */
.apply textarea:placeholder-shown {
  direction: inherit;
}

/* One column that never grows past the dialog: an `auto` track would widen to a long file
   name's full length (white-space: nowrap) and push the form out of the dialog. */
.apply .waitlist__view,
.apply .waitlist__form,
.apply .waitlist__field {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- The CV field ----------
   The real <input type="file"> stays in the tab order but out of sight; the box beside it shows
   its focus ring and its invalid (Gold) border. Empty, the box is a label for the input (a press
   anywhere opens the picker); attached, it holds the file and Remove. */
.apply__cv-wrap {
  position: relative;
}
.waitlist__field input.apply__file {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  min-block-size: 0;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.apply__cv {
  display: flex;
  align-items: center;
  min-block-size: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--night);
  transition: border-color var(--dur-1) var(--ease-out);
}
.apply__file:not([aria-invalid='true']) + .apply__cv:hover {
  border-color: var(--ivory);
}
.apply__file:focus-visible + .apply__cv {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.apply__file[aria-invalid='true'] + .apply__cv {
  border-color: var(--gold);
}

.apply__cv-empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  min-inline-size: 0;
  padding-inline: 0.875rem 0.4375rem;
  cursor: pointer;
}
.apply__prompt {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--ash);
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A touch screen has nothing to drag: there the field asks for the file. */
.apply__prompt--touch {
  display: none;
}
@media (hover: none) {
  .apply__prompt--drop {
    display: none;
  }
  .apply__prompt--touch {
    display: block;
  }
}
/* Choose file: a small Surface 3 pill, 30px tall, at the inline end. */
.apply__choose {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-block-size: 30px;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ivory);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out);
}
.apply__cv-empty:hover .apply__choose {
  background: color-mix(in srgb, var(--ivory) 10%, var(--surface-2));
}

/* Attached: a 20px Gold document, the name on one line, its size in Ash and Remove. */
.apply__cv-file {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-inline-size: 0;
  padding-inline-start: 0.75rem;
}
.apply__doc {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  color: var(--gold);
}
.apply__name {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--ivory);
  font-size: 0.9375rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apply__size {
  flex: none;
  color: var(--ash);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.apply__remove {
  flex: none;
  align-self: stretch;
  margin-inline-start: auto;
  padding-inline: 0.875rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--gold);
  font: 500 0.875rem / 1.2 var(--font-body);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.apply__remove:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}
.apply__remove:focus-visible {
  outline-offset: -2px;
}

/* The upload's progress: 3px of Gold under the box on a track of Ivory at 12%, filling from the
   inline start. It sits in the gap under the box, so nothing moves when it appears. */
.apply__progress {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  block-size: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ivory) 12%, transparent);
}
.apply__progress-bar {
  display: block;
  inline-size: calc(var(--apply-progress) * 100%);
  block-size: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: inline-size 0.2s linear;
}

/* The address on Sent, as typed. */
.apply__email {
  color: var(--ivory);
  overflow-wrap: anywhere;
}

/* ---------- The drop overlay ----------
   While a dragged item carries files over the dialog, this covers the part of it in view:
   Surface 1 at 94%, an inset 12px dashed Gold target (radius 18), a 36px Gold upload icon, the
   line and the hint. It takes no pointer of its own children, so leaving it is leaving the
   dialog. */
.apply__drop {
  position: absolute;
  inset-block-start: var(--apply-drop-top);
  inset-inline: 0;
  z-index: 1;
  display: grid;
  block-size: var(--apply-drop-h);
  padding: 12px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
}
.apply__drop-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1.5px dashed var(--gold);
  border-radius: 18px;
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  text-align: center;
  pointer-events: none;
}
.apply__drop-icon {
  inline-size: 36px;
  block-size: 36px;
  margin-block-end: 0.5rem;
  color: var(--gold);
}
.apply__drop-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--track-heading);
}
.apply__drop-hint {
  color: var(--ash);
  font-size: 0.875rem;
}