/* Careers form presentation built from the pinned v0.6.0 tokens.
 * Control markup, accordion layout and calendar behavior are site-local:
 * the published package provides primitives and theme values, not form CSS. */
.car-form {
    --ds-ground: var(--tt-color-button-secondary-bg);
    --ds-field-line: var(--tt-color-border-interactive);
    --ds-group-line: var(--tt-color-border-primary);
    --ds-ink: var(--tt-color-text-primary);
    --ds-ink-2: var(--tt-color-text-secondary);
    --ds-ink-3: var(--tt-color-text-tertiary);
    --ds-ink-4: var(--tt-color-text-quaternary);
    --ds-accent: var(--tt-color-accent);
    --ds-hover: var(--tt-color-row-hover);
    --ds-open: var(--tt-color-surface-open);
    /* The layered menu shadow and teal step glass are local effects. */
    --ds-menu-lift: 0 2px 6px rgb(0 0 0 / 24%), 0 12px 32px rgb(0 0 0 / 40%), 0 0 0 1px rgb(255 255 255 / 10%);
}
.car-apply-row { padding-block: 48px 64px; }
main { z-index: 2; }   /* main and the footer both stand at 1 over the dot-field; here main goes above, so the form's open calendar, hanging past the row's end, is not drawn through by the footer's words */
.car-step-n {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tt-control-small); height: var(--tt-control-small); box-sizing: border-box;
    border-radius: var(--tt-radius-full); border: 1px solid rgb(255 255 255 / 14%);
    font-size: var(--text-mini-size); font-variant-numeric: tabular-nums;
}
.car-step-n svg { display: none; width: 14px; height: 14px; }
/* the disc centres on the title's line: half the line less half the disc */
.car-step-n { margin-top: calc((0.875rem * 1.6 - var(--tt-control-small)) / 2); }
.car-acc.is-current .car-step-n { border-color: transparent; background: rgb(46 88 90 / 82%); color: var(--tt-brand-white); }   /* the composer's teal glass */
.car-acc.is-done .car-step-n { border-color: color-mix(in srgb, var(--teal-400) 45%, transparent); color: var(--teal-400); }
.car-acc.is-done .car-step-n svg { display: block; }
.car-acc.is-done .car-step-n span { display: none; }

.car-panel { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.car-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the stepper names the step on screen */
.car-field { display: flex; flex-direction: column; gap: 8px; }
.car-field[hidden] { display: none; }
.car-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }   /* two fields side by side, the second (the date) shown once "On a date" is chosen */
.car-help { margin: 0; font-size: var(--text-micro-size); line-height: 1.5; color: var(--ds-ink-3); }
.car-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }   /* the native picker, opened by the Résumé row */

/* the group's label: the panel's group label */
.car-form .pg-form-label { font-size: var(--text-micro-size); line-height: 1.5; color: var(--ds-ink-2); }

/* TextField, plain (for a form): it does not grow */
.car-form .doc-search {
    display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: var(--tt-control-default); padding: 0 8px;
    border: 1px solid var(--ds-field-line); border-radius: var(--tt-radius-12); background: var(--ds-ground);
    transition: border-color 120ms ease;
}
.car-form .doc-search:hover { border-color: var(--ds-ink-4); }
.car-form .doc-search:focus-within { border-color: var(--tt-color-focus-ring); }
.car-form .doc-search-input {
    flex: 1; min-width: 0; height: 100%; padding: 1px 2px; border: 0; background: none; outline: none; color-scheme: dark;
    font-family: var(--font-family-sans); font-size: var(--text-small-size); line-height: 1.5; color: var(--ds-ink);
}
.car-form .doc-search-input::placeholder { color: var(--ds-ink-4); }
.car-form .doc-search-input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px var(--ds-ground); -webkit-text-fill-color: var(--ds-ink); transition: background-color 9999s ease-out; }

/* TextArea, in a form: the field's 16 corner */
.car-form .pg-form-text {
    display: block; box-sizing: border-box; width: 100%; min-height: 112px; padding: 12px;
    border: 1px solid var(--ds-field-line); border-radius: var(--tt-radius-16); background: var(--ds-ground);
    font-family: var(--font-family-sans); font-size: var(--text-small-size); line-height: 1.5; color: var(--ds-ink);
    resize: vertical; outline: none; transition: border-color 120ms ease;
}
.car-form .pg-form-text::placeholder { color: var(--ds-ink-4); }
.car-form .pg-form-text:hover { border-color: var(--ds-ink-4); }
.car-form .pg-form-text:focus { border-color: var(--ds-accent); }

/* PickerRow: a group of rows, the label at the left, the pick at the right */
.car-form .pg-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tt-control-default); padding: 2px 4px 2px 12px; }
.car-form .pg-form-row[hidden] { display: none; }
.car-form .pg-form-pick-wrap { position: relative; max-width: 60%; min-width: 0; }
.car-form .pg-form-pick {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: var(--tt-control-small); padding: 0 6px 0 12px;
    border: 0; border-radius: var(--tt-radius-12); background: none; cursor: pointer;
    font-family: var(--font-family-sans); font-size: var(--text-small-size); line-height: 20px; color: var(--ds-ink);
}
.car-form .pg-form-pick.is-empty { color: var(--ds-ink-3); }
.car-form .pg-form-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-form .pg-form-pick svg { width: 16px; height: 16px; flex: none; }
.car-form .pg-form-pick:hover, .car-form .pg-form-pick[aria-expanded="true"] { background: var(--ds-hover); color: var(--ds-ink); }
.car-form .pg-form-pick:focus-visible { outline: 1px solid var(--ds-ink-4); outline-offset: 1px; }
.car-form .doc-search.is-missing, .car-form .pg-form-text.is-missing { border-color: var(--citron-300); }

/* Select, as a field: one pick the width of the field, the menu under it at its width */
.car-form .pg-form-row.is-field { display: block; min-height: 0; padding: 0; }
.car-form .pg-form-row.is-field .pg-form-pick-wrap { width: 100%; max-width: none; }
.car-form .pg-form-row.is-field .pg-form-pick {
    display: flex; justify-content: space-between; width: 100%; height: var(--tt-control-default); padding: 0 8px 0 12px; box-sizing: border-box;
    border: 1px solid var(--ds-field-line); border-radius: var(--tt-radius-12); background: var(--ds-ground); transition: border-color 120ms ease;
}
.car-form .pg-form-row.is-field .pg-form-pick.is-empty { color: var(--ds-ink-4); }
.car-form .pg-form-row.is-field .pg-form-pick:hover, .car-form .pg-form-row.is-field .pg-form-pick[aria-expanded="true"] { background: var(--ds-ground); border-color: var(--ds-ink-4); }
.car-form .pg-form-row.is-field .pg-form-pick:focus-visible { outline: none; border-color: var(--ds-accent); }
.car-form .pg-form-row.is-field.is-missing .pg-form-pick { border-color: var(--citron-300); }
.car-form .pg-form-row.is-field .pg-form-menu { left: 0; right: 0; min-width: 0; }

/* The drop box: the résumé's field, taller, taking a PDF by press or by drop */
.car-form .pg-form-row.is-drop .pg-form-pick { height: 72px; justify-content: center; gap: 8px; }
.car-form .pg-form-row.is-drop .pg-form-pick.is-over { border-color: var(--ds-accent); background: var(--ds-hover); }
.car-form .pg-form-row.is-field .pg-form-menu.pg-cal { left: 0; right: auto; }

/* Menu, with RadioRows: hangs from the pick's right end */
.car-form .pg-form-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; display: flex; flex-direction: column; gap: 0;
    min-width: 168px; padding: 4px; box-sizing: border-box;
    border-radius: var(--tt-radius-16); background: var(--ds-ground); box-shadow: var(--ds-menu-lift);
}
.car-form .pg-form-menu[hidden] { display: none; }
.car-form .pg-form-menu > button {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: var(--tt-radius-12); background: none; cursor: pointer; text-align: left; white-space: nowrap;
    font-family: var(--font-family-sans); font-size: var(--text-mini-size); line-height: 1.5; color: var(--ds-ink-2);
}
.car-form .pg-form-menu > button:hover, .car-form .pg-form-menu > button:focus-visible { background: var(--ds-hover); outline: none; }
.car-form .pg-form-menu > button[aria-checked="true"] { background: var(--ds-open); color: var(--ds-ink); }

/* Calendar: the month as the date pick's menu */
.car-form .pg-form-menu.pg-cal { width: 284px; min-width: 0; padding: 8px; }
.car-form .pg-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 6px 8px; }
.car-form .pg-cal-month { font-size: var(--text-small-size); line-height: 1.5; font-weight: 510; color: var(--ds-ink); }
.car-form .pg-cal-nav { display: inline-flex; gap: 2px; }
.car-form .pg-cal-nav button { display: inline-flex; align-items: center; justify-content: center; width: var(--tt-control-small); height: var(--tt-control-small); padding: 0; border: 0; border-radius: var(--tt-radius-full); background: none; color: var(--ds-ink-2); cursor: pointer; }
.car-form .pg-cal-nav button:not(:disabled):hover { background: var(--ds-hover); color: var(--ds-ink); }
.car-form .pg-cal-nav button:disabled { color: var(--ds-ink-4); cursor: default; }
.car-form .pg-cal-nav svg { width: 16px; height: 16px; }
.car-form .pg-cal-days, .car-form .pg-cal-grid { display: grid; grid-template-columns: repeat(7, var(--tt-control-default)); gap: 2px; }
.car-form .pg-cal-week { display: contents; }
.car-form .pg-cal-days span { height: 24px; line-height: 24px; text-align: center; font-size: var(--text-micro-size); color: var(--ds-ink-3); }
.car-form .pg-cal-grid button { width: var(--tt-control-default); height: var(--tt-control-default); padding: 0; border: 0; border-radius: var(--tt-radius-full); background: none; cursor: pointer; font-family: var(--font-family-sans); font-size: var(--text-small-size); line-height: 20px; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.car-form .pg-cal-grid button.is-out { color: var(--ds-ink-3); }
.car-form .pg-cal-grid button[disabled] { color: var(--ds-ink-4); cursor: default; }
.car-form .pg-cal-grid button.is-today { box-shadow: inset 0 0 0 1px var(--ds-group-line); }
.car-form .pg-cal-grid button.is-on { background: var(--ds-open); color: var(--ds-ink); font-weight: 510; }
.car-form .pg-cal-grid button:not([disabled]):hover { background: var(--ds-hover); }

.car-form .car-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }   /* Status sits beside the step's action. */
.car-nav .button { cursor: pointer; }
.car-nav .button:disabled { opacity: 0.55; cursor: default; }
.car-form .car-nav .car-status { order: -1; margin: 0 auto 0 0; font-size: var(--text-small-size); line-height: 1.5; color: var(--citron-300); }
.car-sent { padding: 2rem 0; text-align: left; }
@media (width <= 940px) {
    .car-form .doc-search-input, .car-form .pg-form-text { font-size: 1rem; }   /* under 16px, iOS zooms the page on focus */
    /* that 16 text needs the large control's 44 to sit in, and 44 is the
       touch size; the default 36 is for a pointer and 14 text */
    .car-form .doc-search { height: var(--tt-control-large); padding-inline: 12px; }
    .car-form .pg-form-row.is-field .pg-form-pick { height: var(--tt-control-large); padding-inline: 16px 12px; font-size: 1rem; }
    .car-form .pg-form-menu > button { padding-block: 12px; font-size: var(--text-small-size); }
    /* the step's button stands at the fields' 44: the large control token */
    .car-form .car-nav .button { height: var(--tt-control-large); padding-inline: 20px; font-size: 1rem; }
}
@media (width <= 700px) {
    .car-apply-row { padding: 40px 1rem; }   /* the site's 16 off the rails, not the row's 8 */
    .car-pair { grid-template-columns: minmax(0, 1fr); }   /* the pair stacks on a phone */
}
/* The steps as an accordion (Ivan, 2026-10-06): one column, each step a
   section under a header that is its own place in the sequence. The open
   step's fields unfold under its header; a finished step folds to a line of
   what was given, and its header opens it again; a step not reached waits,
   closed. The unfolding is the grid-rows ease (0fr to 1fr), so the height is
   the content's own and nothing is measured. */
.car-apply { max-width: 640px; margin: 2.5rem auto 0; text-align: left; }
.car-acc + .car-acc { box-shadow: inset 0 1px 0 0 var(--ds-group-line); }
.car-acc-h { margin: 0; font: inherit; }
.car-acc-head {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 18px 0; box-sizing: border-box;
    border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-tertiary);
    font-family: var(--font-family-sans); letter-spacing: inherit;   /* a button does not inherit the page's tracking */
}
.car-acc-head:disabled { cursor: default; }
.car-acc-head:focus-visible { outline: var(--tt-focus-ring-width) solid var(--tt-color-focus-ring); outline-offset: var(--tt-focus-ring-offset); border-radius: var(--tt-radius-12); }
/* a step's title and line are the cards': the heading at 14 and the medium
   weight on its 1.6 line, the line at 14 in the muted grey, 8 between them
   (.engine-card h3 and p) */
.car-acc-text { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; letter-spacing: inherit; }
.car-acc-name { font-size: 0.875rem; line-height: 1.6; font-weight: var(--font-weight-medium); }
.car-acc-sum { font-size: 0.875rem; line-height: var(--text-small-line-height); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-acc-edit { align-self: center; font-size: var(--text-mini-size); color: var(--teal-400); visibility: hidden; }
.car-acc.is-current .car-acc-name, .car-acc.is-done .car-acc-name { color: var(--text-primary); }
.car-acc.is-done:not(.is-open):not(.is-sent) .car-acc-edit { visibility: visible; }
@media (any-hover: hover) { .car-acc.is-done:not(.is-open) .car-acc-head:hover .car-acc-edit { text-decoration: underline; text-underline-offset: 3px; } }
.car-acc-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 360ms cubic-bezier(.2, .7, .2, 1), opacity 240ms ease; }
.car-acc.is-open > .car-acc-body { grid-template-rows: 1fr; opacity: 1; }
.car-acc-inner { min-height: 0; overflow: hidden; }
.car-acc-body.is-settled > .car-acc-inner { overflow: visible; }   /* once open, a menu or the calendar may hang past the step */
.car-acc-inner > .car-panel { padding: 2px 0 0 40px; }   /* under the title: the disc's 28 and the 12 beside it */
.car-acc-inner > .car-nav { padding: 24px 0 28px 40px; }
@media (prefers-reduced-motion: reduce) { .car-acc-body { transition: none; } }
@media (width <= 700px) {
    .car-acc-inner > .car-panel { padding-left: 0; }
    .car-acc-inner > .car-nav { padding-left: 0; }
}