/* ============================================================================
   apply.css -- the shared design system for the Apply (job applicant) front end
   ============================================================================

   WHY A LINKED STYLESHEET

   Utils.loadPage() replaces document.body's content on every navigation, so a
   <style> block written inside a screen fragment dies with that screen and can
   never be shared.  This file is linked once from index.html and therefore
   survives every navigation.  It is the ONLY place applicant-screen styling
   belongs; a screen fragment should contain markup and nothing else.

   Popups (Utils.showMessage / Utils.yesNo -> .kiss-msg-modal-*, and <popup>
   tags -> .kiss-popup-*) are appended straight to document.body, OUTSIDE the
   screen fragment.  Their rules are therefore deliberately NOT scoped under
   .apply-screen -- see section 8.

   A <popup> tag must also be written OUTSIDE the .apply-screen div in the
   screen's markup, as a sibling of it.  Utils.popup_open copies the tag's height
   onto .kiss-popup-body as a plain inline height, which is a CONTENT-box height;
   inside .apply-screen the `.apply-screen *` border-box rule would apply to it
   and the body would come out short by its own padding, clipping the popup's
   last control.

   HOW TO CONVERT A SCREEN

   Every screen is the same shell.  Copy this, fill in the middle, delete the
   screen's old <style> block and its .local-grid / .field-width / .add-space /
   .row-spacing / inline width= / "position: relative; top: -Npx" markup:

       <div class="apply-screen">
           <div class="apply-card">
               <div class="apply-brand"><img id="company-logo" alt=""></div>
               <div class="apply-body">
                   <h1 class="apply-title">Screen title</h1>
                   <p class="apply-lede">One sentence of context.</p>
                   ... fields / prose / choices ...
                   <div class="apply-actions">
                       <push-button id="save" class="apply-primary">Save</push-button>
                       <push-button id="cancel">Cancel</push-button>
                   </div>
               </div>
               <p class="apply-footer">Powered by <a href="https://stack360.biz">STACK360</a></p>
           </div>
       </div>

   and make Framework.applyBranding() the first line of the screen's JS.  It
   fills in #company-logo's src and alt from GlobalData; the logo's size comes
   entirely from .apply-brand, so a screen never sets one.  There is no company
   name heading any more: the logo carries the brand.

   KISS TAGS BECOME PLAIN ELEMENTS

   Kiss custom tags are replaced by real elements at rescan time, so CSS has to
   target the RESULT, not the tag:

       text-input        -> input[type=text] (or [type=password] with `password`)
       numeric-input     -> input[type=text]
       textbox-input     -> textarea
       native-date-input -> input[type=date]
       drop-down         -> select
       list-box          -> select[size]
       push-button       -> input[type=button]
       text-label        -> span (or label, when the tag carries `for`)
       file-upload       -> input[type=file]
       check-box         -> <div><input type=checkbox><label></label></div>
       radio-button      -> <div id="X--div"><input type=radio><label></label></div>

   `class` on the tag PASSES THROUGH to the generated element for text-input,
   numeric-input, textbox-input, native-date-input, drop-down, list-box,
   push-button, text-label and file-upload -- so write
   `<push-button id="save" class="apply-primary">` directly, no wrapper div.
   check-box and radio-button are the exceptions: they put `class` on their
   generated WRAPPER div, not on the input.  See section 4 for the two attribute
   rules those two components need.

   Global element rules this file has to out-specify (do not add !important;
   the selectors below already win on specificity):
       kiss/starter-theme.css  input[type=text|password|number|date] { height: 20px }
       normalize2.css          input[type=button] { padding; border; font-size: 13.3333px }
       normalize2.css          select { padding: 0; font-size: small }
       normalize2.css          input[type=checkbox] { margin-top: 7px }
       index.html              label { margin-top: 3px }

   NEVER put width: 100% on a Kiss control (see Apply/AI/KnowledgeBase.md,
   "Input Control Styling").  Equal widths come from stretch flex columns --
   that is exactly what .apply-field, .apply-listbox and .apply-actions are.
   The only CONTROL this file gives a width to at all is a raw <button> in a
   check row (section 6), which is not a Kiss control.  (Layout divs such as
   .apply-card do carry width: 100%; the rule is about controls.)

   BROWSER AND COMPONENT FACTS THIS FILE WORKS AROUND

     Chrome ignores accent-color on a DISABLED checkbox and paints it its own
     grey, so a read-only "done" tick would read as "unavailable".  Every
     disabled tick this front end shows is therefore drawn here with
     -webkit-appearance: none plus a background image -- sections 4 and 6.

     Chrome likewise paints a disabled control's text with its own faint colour
     and ignores `color`, so a read-only value reads as an unfilled placeholder.
     -webkit-text-fill-color is the one declaration it honours -- section 3.

     textbox-input writes "resize: none" inline on its textarea, which beats any
     rule here, so a textarea's usable size is set by min-height (and by
     .apply-field--tall), not by the applicant dragging it -- section 3.

   ---------------------------------------------------------------------------
   CLASS INVENTORY
   ---------------------------------------------------------------------------
   Shell
     .apply-screen        full-viewport gradient backdrop; wraps the whole screen
     .apply-landing       modifier on .apply-screen: vertically centered (landing page only)
     .apply-card          the white rounded card
     .apply-brand         logo band at the top of the card
     .apply-brand--lg     modifier: the landing page's larger logo band
     .apply-body          the card's padded content area
     .apply-title         h1 screen title
     .apply-lede          intro paragraph under the title
     .apply-note          grey rounded info box
     .apply-note--success modifier on .apply-note: green finished-state box
     .apply-steps         numbered step list (ul); li holds .apply-step-num + .apply-step-text
     .apply-step-num      the round number badge
     .apply-step-text     the step's text; a <strong> inside becomes its heading line
     .apply-footer        "Powered by STACK360" line; last child of .apply-card

   Forms
     .apply-field         one label + one control, stacked; the control stretches
     .apply-field--short  caps the field at 180px (dates, GPA)
     .apply-field--tall   the field's textarea gets 200px instead of 120px
     .apply-field--sm     inside .apply-row: fixed 130px (zip)
     .apply-field--xs     inside .apply-row: fixed 84px (state)
                          --sm and --xs are sized by .apply-row's CHILD rule, so both
                          are inert on a field that is not inside an .apply-row
     .apply-label         the field's label (a bare <label> in .apply-field gets this look free)
     .apply-help          small muted helper text under a control
     .apply-row           side-by-side fields (City / State / Zip)
     .apply-listbox       stretch wrapper for a list-box

   Choices
     .apply-choice        one check-box or radio-button on its own row
     .apply-choice-row    an inline group of radio-buttons (Yes / No)
     .apply-choice-group  a question + its .apply-choice-row, with a .apply-label legend

   Buttons
     .apply-actions       the button stack at the bottom of a screen (children stretch)
     .apply-actions--row  modifier: side-by-side equal-width buttons (Add / Edit / Delete)
     .apply-primary       modifier on a button: the solid ember primary action
     .apply-danger        modifier on a button: muted red outline (Delete / Decline)
                          (a bare <a> inside .apply-actions gets the quiet button look too)

   Checklist
     .apply-check-row          a status checkbox + a full-width section button
                               (the button is a push-button, or a raw <button>
                               when it has to hold two lines of text)
     .apply-check-row--spacer  modifier: reserves the checkbox's width when there is none
     .apply-section-name       first line inside a two-line check-row button
     .apply-status             second line: that section's state
     .apply-status--ok         modifier: green, "done"
     .apply-status--todo       modifier: ember, "still to do"

   Prose
     .apply-prose         long static or server-supplied HTML
     .apply-prose--boxed  modifier: panel background, padding, capped height, scrolls
                          (a .apply-choice directly after a .apply-prose gets a
                          gap so the two never touch)

   Popups (unscoped -- they live outside .apply-screen)
     .kiss-msg-modal-*    Utils.showMessage / Utils.yesNo
     .kiss-popup-*        <popup> tags opened with Utils.popup_open
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1.  TOKENS
   --------------------------------------------------------------------------- */

:root {
    --sky: #bfe3f5;
    --sky-deep: #9bd2ec;
    --ink: #17181a;
    --gold: #f2b705;
    --gold-deep: #d99f00;
    --ember: #e05a2b;
    --ember-deep: #c9491e;
    --white: #ffffff;
    --text-muted: #46484c;
    --line: #d7dbde;
    --panel: #f4f7f8;
    /* "Done" green.  --success is the status-line colour (AA on white);
       --success-ink / --success-panel are the darker text and tinted background
       of a finished-state note, which needs AA against its own panel. */
    --success: #1c7a3e;
    --success-ink: #14532d;
    --success-panel: #e4f4e9;
    --radius-card: 18px;
    --radius-ctl: 10px;
    --shadow: 0 20px 50px rgba(15, 30, 40, .18);
}


/* ---------------------------------------------------------------------------
   2.  SCREEN SHELL
   --------------------------------------------------------------------------- */

.apply-screen {
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    /* Top-aligned: the inner screens are taller than the viewport.  The landing
       page is short and centers itself -- see .apply-landing. */
    align-items: flex-start;
    padding: 24px;
    background: linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 100%);
    color: var(--ink);
    font-family: inherit;
}

.apply-screen * {
    box-sizing: border-box;
}

.apply-landing {
    align-items: center;
}

.apply-card {
    width: 100%;
    max-width: 460px;
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/*
   The logo is the only brand-specific thing on any screen, and its natural
   proportions vary widely from brand to brand (roughly square through very
   wide).  Capping BOTH axes and letting the other one follow keeps any of them
   undistorted and inside the card; min() also keeps a wide logo inside the band
   on a narrow phone.
 */
.apply-brand {
    background: linear-gradient(180deg, #ffffff 0%, #fafcfd 100%);
    padding: 16px 28px 8px;
    text-align: center;
}

.apply-brand img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: min(240px, 100%);
    max-height: 72px;
}

/* The landing page gives the logo top billing; every other screen keeps it small. */
.apply-brand--lg {
    padding: 22px 28px 8px;
}

.apply-brand--lg img {
    max-width: min(320px, 100%);
    max-height: 170px;
}

.apply-body {
    padding: 24px 28px 18px;
}

.apply-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

/* A screen with no lede still needs air between its title and the first block
   of content; the lede supplies that gap when there is one. */
.apply-title + :not(.apply-lede) {
    margin-top: 18px;
}

.apply-lede {
    margin: 0 0 22px;
    max-width: 42ch;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
}

.apply-note {
    margin: 0 0 24px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--panel);
    border-radius: var(--radius-ctl);
}

/* A finished-state .apply-note:  the offer has already been accepted. */
.apply-screen .apply-note--success {
    color: var(--success-ink);
    background: var(--success-panel);
    font-weight: 600;
}

.apply-steps {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.apply-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.apply-step-num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sky);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apply-step-text {
    font-size: 14.5px;
    line-height: 1.45;
    padding-top: 2px;
}

.apply-step-text strong {
    display: block;
    font-size: 15px;
    margin-bottom: 1px;
}

.apply-footer {
    margin: 0;
    padding: 0 28px 28px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.apply-footer a {
    color: var(--ember);
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 400px) {
    .apply-body      { padding: 24px 20px 18px; }
    .apply-brand     { padding: 14px 20px 8px; }
    .apply-brand--lg { padding: 22px 20px 18px; }
    .apply-footer    { padding: 0 20px 22px; }
    .apply-title     { font-size: 20px; }
}


/* ---------------------------------------------------------------------------
   3.  FORMS
   --------------------------------------------------------------------------- */

/*
   A stretch flex column.  The generated input is a flex item, so it fills the
   field's content box at every breakpoint without a width rule -- which is the
   whole point, since width: 100% is not allowed on Kiss controls.

       <div class="apply-field">
           <label for="lname">Last name</label>
           <text-input id="lname" maxlength="30" fixcap required></text-input>
       </div>

   Add --short for a control that looks silly at full width (a date, a GPA), or
   --tall for a textarea that expects a paragraph:

       <div class="apply-field apply-field--tall">
           <label for="duties">Duties</label>
           <textbox-input id="duties" maxlength="4000"></textbox-input>
       </div>
 */
.apply-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;
}

.apply-label,
.apply-field > label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.apply-help {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Short fields: dates, GPA -- anything that looks silly at full width. */
.apply-field--short {
    max-width: 180px;
}

/*
       <div class="apply-row">
           <div class="apply-field">           <!-- City, takes the slack -->
           <div class="apply-field apply-field--xs">   <!-- State -->
           <div class="apply-field apply-field--sm">   <!-- Zip -->
       </div>
 */
.apply-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 12px;
    margin-bottom: 16px;
}

/* 160px is the flex basis, not a width:  three fields sit on one line on a wide
   card and the flexible one drops to its own line on a narrow phone rather than
   squeezing down to nothing. */
.apply-row > .apply-field {
    flex: 1 1 160px;
    min-width: 0;
    margin-bottom: 0;
}

.apply-row > .apply-field--xs { flex: 0 0 84px; }
.apply-row > .apply-field--sm { flex: 0 0 130px; }

/* On a phone there is no room for City, State and Zip side by side, so the
   flexible field takes the whole line and the two short fixed ones pair up
   underneath it. */
@media (max-width: 480px) {
    .apply-row > .apply-field:not(.apply-field--xs):not(.apply-field--sm) {
        flex-basis: 100%;
    }
}

.apply-listbox {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;
}

/* ---- controls ---- */

.apply-screen input[type=text],
.apply-screen input[type=password],
.apply-screen input[type=email],
.apply-screen input[type=number],
.apply-screen input[type=date],
.apply-screen input[type=file],
.apply-screen select,
.apply-screen textarea,
.kiss-popup-body input[type=text],
.kiss-popup-body input[type=password],
.kiss-popup-body input[type=email],
.kiss-popup-body input[type=number],
.kiss-popup-body input[type=date],
.kiss-popup-body input[type=file],
.kiss-popup-body select,
.kiss-popup-body textarea {
    box-sizing: border-box;
    min-width: 0;
    height: auto;
    padding: 13px 14px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.2;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-ctl);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.apply-screen input[type=text]:focus,
.apply-screen input[type=password]:focus,
.apply-screen input[type=email]:focus,
.apply-screen input[type=number]:focus,
.apply-screen input[type=date]:focus,
.apply-screen select:focus,
.apply-screen textarea:focus,
.kiss-popup-body input[type=text]:focus,
.kiss-popup-body input[type=password]:focus,
.kiss-popup-body input[type=email]:focus,
.kiss-popup-body input[type=number]:focus,
.kiss-popup-body input[type=date]:focus,
.kiss-popup-body select:focus,
.kiss-popup-body textarea:focus {
    border-color: var(--ember);
    box-shadow: 0 0 0 3px rgba(224, 90, 43, .15);
}

/* Spelled out by type rather than a bare `input:disabled` so this never reaches
   a disabled button, check-box or radio -- those have their own disabled looks. */
.apply-screen input[type=text]:disabled,
.apply-screen input[type=password]:disabled,
.apply-screen input[type=email]:disabled,
.apply-screen input[type=number]:disabled,
.apply-screen input[type=date]:disabled,
.apply-screen input[type=file]:disabled,
.apply-screen select:disabled,
.apply-screen textarea:disabled,
.kiss-popup-body input[type=text]:disabled,
.kiss-popup-body input[type=password]:disabled,
.kiss-popup-body input[type=email]:disabled,
.kiss-popup-body input[type=number]:disabled,
.kiss-popup-body input[type=date]:disabled,
.kiss-popup-body input[type=file]:disabled,
.kiss-popup-body select:disabled,
.kiss-popup-body textarea:disabled {
    background: var(--panel);
    color: var(--text-muted);
}

/*
   Chrome paints a disabled control's text with its own faint colour and ignores
   the `color` set above, so a read-only value (a signed agreement's name and
   date) reads as an unfilled placeholder.  -webkit-text-fill-color is the one
   declaration it honours.  input[type=file] is left out: its text is the file
   name the browser draws beside the picker button, not a value the applicant
   entered.
 */
.apply-screen input[type=text]:disabled,
.apply-screen input[type=password]:disabled,
.apply-screen input[type=email]:disabled,
.apply-screen input[type=number]:disabled,
.apply-screen input[type=date]:disabled,
.apply-screen select:disabled,
.apply-screen textarea:disabled,
.kiss-popup-body input[type=text]:disabled,
.kiss-popup-body input[type=password]:disabled,
.kiss-popup-body input[type=email]:disabled,
.kiss-popup-body input[type=number]:disabled,
.kiss-popup-body input[type=date]:disabled,
.kiss-popup-body select:disabled,
.kiss-popup-body textarea:disabled {
    opacity: 1;
    -webkit-text-fill-color: var(--text-muted);
}

/* drop-down: native arrow replaced so the control matches the text inputs. */
.apply-screen select,
.kiss-popup-body select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2346484c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* list-box: a real list, not a collapsed dropdown -- no chevron, room to scroll. */
.apply-screen select[size],
.apply-screen select[multiple],
.kiss-popup-body select[size],
.kiss-popup-body select[multiple] {
    padding: 6px;
    min-height: 220px;
    background-image: none;
}

.apply-screen select[size] option,
.apply-screen select[multiple] option,
.kiss-popup-body select[size] option,
.kiss-popup-body select[multiple] option {
    padding: 10px 12px;
    border-radius: 6px;
}

/*
   textbox-input writes "resize: none" inline on the textarea it generates, and
   an inline style beats the rule below, so the applicant cannot in fact drag the
   box larger.  A textarea's usable size therefore has to be decided here rather
   than by the applicant:  min-height is the whole of it, and a textarea that
   expects a paragraph gets .apply-field--tall on its field instead.
 */
.apply-screen textarea,
.kiss-popup-body textarea {
    min-height: 120px;
    resize: vertical;
}

.apply-screen .apply-field--tall textarea {
    min-height: 200px;
}

/* ---- file inputs ---- */

/*
   file-upload generates a plain <input type=file>.  The control block above
   already gives it the same border, radius and focus ring as every other
   control; these rules trim its padding back so the row still lands near 48px
   tall and draw the browser's own picker button in the quiet push-button style.
   They must stay AFTER that block -- same specificity, so order decides.
 */
.kiss-popup-body input[type=file] {
    padding: 7px 8px;
    font-size: 14px;
}

.kiss-popup-body input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    color: var(--ember);
    background: var(--white);
    border: 1.5px solid var(--ember);
    border-radius: 8px;
    cursor: pointer;
}

.kiss-popup-body input[type=file]::file-selector-button:hover {
    background: var(--panel);
}

@media (prefers-reduced-motion: reduce) {
    .apply-screen input,
    .apply-screen select,
    .apply-screen textarea { transition: none; }
}


/* ---------------------------------------------------------------------------
   4.  CHOICES  (check-box / radio-button)
   --------------------------------------------------------------------------- */

/*
   Both components hard-code inline styles on the elements they generate, and an
   inline style beats any rule here.  Two attribute rules neutralize them:

     check-box     write style="display: inline-flex;" on the tag.  With NO style
                   attribute the component emits "margin-left: 8px; display:
                   inline-flex;" and the row is indented 8px out of line with
                   every other control; naming display explicitly suppresses the
                   margin (the component only adds it when style is absent).

     radio-button  write button-style="margin: 0 8px 0 0;" on the tag, which
                   replaces the component's default "margin-left: 8px" on the
                   radio itself.  A radio whose label is long enough to wrap also
                   needs style="display: flex;" so the label hangs beside the
                   button instead of wrapping underneath it (the component
                   prepends "display: inline-block;", and the later declaration
                   in the same inline style wins).

   A short Yes/No pair (one line each) goes in a .apply-choice-row; anything with
   a label that can wrap gets one .apply-choice per option.

       <div class="apply-choice">
           <check-box id="agree" style="display: inline-flex;">I agree to ...</check-box>
       </div>

       <div class="apply-choice-group">
           <span class="apply-label">May we email you?</span>
           <div class="apply-choice-row">
               <radio-button group="email-auth" value="Y" button-style="margin: 0 8px 0 0;">Yes</radio-button>
               <radio-button group="email-auth" value="N" button-style="margin: 0 8px 0 0;" checked>No</radio-button>
           </div>
       </div>

       <span class="apply-label">Race &amp; ethnicity</span>
       <div class="apply-choice">
           <radio-button group="race" value="..." style="display: flex;"
                         button-style="margin: 2px 10px 0 0;">Native Hawaiian or Other Pacific Islander (not Hispanic or Latino)</radio-button>
       </div>
 */
.apply-choice {
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.4;
}

/* align-items is not set inline by the components, so this rule wins: a long
   label wraps with a hanging indent instead of running under the box. */
.apply-choice > div {
    align-items: flex-start;
}

.apply-choice-group {
    margin-bottom: 16px;
}

.apply-choice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    font-size: 15px;
}

.apply-choice input[type=checkbox],
.apply-choice input[type=radio],
.apply-choice-row input[type=checkbox],
.apply-choice-row input[type=radio] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    accent-color: var(--ember);
    cursor: pointer;
}

.apply-choice label,
.apply-choice-row label {
    margin-top: 0;
    line-height: 1.4;
    cursor: pointer;
}

/*
   Same problem as the checklist ticks in section 6:  Chrome ignores accent-color
   on a disabled checkbox and paints it grey, so an accepted agreement's box reads
   as "unavailable" rather than "you agreed".  Drawn here instead.
 */
.apply-screen .apply-choice input[type=checkbox]:disabled {
    -webkit-appearance: none;
    appearance: none;
    opacity: 1;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 6px;
    cursor: default;
}

.apply-screen .apply-choice input[type=checkbox]:disabled:checked {
    background: var(--ember) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 5.2 4.7 8.4 11.5 1.6'/%3E%3C/svg%3E") center center no-repeat;
    border-color: var(--ember);
}


/* ---------------------------------------------------------------------------
   5.  BUTTONS
   --------------------------------------------------------------------------- */

/*
       <div class="apply-actions">
           <push-button id="save" class="apply-primary">Save</push-button>
           <push-button id="cancel">Cancel</push-button>
       </div>

   The primary action comes FIRST; Cancel / Back follow it.  Children stretch, so
   a stack of buttons all come out the same width as the fields above them.
 */
.apply-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
}

/* A wrapper div inside .apply-actions (a section that shows and hides as a
   unit) has to stretch its own children too. */
.apply-actions > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.apply-actions--row {
    flex-direction: row;
    flex-wrap: wrap;
}

.apply-actions--row > input[type=button],
.apply-actions--row > button {
    flex: 1 1 0;
    min-width: 0;
}

/* Default look is the quiet one: white with an ember outline. */
.apply-screen input[type=button],
.apply-screen button,
.kiss-popup-body input[type=button],
.kiss-popup-body button {
    box-sizing: border-box;
    min-width: 0;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    color: var(--ember);
    background: var(--white);
    border: 1.5px solid var(--ember);
    border-radius: var(--radius-ctl);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.apply-screen input[type=button]:hover,
.apply-screen button:hover,
.kiss-popup-body input[type=button]:hover,
.kiss-popup-body button:hover {
    background: var(--panel);
}

.apply-screen input[type=button]:active,
.apply-screen button:active,
.kiss-popup-body input[type=button]:active,
.kiss-popup-body button:active {
    transform: scale(.99);
}

.apply-screen input[type=button]:focus-visible,
.apply-screen button:focus-visible,
.kiss-popup-body input[type=button]:focus-visible,
.kiss-popup-body button:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
}

.apply-screen input[type=button]:disabled,
.apply-screen button:disabled,
.kiss-popup-body input[type=button]:disabled,
.kiss-popup-body button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* The one loud button on the screen. */
.apply-screen input[type=button].apply-primary,
.apply-screen button.apply-primary,
.kiss-popup-body input[type=button].apply-primary,
.kiss-popup-body button.apply-primary {
    font-size: 16px;
    color: var(--white);
    background: var(--ember);
    border-color: var(--ember);
}

.apply-screen input[type=button].apply-primary:hover,
.apply-screen button.apply-primary:hover,
.kiss-popup-body input[type=button].apply-primary:hover,
.kiss-popup-body button.apply-primary:hover {
    background: var(--ember-deep);
    border-color: var(--ember-deep);
}

/* An <a> used as an action (Main's "View Current Openings") looks and sizes like
   the quiet button beside it. */
.apply-screen .apply-actions a {
    display: block;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--ember);
    background: var(--white);
    border: 1.5px solid var(--ember);
    border-radius: var(--radius-ctl);
}

.apply-screen .apply-actions a:hover {
    background: var(--panel);
}

/* A disabled primary at 45% opacity is white text on pale ember and cannot be
   read, so it goes neutral instead of faint. */
.apply-screen input[type=button].apply-primary:disabled,
.apply-screen button.apply-primary:disabled,
.kiss-popup-body input[type=button].apply-primary:disabled,
.kiss-popup-body button.apply-primary:disabled {
    opacity: 1;
    color: var(--text-muted);
    background: var(--panel);
    border-color: var(--line);
}

/* Delete, Decline -- destructive, but never the loudest thing on the screen. */
.apply-screen input[type=button].apply-danger,
.apply-screen button.apply-danger,
.kiss-popup-body input[type=button].apply-danger,
.kiss-popup-body button.apply-danger {
    color: #a13126;
    background: var(--white);
    border-color: #d9a49d;
}

.apply-screen input[type=button].apply-danger:hover,
.apply-screen button.apply-danger:hover,
.kiss-popup-body input[type=button].apply-danger:hover,
.kiss-popup-body button.apply-danger:hover {
    background: #fdf1ef;
    border-color: #a13126;
}


/* ---------------------------------------------------------------------------
   6.  CHECKLIST ROWS
   --------------------------------------------------------------------------- */

/*
   A read-only completion checkbox beside the button that opens the section:

       <div class="apply-check-row">
           <check-box id="education-cb" style="display: inline-flex;" disabled></check-box>
           <push-button id="education">Education</push-button>
       </div>

       <div class="apply-check-row apply-check-row--spacer">
           <push-button id="document-upload">Document Upload</push-button>
       </div>

   SignOffer builds its section list at run time and needs two lines of text in
   each button, which a push-button's value attribute cannot hold, so it emits a
   raw <button> instead:

       <div class="apply-check-row apply-check-row--spacer">
           <button type="button" id="sec1">
               <span class="apply-section-name">Offer Letter</span>
               <span class="apply-status apply-status--ok">Signed</span>
           </button>
       </div>
 */
.apply-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.apply-check-row--spacer::before {
    content: '';
    flex: 0 0 20px;
    width: 20px;
}

.apply-check-row > div {
    flex: none;
    margin: 0;
}

/* Apply.html's status check-boxes carry no label; an empty one would still add
   its inline 4px margin and knock the buttons out of line with the spacer row. */
.apply-check-row label:empty {
    display: none;
}

/*
   The tick reports whether a section is done; it is disabled so the applicant
   cannot forge it.  Chrome ignores accent-color on a disabled checkbox and
   paints it grey, which reads as "unavailable" rather than "complete", so the
   box is drawn here instead of by the browser.
 */
.apply-check-row input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 6px;
}

.apply-check-row input[type=checkbox]:checked {
    background: var(--ember) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 5.2 4.7 8.4 11.5 1.6'/%3E%3C/svg%3E") center center no-repeat;
    border-color: var(--ember);
}

.apply-check-row input[type=checkbox]:disabled {
    opacity: 1;
    cursor: default;
}

/*
   Two kinds of button sit in a check row and share one look:  a push-button
   (-> input[type=button]) on Apply's checklist, and a raw <button> on
   SignOffer's section list, which needs a block that holds two lines of text
   (.apply-section-name over .apply-status).
 */
.apply-screen .apply-check-row input[type=button],
.apply-screen .apply-check-row button {
    flex: 1 1 auto;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--line);
}

/* A raw <button> is not a Kiss control, so width: 100% is allowed on it -- and
   only on it.  A Kiss control must never be given a width (see the header). */
.apply-screen .apply-check-row button {
    display: block;
    width: 100%;
}

.apply-screen .apply-check-row input[type=button]:hover,
.apply-screen .apply-check-row button:hover {
    background: var(--panel);
    border-color: var(--ember);
}

/* The section's name, the first of the two lines inside such a button. */
.apply-screen .apply-section-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* The status line under a section name.  Green reads as done, ember as still to
   do -- the same ember the primary button uses, so "act on this" is one colour. */
.apply-screen .apply-status {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}

.apply-screen .apply-status--ok   { color: var(--success); }
.apply-screen .apply-status--todo { color: var(--ember); }


/* ---------------------------------------------------------------------------
   7.  PROSE  (long static text and server-supplied HTML)
   --------------------------------------------------------------------------- */

/*
   Also goes straight on a text-label, whose generated <span> this makes a block:
       <text-label id="job-description" class="apply-prose"></text-label>
 */
.apply-prose {
    display: block;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    overflow-wrap: break-word;
}

.apply-prose p { margin: 0 0 12px; }
.apply-prose p:last-child { margin-bottom: 0; }
.apply-prose ul,
.apply-prose ol { margin: 0 0 12px; padding-left: 22px; }
.apply-prose li { margin-bottom: 6px; }
.apply-prose img { max-width: 100%; height: auto; }
.apply-prose table { display: block; overflow-x: auto; max-width: 100%; }
.apply-prose h1 { font-size: 19px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.apply-prose h2 { font-size: 17px; font-weight: 700; margin: 16px 0 8px; line-height: 1.3; }
.apply-prose h3 { font-size: 15.5px; font-weight: 700; margin: 14px 0 6px; line-height: 1.35; }
.apply-prose h4 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; line-height: 1.35; }
.apply-prose > :first-child { margin-top: 0; }

.apply-prose--boxed {
    padding: 14px 16px;
    background: var(--panel);
    border-radius: var(--radius-ctl);
    max-height: 60vh;
    overflow-y: auto;
    font-size: 14px;
    color: var(--text-muted);
}

/* Agreement:  the acknowledgement box would otherwise sit hard against the last
   line of the agreement text. */
.apply-screen .apply-prose + .apply-choice {
    margin-top: 14px;
}


/* ---------------------------------------------------------------------------
   8.  POPUPS  (deliberately unscoped -- appended to document.body)
   --------------------------------------------------------------------------- */

/* Utils.showMessage / Utils.yesNo.
   The width carries !important because Utils.showMessage sets an inline width
   on the content div on small screens (screen.width < content width + 20). */
.kiss-msg-modal-content,
.kiss-wmsg-modal-content {
    width: min(400px, calc(100vw - 32px)) !important;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    font-family: inherit;
}

/* The header's background colour is set inline by Utils.showMessage
   (red for the title "Error", #6495ed otherwise) -- left alone on purpose. */
.kiss-msg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    /* Black, not white:  white text clears neither of the two JS-set header
       colours at AA (3.99:1 on red, 2.97:1 on #6495ed), while black clears both
       comfortably (5.25:1 and 7.06:1). */
    color: var(--ink);
    border-radius: 0;
}

.kiss-msg-modal-header p {
    order: 1;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Static, not floated: floated, the x fell outside the rounded corner and got
   clipped by the content div's overflow: hidden. */
.kiss-msg-close {
    order: 2;
    float: none;
    flex: none;
    margin: 0;
    padding: 0 0 0 12px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
}

.kiss-msg-close:hover,
.kiss-msg-close:focus {
    color: var(--ink);
    opacity: .6;
}

.kiss-msg-modal-body {
    margin-top: 0;
    padding: 18px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}

.kiss-msg-modal-body p {
    margin: 0;
}

/* The footer's buttons carry inline margins from Utils.showMessage
   (5px top, 10px bottom, and 10px left on the No button), so the padding here
   is short by that much and the gap between Yes and No is the inline margin. */
.kiss-msg-modal-footer {
    display: flex;
    justify-content: center;
    padding: 0 16px 8px;
}

.kiss-msg-modal-footer input[type=button] {
    box-sizing: border-box;
    min-width: 96px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    color: var(--white);
    background: var(--ember);
    border: 1.5px solid var(--ember);
    border-radius: var(--radius-ctl);
    cursor: pointer;
}

.kiss-msg-modal-footer input[type=button]:hover {
    background: var(--ember-deep);
    border-color: var(--ember-deep);
}

.kiss-msg-modal-footer input[type=button]:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
}

/* The second button of a yes/no pair is the quiet one. */
#yesno-no {
    color: var(--ember);
    background: var(--white);
    border-color: var(--line);
}

#yesno-no:hover {
    background: var(--panel);
    border-color: var(--ember);
}

/* <popup> tags.  Utils.popup_open copies the tag's width/height onto
   .kiss-popup-content / .kiss-popup-body as inline styles, so sizing stays with
   the tag -- only the skin belongs here. */
.kiss-popup-content {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.kiss-popup-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    background: var(--sky);
    border-radius: 0;
}

.kiss-popup-body {
    padding: 16px;
    font-family: inherit;
    color: var(--ink);
    background: var(--white);
    overflow: auto;
}