/* stylelint-disable */

/*
 * TAR job board: distinct department sections + boxed role rows.
 *
 * WHERE THIS GOES
 * Ashby admin -> Job Board settings -> Custom CSS. Upload this file; it
 * replaces the one currently sitting in that field.
 *
 * WHY EVERY RULE CARRIES !important
 * tar.com/careers renders the board in an iframe, and that iframe loads TWO
 * stylesheets, in this order:
 *   1. this file, from the Ashby upload field
 *   2. https://www.tar.com/ashby-board-theme.css, from the embed's customCssUrl
 * The tar.com file loads second, so on equal specificity it wins every tie.
 * Verified against the live embed: the previous version of this file asked for
 * 13px near-black headings and fully boxed rows, and the only two declarations
 * that actually reached the page were the two marked !important. Everything
 * here is forced for that reason, and for that reason only.
 *
 * An earlier note in this file claimed the Ashby upload field does not affect
 * tar.com at all. That was wrong. It does reach it, it just loses ties.
 *
 * DESIGN
 * Stays inside the existing theme's language rather than fighting it: Geist and
 * Geist Mono, the warm off-white ground (#faf9f7), zero border radius, mono
 * uppercase label voice. Only contrast and separation change.
 *
 * Values read off the live DOM, not guessed. The theme puts department headings
 * at 10px / #737373 and rows at padding 16px 0 with a single
 * rgba(23,23,23,0.075) hairline underneath, which is why the current page reads
 * as one undifferentiated list of 37 rows.
 */

/* ------------------------------------------------------------------ */
/* Department sections                                                  */
/* ------------------------------------------------------------------ */

/* The heading of a department, which can have many teams under it.
 *
 * The visible text lives in the nested `-level` span, which the theme styles
 * separately at 10px / #737373. Both selectors are needed or the child wins.
 *
 * Keeps the mono uppercase label voice. Size goes 10px -> 13px, weight 400 ->
 * 500 and the colour goes from mid-grey to near-black, which is what actually
 * makes the label read as a section break. Size alone did not carry it. */
.ashby-department-heading,
.ashby-department-heading-level {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #171717 !important;
}

/* Each section is opened by a full-width near-black rule and a wide gap above
 * it, so the eye lands on the break before it lands on the label. The theme's
 * 0.075-opacity hairline UNDER the heading comes off: with boxed rows below it
 * would sit a pixel above the first box and read as a doubled edge. */
.ashby-department-heading {
    margin-top: 64px !important;
    padding: 14px 0 16px !important;
    border: 0 !important;
    border-top: 1px solid #171717 !important;
}

/* DEPARTMENT vs TEAM
 *
 * Ashby puts both levels inside the SAME heading element. Verified on the live
 * board: a plain department section is one `-level` span ("Business"), and a
 * team section is two, department first ("Project Delivery", "Project
 * Management"). Ashby's own stylesheet gives the second span
 * `flex-basis: 100%`, so the team always drops onto its own line under a `>`
 * separator, and that separator is generated content on the first span.
 *
 * The block above sets every level to the department's weight, which is why
 * the two lines came out identical. The team is reached as the `-level` that
 * FOLLOWS another `-level`, and steps down one notch in size, weight and
 * colour, so the pair reads as a hierarchy rather than the same label twice.
 * The department is left untouched, so the sections without a team look exactly
 * as they did before this rule was added.
 *
 * The obvious selector for this is `:not(:first-child)`, and Ashby's upload
 * validator REJECTS it: "Invalid value in CSS file: first-child, only specified
 * classes and at-rules allowed". The adjacent sibling combinator does the same
 * job with no pseudo-class, so it passes. See the note at the bottom of this
 * file for what the validator does and does not accept. */
.ashby-department-heading-level + .ashby-department-heading-level {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #525252 !important;
}

/* The standalone variant: a `-level` element that is NOT inside a heading.
 * Ashby emits this for some groupings and none appear on the board today, so
 * this is a safety net, not a live rule. Space instead of a rule of its own. */
.ashby-department-heading-level:not(.ashby-department-heading *) {
    margin: 40px 0 12px !important;
}

/* ------------------------------------------------------------------ */
/* Role rows                                                            */
/* ------------------------------------------------------------------ */

/* The container of the job posting brief.
 *
 * Each role becomes its own closed box: white fill on the warm ground, a
 * visible border on all four sides, and an 8px gap so no two boxes share an
 * edge. That gap is what separates the roles from each other; the border is
 * what closes each one.
 *
 * `border-top` is repeated as a longhand on purpose. Ashby's own base
 * stylesheet pins border-top on this element with !important, and the
 * shorthand alone left the top edge missing. Verified, not defensive.
 *
 * #ddd9d3 is the border colour that survived testing on this ground. The first
 * attempt used rgba(23,23,23,0.12) and was below the noise floor of the warm
 * off-white. Do not go lighter than about #e4e0da here. */
.ashby-job-posting-brief {
    padding: 16px 18px !important;
    margin: 0 0 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #ddd9d3 !important;
    border-top: 1px solid #ddd9d3 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The whole box responds, not just one rule. The theme's hover only steps the
 * border to #d4d4d4, which is barely a change; a bordered box earns a hover
 * worth the border, so this goes to near-black. Fill stays white so the row
 * does not flash. */
.ashby-job-posting-brief:hover,
.ashby-job-posting-brief:active,
.ashby-job-posting-brief:focus-within {
    background-color: #ffffff !important;
    border-color: #171717 !important;
}

/* Keyboard focus keeps the theme's ink outline, offset so it clears the box
 * border instead of doubling it. */
.ashby-job-posting-brief:focus-visible {
    border-color: #171717 !important;
    outline: 1px solid #171717 !important;
    outline-offset: 3px !important;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                        */
/* ------------------------------------------------------------------ */

/* The theme's own mobile block sets `padding: 14px 0` on the row, which would
 * flatten the box's side padding under 640px. Same padding on all sides here,
 * slightly tighter, and the section gap comes in to match the shorter column. */
@media (max-width: 640px) {
    .ashby-job-posting-brief {
        padding: 14px !important;
    }

    .ashby-department-heading {
        margin-top: 48px !important;
        padding: 12px 0 14px !important;
    }
}

/* ------------------------------------------------------------------ */
/* Alternates                                                           */
/* ------------------------------------------------------------------ */

/* All four are one-line swaps. Everything above is the recommended set.
 *
 * 1. No white fill, boxes on the bare ground (subtler, border does all the
 *    work). Drop `background-color` from `.ashby-job-posting-brief` and from
 *    the hover block, or set both to `transparent !important`.
 *
 * 2. Boxes touching in one continuous grid instead of separated:
 *    .ashby-job-posting-brief { margin: 0 0 -1px !important; }
 *
 * 3. Wider gaps between roles, if 8px reads too tight:
 *    .ashby-job-posting-brief { margin: 0 0 12px !important; }
 *
 * 4. Rounded corners. The theme pins every radius to 0 site-wide, so this
 *    breaks the house language and is not recommended, but it is available:
 *    .ashby-job-posting-brief { border-radius: 6px !important; }
 *
 * 5. Section rule quieter than near-black, if it reads too heavy at the top of
 *    the list:
 *    .ashby-department-heading { border-top-color: #d4d0ca !important; }
 *
 * 6. Team louder than department instead of the other way round. Breadcrumbs
 *    are often built this way, with the parent quiet and the current section
 *    emphasised, and the team IS the real title of the section. Move the
 *    11px / 400 / #525252 values onto `.ashby-department-heading` itself and
 *    let the sibling rule keep the loud 13px / 500 / #171717 set at the top.
 *
 * 7. The `>` separator between department and team inherits the department's
 *    near-black, which makes a piece of punctuation as loud as the label it
 *    separates. This would quiet it, but it uses a pseudo-ELEMENT and pseudo-
 *    elements have not been tested against Ashby's upload validator. If it is
 *    rejected on upload, delete these two lines and re-upload:
 *
 *    .ashby-department-heading-level::after { color: #a3a3a3 !important; }
 */

/* ------------------------------------------------------------------ */
/* Ashby's upload validator                                             */
/* ------------------------------------------------------------------ */

/* The Custom CSS field validates the file and rejects selectors it does not
 * recognise: "only specified classes and at-rules allowed". Confirmed by
 * upload, not from documentation:
 *
 *   ACCEPTED   the documented .ashby-* classes
 *              :hover  :active  :focus-within  :focus-visible
 *              :not(<class>), including a descendant combinator inside it
 *              the descendant, child (>) and adjacent sibling (+) combinators
 *              @media
 *
 *   REJECTED   :first-child, and by implication the other structural
 *              pseudo-classes (:nth-child, :last-child, :only-child)
 *
 *   UNTESTED   pseudo-elements (::before, ::after), :has()
 *
 * So anything that depends on an element's POSITION among its siblings has to
 * be expressed with combinators instead. That is the only reason the team rule
 * above is written the way it is. */