/**
 * Hashira Careers — Component Library
 *
 * v2.3.8 BL-020 — Phase 1 scaffolding.
 * v2.4.0       — Typographic hierarchy (Word-style L1-L6) + wizard progress stepper.
 *
 * Reusable visual components for plugin pages. All components reference
 * design tokens from design-tokens.css — never hard-code colors, fonts,
 * sizes, or spacing here.
 */

/* ============================================================
 * v2.4.0 — Typographic hierarchy
 *
 * Word-style semantic levels. Use these instead of styling
 * <h1>/<h2>/<h3> inline.
 *
 *   .hashira-h1   — page title       (e.g. "Edit Profile")
 *   .hashira-h2   — major section    (e.g. "Personal Details")
 *   .hashira-h3   — subsection       (e.g. "Identity")
 *   .hashira-h4   — block heading    (e.g. employer card title)
 *   .hashira-h5   — field-group label
 *   .hashira-h6   — eyebrow / micro-label (uppercased)
 *
 *   .hashira-body         — default body text
 *   .hashira-body-lg      — emphasised body
 *   .hashira-body-sm      — de-emphasised body / fine print
 *   .hashira-caption      — help text below inputs
 *   .hashira-remark       — side notes, comments
 *   .hashira-label        — form field label (always Title Case, hierarchy h5)
 *   .hashira-code         — monospace inline (use .hashira-id-chip for chip styling)
 *
 * Global element defaults: bare <h1>-<h6> inside .hcm-card or
 * .hashira-careers-form also pick up these sizes, so legacy templates
 * inherit the system without an explicit class.
 * ============================================================ */
.hashira-h1, .hcm-card .hcm-card__body h1 {
    font-size: var(--hashira-h1-size);
    font-weight: var(--hashira-weight-bold);
    color: var(--hashira-color-text-primary);
    font-family: var(--hashira-font-display);
    line-height: var(--hashira-leading-tight);
    margin: 0 0 var(--hashira-space-4) 0;
}
.hashira-h2, .hashira-careers-form h2:not([class*='hashira-careers']),
.hcm-card__title {
    font-size: var(--hashira-h2-size);
    font-weight: var(--hashira-weight-bold);
    color: var(--hashira-color-text-primary);
    font-family: var(--hashira-font-display);
    line-height: var(--hashira-leading-tight);
    margin: 0;
}
.hashira-h3, .hashira-careers-form h3:not([class*='hashira-careers']):not([class*='hcm-card']) {
    font-size: var(--hashira-h3-size);
    font-weight: var(--hashira-weight-semibold);
    color: var(--hashira-color-text-primary);
    font-family: var(--hashira-font-display);
    line-height: var(--hashira-leading-tight);
    margin: var(--hashira-space-5) 0 var(--hashira-space-3) 0;
}
.hashira-h4 {
    font-size: var(--hashira-h4-size);
    font-weight: var(--hashira-weight-semibold);
    color: var(--hashira-color-text-primary);
    font-family: var(--hashira-font-display);
    line-height: var(--hashira-leading-tight);
    margin: var(--hashira-space-3) 0 var(--hashira-space-2) 0;
}
.hashira-h5 {
    font-size: var(--hashira-h5-size);
    font-weight: var(--hashira-weight-semibold);
    color: var(--hashira-color-text-primary);
    font-family: var(--hashira-font-body);
    line-height: var(--hashira-leading-normal);
    margin: 0 0 var(--hashira-space-2) 0;
}
.hashira-h6 {
    font-size: var(--hashira-h6-size);
    font-weight: var(--hashira-weight-semibold);
    color: var(--hashira-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--hashira-font-body);
    margin: 0 0 var(--hashira-space-2) 0;
}

.hashira-body {
    font-size: var(--hashira-body-size);
    color: var(--hashira-color-text-primary);
    line-height: var(--hashira-leading-normal);
    font-family: var(--hashira-font-body);
}
.hashira-body-lg {
    font-size: var(--hashira-body-lg-size);
    color: var(--hashira-color-text-primary);
    line-height: var(--hashira-leading-normal);
    font-family: var(--hashira-font-body);
}
.hashira-body-sm {
    font-size: var(--hashira-body-sm-size);
    color: var(--hashira-color-text-secondary);
    line-height: var(--hashira-leading-normal);
    font-family: var(--hashira-font-body);
}
.hashira-caption {
    font-size: var(--hashira-caption-size);
    color: var(--hashira-color-text-muted);
    line-height: var(--hashira-leading-normal);
    font-family: var(--hashira-font-body);
    font-style: normal;
}
.hashira-remark {
    font-size: var(--hashira-remark-size);
    color: var(--hashira-color-text-secondary);
    font-style: italic;
    line-height: var(--hashira-leading-normal);
    font-family: var(--hashira-font-body);
}
.hashira-label {
    display: block;
    font-size: var(--hashira-h5-size);
    font-weight: var(--hashira-weight-semibold);
    color: var(--hashira-color-text-primary);
    font-family: var(--hashira-font-body);
    margin: 0 0 var(--hashira-space-1) 0;
    line-height: var(--hashira-leading-tight);
}
.hashira-code {
    font-family: var(--hashira-font-mono);
    font-size: 0.92em;
    color: var(--hashira-color-text-primary);
}

/* v2.4.0 — Global element defaults inside plugin scope so legacy
 * templates with bare <h2>/<h3>/<label>/<small> inherit the system
 * without needing explicit class migration. Scoped under .hcm-card
 * and .hashira-careers-form to avoid leaking into theme/admin pages.
 */
.hashira-careers-form label:not([class]) {
    display: block;
    font-size: var(--hashira-h5-size);
    font-weight: var(--hashira-weight-semibold);
    color: var(--hashira-color-text-primary);
    margin: 0 0 var(--hashira-space-1) 0;
}
.hashira-careers-form small:not([class]),
.hcm-card small:not([class]) {
    font-size: var(--hashira-caption-size);
    color: var(--hashira-color-text-muted);
    line-height: var(--hashira-leading-normal);
}

/* ============================================================
 * Card
 * ============================================================ */
.hcm-card {
    background: var(--hashira-color-bg-card);
    border: var(--hashira-border-thin);
    border-radius: var(--hashira-radius-md);
    padding: var(--hashira-space-6);
    box-shadow: var(--hashira-shadow-sm);
    margin-bottom: var(--hashira-space-5);
    font-family: var(--hashira-font-body);
    color: var(--hashira-color-text-primary);
}

.hcm-card__header {
    margin: 0 0 var(--hashira-space-4) 0;
    padding-bottom: var(--hashira-space-3);
    border-bottom: 2px solid var(--hashira-color-brand-green);
}

.hcm-card__title {
    margin: 0;
    font-size: var(--hashira-h2-size);
    font-weight: var(--hashira-weight-bold);
    color: var(--hashira-color-text-primary);
    font-family: var(--hashira-font-display);
    line-height: var(--hashira-leading-tight);
}

.hcm-card__subtitle {
    margin: var(--hashira-space-1) 0 0 0;
    font-size: var(--hashira-caption-size);
    color: var(--hashira-color-text-muted);
    font-weight: var(--hashira-weight-normal);
    font-style: normal;
}

/* ============================================================
 * v2.4.0 — Wizard progress stepper
 *
 * Sticky-top progress indicator showing all wizard steps with
 * clear visual states (completed / current / upcoming). Replaces
 * the older section nav that didn't make progress legible.
 *
 * Markup:
 *   <ol class="hashira-stepper">
 *     <li class="hashira-stepper__step hashira-stepper__step--complete">
 *       <span class="hashira-stepper__num">1</span>
 *       <span class="hashira-stepper__label">About You</span>
 *     </li>
 *     <li class="hashira-stepper__step hashira-stepper__step--current">
 *       <span class="hashira-stepper__num">2</span>
 *       <span class="hashira-stepper__label">Career History</span>
 *     </li>
 *     <li class="hashira-stepper__step">
 *       <span class="hashira-stepper__num">3</span>
 *       <span class="hashira-stepper__label">Skills</span>
 *     </li>
 *     ...
 *   </ol>
 * ============================================================ */
.hashira-stepper {
    list-style: none;
    display: flex;
    gap: 0;
    padding: var(--hashira-space-4) 0;
    margin: 0 0 var(--hashira-space-5) 0;
    border-bottom: var(--hashira-border-thin);
    background: var(--hashira-color-bg-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hashira-stepper__step {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    gap: var(--hashira-space-2);
    padding: 0 var(--hashira-space-3);
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-body-sm-size);
    color: var(--hashira-color-text-muted);
    position: relative;
    min-width: 0;
    white-space: nowrap;
}

.hashira-stepper__step + .hashira-stepper__step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--hashira-space-2);
    height: 1px;
    background: var(--hashira-color-border-strong);
    transform: translateY(-50%);
}

.hashira-stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hashira-color-bg-section-tint);
    border: 1px solid var(--hashira-color-border-strong);
    color: var(--hashira-color-text-muted);
    font-size: var(--hashira-body-sm-size);
    font-weight: var(--hashira-weight-semibold);
    flex: 0 0 auto;
}

.hashira-stepper__label {
    font-weight: var(--hashira-weight-normal);
    color: var(--hashira-color-text-muted);
}

/* Completed step — green dot + check + green label */
.hashira-stepper__step--complete .hashira-stepper__num {
    background: var(--hashira-color-brand-green);
    border-color: var(--hashira-color-brand-green);
    color: var(--hashira-color-text-on-brand);
}
.hashira-stepper__step--complete .hashira-stepper__num::after {
    content: '✓';
}
.hashira-stepper__step--complete .hashira-stepper__num > * {
    display: none;
}
.hashira-stepper__step--complete .hashira-stepper__label {
    color: var(--hashira-color-brand-green-dark);
    font-weight: var(--hashira-weight-medium);
}

/* Current step — filled brand color, slight emphasis */
.hashira-stepper__step--current .hashira-stepper__num {
    background: var(--hashira-color-brand-green-dark);
    border-color: var(--hashira-color-brand-green-dark);
    color: var(--hashira-color-text-on-brand);
}
.hashira-stepper__step--current .hashira-stepper__label {
    color: var(--hashira-color-text-primary);
    font-weight: var(--hashira-weight-semibold);
}

/* Stepper as a link (clickable to jump back to completed steps) */
.hashira-stepper__step a {
    display: flex;
    align-items: center;
    gap: var(--hashira-space-2);
    color: inherit;
    text-decoration: none;
}
.hashira-stepper__step a:hover .hashira-stepper__label {
    text-decoration: underline;
}

/* Progress summary line above stepper */
.hashira-stepper-summary {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-h6-size);
    color: var(--hashira-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--hashira-space-2) 0;
}

/* ============================================================
 * v2.5.0 — HR Toolbar
 *
 * Sticky action bar above HR list views. Holds:
 *   - left: result count + secondary toggles ("My Queue")
 *   - right: search input + "Filters" button + primary action
 *
 * Replaces ad-hoc inline header rows. Used on Applications,
 * Candidates, Jobs, Partners list pages.
 *
 * Markup:
 *   <div class="hashira-toolbar">
 *     <div class="hashira-toolbar__section">
 *       <span class="hashira-toolbar__count">10 Applications</span>
 *       <span class="hashira-toolbar__divider">·</span>
 *       <label class="hashira-toolbar__toggle"><input type="checkbox"> My Queue</label>
 *     </div>
 *     <div class="hashira-toolbar__section">
 *       <input class="hashira-toolbar__search" type="search">
 *       <button class="hashira-btn">Filters</button>
 *       <button class="hashira-btn hashira-btn--primary">+ Action</button>
 *     </div>
 *   </div>
 * ============================================================ */
.hashira-toolbar {
    background: var(--hashira-color-bg-card);
    border: 1px solid var(--hashira-color-border);
    border-radius: var(--hashira-radius-md);
    padding: var(--hashira-space-3) var(--hashira-space-5);
    margin-bottom: var(--hashira-space-4);
    display: flex;
    align-items: center;
    gap: var(--hashira-space-4);
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: var(--hashira-shadow-sm);
}
.hashira-toolbar--sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}
.hashira-toolbar__section {
    display: flex;
    align-items: center;
    gap: var(--hashira-space-3);
}
.hashira-toolbar__count {
    font-size: var(--hashira-body-size);
    color: var(--hashira-color-text-secondary);
    font-weight: 500;
}
.hashira-toolbar__divider {
    color: var(--hashira-color-border-strong);
    user-select: none;
}
.hashira-toolbar__toggle {
    display: flex;
    align-items: center;
    gap: var(--hashira-space-2);
    font-size: var(--hashira-body-size);
    color: var(--hashira-color-text-secondary);
    cursor: pointer;
    user-select: none;
}
.hashira-toolbar__search {
    padding: 8px 12px;
    border: 1px solid var(--hashira-color-border-strong);
    border-radius: var(--hashira-radius-sm);
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-body-size);
    background: #fff;
    color: var(--hashira-color-text-primary);
    min-width: 240px;
}

/* ============================================================
 * v2.5.0 — Filter Accordion
 *
 * Collapsible filter panel. Closed by default to keep the list
 * as the focal point. Opens to a 3-column grid of filter fields.
 *
 * Markup:
 *   <details class="hashira-accordion">
 *     <summary class="hashira-accordion__header">
 *       <span class="hashira-accordion__title">Filters</span>
 *       <span class="hashira-accordion__summary">All Statuses · All Types</span>
 *       <span class="hashira-accordion__chevron">⌄</span>
 *     </summary>
 *     <div class="hashira-accordion__body">
 *       <div class="hashira-accordion__grid">
 *         <div class="hashira-field"><label>Status</label><select>...</select></div>
 *         ...
 *       </div>
 *     </div>
 *   </details>
 * ============================================================ */
.hashira-accordion {
    background: var(--hashira-color-bg-card);
    border: 1px solid var(--hashira-color-border);
    border-radius: var(--hashira-radius-md);
    margin-bottom: var(--hashira-space-4);
    overflow: hidden;
}
.hashira-accordion__header {
    display: flex;
    align-items: center;
    padding: var(--hashira-space-3) var(--hashira-space-5);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.hashira-accordion__header::-webkit-details-marker { display: none; }
.hashira-accordion[open] > .hashira-accordion__header {
    border-bottom: 1px solid var(--hashira-color-border);
}
.hashira-accordion__title {
    font-size: var(--hashira-h5-size);
    font-weight: 600;
    color: var(--hashira-color-text-primary);
}
.hashira-accordion__summary {
    font-size: var(--hashira-body-sm-size);
    color: var(--hashira-color-text-muted);
    margin-left: var(--hashira-space-3);
    font-weight: 400;
}
.hashira-accordion__chevron {
    color: var(--hashira-color-text-muted);
    font-size: var(--hashira-h3-size, 18px);
    margin-left: auto;
    transition: transform 200ms;
    line-height: 1;
}
.hashira-accordion[open] .hashira-accordion__chevron {
    transform: rotate(180deg);
}
.hashira-accordion__body {
    padding: var(--hashira-space-5);
}
.hashira-accordion__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--hashira-space-5);
    align-items: end;
}
@media (max-width: 720px) {
    .hashira-accordion__grid { grid-template-columns: 1fr; }
}
.hashira-field {
    display: flex;
    flex-direction: column;
    gap: var(--hashira-space-1);
}

/* ============================================================
 * v2.5.0 — Bulk Action Bar
 *
 * Shown only when 1+ rows selected. Hidden entirely at rest
 * (consumes zero vertical space when empty).
 * ============================================================ */
.hashira-bulk-bar {
    background: var(--hashira-color-brand-green-pale);
    border: 1px solid var(--hashira-color-brand-green);
    border-radius: var(--hashira-radius-md);
    padding: var(--hashira-space-3) var(--hashira-space-5);
    margin-bottom: var(--hashira-space-4);
    display: flex;
    align-items: center;
    gap: var(--hashira-space-3);
    flex-wrap: wrap;
}
.hashira-bulk-bar[hidden] { display: none; }
.hashira-bulk-bar__count {
    font-size: var(--hashira-body-sm-size);
    font-weight: 600;
    color: var(--hashira-color-brand-green-dark);
}

/* ============================================================
 * v2.5.0 — Data Table (consistent header treatment)
 * ============================================================ */
.hashira-table-wrap {
    background: var(--hashira-color-bg-card);
    border: 1px solid var(--hashira-color-border);
    border-radius: var(--hashira-radius-md);
    overflow: hidden;
    box-shadow: var(--hashira-shadow-sm);
    margin-bottom: var(--hashira-space-6);
}
.hashira-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--hashira-font-body);
}
.hashira-table thead th {
    background: var(--hashira-color-bg-section-tint);
    font-size: var(--hashira-h6-size);
    font-weight: 600;
    color: var(--hashira-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: var(--hashira-space-3) var(--hashira-space-5);
    border-bottom: 1px solid var(--hashira-color-border);
}
.hashira-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--hashira-color-border);
    font-size: var(--hashira-body-size);
    color: var(--hashira-color-text-primary);
    vertical-align: middle;
    line-height: 1.4;
}
.hashira-table tbody tr:last-child td { border-bottom: 0; }
.hashira-table tbody tr:hover { background: var(--hashira-color-bg-section-tint); }
.hashira-table__primary {
    font-weight: 600;
    color: var(--hashira-color-text-primary);
    line-height: 1.4;
}
.hashira-table__secondary {
    font-size: var(--hashira-caption-size);
    color: var(--hashira-color-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.hashira-table__timestamp {
    color: var(--hashira-color-text-muted);
    font-size: var(--hashira-body-sm-size);
    font-variant-numeric: tabular-nums;
}

/* ================================================================
 * UNIVERSAL TABLE RULE (2026-06-01)
 *
 * ONE rule every platform-rendered table follows. No per-table or
 * per-column pixel hand-tuning. Drop a <table class="hashira-table">
 * on any page and it sizes itself sensibly:
 *   - the table fills its container;
 *   - columns size to their content (auto layout), so a table with
 *     3 columns and one with 9 both look right with no config;
 *   - cells never wrap mid-value by default — long values (emails,
 *     references) ellipsis with the full text available on hover;
 *   - the PRIMARY text column (the one meant to flex) is the only
 *     one allowed to grow/wrap, and it is bounded so it can't hog
 *     the row the way an unbounded <th>Title</th> did;
 *   - numbers/dates/status are content-sized and centred/nowrap.
 *
 * Scope: targets OUR table class only, so it never collides with
 * the styling WordPress ships for its own wp-admin tables
 * (.widefat / .wp-list-table / .form-table) — those keep WP's
 * universal styling. This IS the universal rule for our tables.
 * ================================================================ */
.hashira-table, .hcm-hr-table {
    table-layout: auto;          /* size columns to content, any column count */
}
/* Default: cells size to their content and do NOT truncate. Only the columns
   that hold genuinely long values (primary text, emails, references) opt INTO
   truncation below. This is the inverse of a blanket-truncate default, which
   crushed short columns (Status->"STA...", counts->"5...") because they
   inherited overflow:hidden + max-width:0. Cells stay on one line; long values
   are handled per-column. */
.hashira-table thead th, .hashira-table tbody td,
.hcm-hr-table thead th, .hcm-hr-table tbody td {
    white-space: nowrap;
    vertical-align: middle;
}
/* The primary text column: allowed to wrap, bounded so it cannot hog the row. */
.hashira-table .col-primary, .hcm-hr-table .col-primary {
    white-space: normal;
    min-width: 200px;
    max-width: 420px;
    width: auto;
}
/* Long machine values (emails, references): one line, ellipsis, hover = full.
   These are the ONLY columns that truncate. */
.hashira-table .col-email, .hashira-table .col-ref,
.hcm-hr-table .col-email, .hcm-hr-table .col-ref {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Content-sized utility columns — sized to content, never stretched, never clipped. */
.hashira-table .col-num,    .hcm-hr-table .col-num    { width: 1%; text-align: center; }
.hashira-table .col-pill,   .hcm-hr-table .col-pill   { width: 1%; }
.hashira-table .col-date,   .hcm-hr-table .col-date   { width: 1%; font-variant-numeric: tabular-nums; }
.hashira-table .col-actions,.hcm-hr-table .col-actions{ width: 1%; text-align: right; }
.hashira-table .col-select, .hcm-hr-table .col-select { width: 34px; text-align: center; }
/* Mobile (D-45): cells wrap freely. */
@media (max-width: 640px) {
    .hashira-table thead th, .hashira-table tbody td,
    .hcm-hr-table thead th, .hcm-hr-table tbody td { white-space: normal; }
    .hashira-table .col-email, .hashira-table .col-ref,
    .hcm-hr-table .col-email, .hcm-hr-table .col-ref { max-width: none; overflow: visible; text-overflow: clip; }
}

/* ================================================================
 * UNIVERSAL CONTROL-BAR RULE (2026-06-01)
 *
 * Companion to the universal table rule. ONE rule for every toolbar /
 * filter bar / bulk-action bar on any page: a form control inside a
 * bar sizes to ITS OWN content and never stretches to fill the row
 * (which is what squeezed "Apply to Selected" when the Bulk-action
 * select ate the whole bar). Buttons and counts then sit naturally.
 *
 * Marker: any element carrying .hashira-bar, plus the existing bar
 * containers (folded in here so the behaviour is defined ONCE, not
 * per bar). A new bar just needs class="hashira-bar" to inherit it.
 * ================================================================ */
.hashira-bar,
.hcm-hr-bulk-bar,
.hcm-hr-filter-bar,
.hcm-hr-filter-row,
.hashira-careers-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* The rule itself: controls size to content, may shrink, must NOT grow. */
.hashira-bar select,    .hashira-bar input[type="text"],    .hashira-bar input[type="search"],
.hcm-hr-bulk-bar select,.hcm-hr-bulk-bar input[type="text"],.hcm-hr-bulk-bar input[type="search"],
.hcm-hr-filter-bar select,.hcm-hr-filter-bar input[type="text"],.hcm-hr-filter-bar input[type="search"],
.hcm-hr-filter-row select,.hcm-hr-filter-row input[type="text"],.hcm-hr-filter-row input[type="search"],
.hashira-careers-filter-bar select,.hashira-careers-filter-bar input[type="text"],.hashira-careers-filter-bar input[type="search"] {
    flex: 0 1 auto;        /* size to content; may shrink; never grow to fill */
    width: auto;
    max-width: 320px;
}
/* Search inputs a touch wider (longer placeholders), still bounded. */
.hashira-bar input[type="search"],
.hcm-hr-filter-bar input[type="search"],
.hcm-hr-filter-row input[type="search"],
.hashira-careers-filter-bar input[type="search"] { max-width: 360px; }
/* A control may opt INTO filling the bar by carrying .bar-grow. */
.hashira-bar .bar-grow, .hcm-hr-bulk-bar .bar-grow,
.hcm-hr-filter-bar .bar-grow, .hashira-careers-filter-bar .bar-grow { flex: 1 1 auto; max-width: none; }
/* A count/label pushed to the far end. */
.hashira-bar .bar-end, .hcm-hr-bulk-bar .bar-end { margin-left: auto; }
@media (max-width: 640px) {
    .hashira-bar select, .hashira-bar input,
    .hcm-hr-bulk-bar select, .hcm-hr-filter-bar select, .hcm-hr-filter-row select,
    .hashira-careers-filter-bar select { max-width: none; width: 100%; }
}

/* ================================================================
 * UNIVERSAL RESPONSIVE PAGE RULE (2026-06-01)
 *
 * The decision rule for "how wide is a page": fluid up to a max-cap
 * chosen by page PURPOSE, then centered, and ALWAYS full-width with
 * reduced padding on mobile. width:100% + box-sizing:border-box on
 * every page wrapper so a cap never causes horizontal overflow on a
 * phone (the listing-too-wide symptom). Caps come from the width
 * tokens; this rule supplies the responsiveness universally.
 *   content (880) : forms + reading        landing (1200) : listings
 *   work (1600)   : HR/admin data pages
 * ================================================================ */
.hashira-careers-container,
.hashira-careers-main,
.hcm-hr-content {
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
/* v2.78.0 BL-636 — width-by-purpose cap for HR/admin WORK pages. Scoped to the
   HR mount's own modifier (added in hr.php) so it does NOT bleed onto the
   partner portal, which shares the bare .hcm-hr-content wrapper and must stay
   uncapped (verified by the v2.76.2 handoff smoke). HR pages now go fluid up to
   the work width (1600), then centre — instead of stretching edge-to-edge on
   wide monitors. The dashboard's inner panel-grid keeps its own narrower
   landing cap (1200); no conflict (inner < outer). */
.hcm-hr-content--work {
    max-width: var(--hashira-width-work, 1600px);
    padding-left: var(--hashira-gutter-work, 32px);
    padding-right: var(--hashira-gutter-work, 32px);
}
/* Mobile (D-45): pages go edge-to-edge with comfortable padding; never
   hold a desktop cap on a phone. */
@media (max-width: 640px) {
    .hashira-careers-container,
    .hashira-careers-main,
    .hcm-hr-content {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.hcm-card__body {
    font-size: var(--hashira-text-base);
    line-height: var(--hashira-leading-normal);
}

/* ============================================================
 * Field row (label-value pair)
 * ============================================================ */
.hashira-field-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--hashira-space-4);
    padding: var(--hashira-space-2) 0;
    align-items: baseline;
}

.hashira-field-row + .hashira-field-row {
    border-top: 1px solid var(--hashira-color-border);
}

.hashira-field-row__label {
    font-size: var(--hashira-text-base);
    color: var(--hashira-color-text-muted);
    font-weight: var(--hashira-weight-normal);
}

.hashira-field-row__value {
    font-size: var(--hashira-text-base);
    color: var(--hashira-color-text-primary);
    font-weight: var(--hashira-weight-medium);
}

/* ============================================================
 * ID reference (monospace, for short_ids / refs / nonces)
 *
 * v2.5.0 — modern no-chip treatment. JetBrains Mono web font,
 * slate-gray color, no background, no border. The font itself
 * signals "this is a code token." Same pattern used in Linear,
 * Vercel, Mercury, Stripe, Brex, Ramp.
 *
 * Class name retained for backward compatibility with existing
 * markup across HR portal, candidate dashboard, apply wizard.
 * ============================================================ */
.hashira-id-chip {
    display: inline;
    font-family: var(--hashira-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--hashira-color-text-id);
    letter-spacing: 0;
    line-height: inherit;
    font-feature-settings: "tnum" 1, "zero" 1;
    /* No background, no border, no padding. The font carries the affordance. */
}

/* ============================================================
 * Buttons
 * ============================================================ */
.hashira-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hashira-space-2);
    padding: var(--hashira-space-2) var(--hashira-space-4);
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-text-base);
    font-weight: var(--hashira-weight-medium);
    line-height: var(--hashira-leading-tight);
    border-radius: var(--hashira-radius-sm);
    border: 1px solid var(--hashira-color-border-strong);
    cursor: pointer;
    text-decoration: none;
    color: var(--hashira-color-text-primary);
    background: var(--hashira-color-bg-card);
    transition: background-color 120ms ease;
}

.hashira-btn:hover {
    background: var(--hashira-color-bg-section-tint);
}

.hashira-btn--primary {
    background: var(--hashira-color-brand-green);
    border-color: var(--hashira-color-brand-green);
    color: var(--hashira-color-text-on-brand);
}

.hashira-btn--primary:hover {
    background: var(--hashira-color-brand-green-dark);
    border-color: var(--hashira-color-brand-green-dark);
}

.hashira-btn--secondary {
    background: var(--hashira-color-brand-green-pale);
    border-color: var(--hashira-color-brand-green);
    color: var(--hashira-color-brand-green-dark);
}

.hashira-btn--outline {
    background: transparent;
    border-color: var(--hashira-color-border-strong);
    color: var(--hashira-color-text-primary);
}

/* BL-100 v2.6.3 — Small button modifier (relocated from inline resume styles).
   Used by drawer chrome controls + footer; reusable elsewhere. */
.hashira-btn--sm {
    padding: 5px 11px;
    font-size: var(--hashira-text-sm, 12px);
}

/* ============================================================
 * Status badges
 * ============================================================ */
.hashira-badge {
    display: inline-block;
    padding: 2px 10px;
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-text-xs);
    font-weight: var(--hashira-weight-semibold);
    line-height: var(--hashira-leading-tight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--hashira-radius-pill);
    color: var(--hashira-color-text-on-brand);
    background: var(--hashira-color-status-draft);
}

.hashira-badge--status-draft        { background: var(--hashira-color-status-draft); }
.hashira-badge--status-submitted    { background: var(--hashira-color-status-submitted); }
.hashira-badge--status-screening    { background: var(--hashira-color-status-screening); }
.hashira-badge--status-interviewing { background: var(--hashira-color-status-interviewing); }
.hashira-badge--status-offer_pending{ background: var(--hashira-color-status-offer); }
.hashira-badge--status-accepted     { background: var(--hashira-color-status-accepted); }
.hashira-badge--status-rejected     { background: var(--hashira-color-status-rejected); }
.hashira-badge--status-withdrawn    { background: var(--hashira-color-status-withdrawn); }
.hashira-badge--status-expired      { background: var(--hashira-color-status-expired); }
/* v2.5.6 Phase K — discarded selector (HR-side terminal state) */
.hashira-badge--status-discarded    { background: var(--hashira-color-status-discarded); }
/* v2.5.6.1 G3.1 — on_hold selector (active-pause state, recoverable) */
.hashira-badge--status-on_hold      { background: var(--hashira-color-status-on_hold); }

/* ============================================================
 * Timeline (Work Experience — BL-021)
 * ============================================================ */
.hashira-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hashira-timeline__item {
    position: relative;
    padding: 0 0 var(--hashira-space-5) var(--hashira-space-6);
    border-left: 2px solid var(--hashira-color-border);
}

.hashira-timeline__item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.hashira-timeline__item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: var(--hashira-space-1);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hashira-color-brand-green);
    border: 2px solid var(--hashira-color-bg-card);
}

.hashira-timeline__heading {
    margin: 0 0 var(--hashira-space-1) 0;
    font-size: var(--hashira-text-md);
    font-weight: var(--hashira-weight-semibold);
    color: var(--hashira-color-text-primary);
    line-height: var(--hashira-leading-tight);
}

.hashira-timeline__role {
    color: var(--hashira-color-brand-green-dark);
}

.hashira-timeline__meta {
    margin: 0 0 var(--hashira-space-2) 0;
    font-size: var(--hashira-text-sm);
    color: var(--hashira-color-text-muted);
}

.hashira-timeline__body {
    margin: var(--hashira-space-2) 0 0 0;
    font-size: var(--hashira-text-base);
    color: var(--hashira-color-text-secondary);
    line-height: var(--hashira-leading-normal);
}

.hashira-timeline__sub {
    list-style: disc;
    margin: var(--hashira-space-2) 0 0 var(--hashira-space-5);
    padding: 0;
}

.hashira-timeline__sub li {
    margin: var(--hashira-space-1) 0;
    font-size: var(--hashira-text-base);
    color: var(--hashira-color-text-secondary);
}

/* ============================================================
 * Tag list (Skills — BL-021)
 * ============================================================ */
.hashira-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hashira-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hashira-tag-list__item {
    padding: var(--hashira-space-1) var(--hashira-space-3);
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-text-sm);
    color: var(--hashira-color-brand-green-dark);
    background: var(--hashira-color-brand-green-pale);
    border: 1px solid var(--hashira-color-brand-green);
    border-radius: var(--hashira-radius-pill);
}

/* ============================================================
 * Empty state
 * ============================================================ */
.hashira-empty-state {
    padding: var(--hashira-space-4);
    background: var(--hashira-color-bg-section-tint);
    border: 1px dashed var(--hashira-color-border-strong);
    border-radius: var(--hashira-radius-sm);
    color: var(--hashira-color-text-muted);
    font-size: var(--hashira-text-base);
    font-style: italic;
    text-align: center;
}

/* ============================================================
 * v2.5.2 — Careers Landing typography normalization (BL-046)
 *
 * Steward feedback: "top fonts are smaller but below are bigger.
 * It is not professional looking." The two-panel cards on top were
 * showing small titles while the 6-tile stat strip below had huge
 * 40+px numbers, breaking visual hierarchy.
 *
 * Normalized to the token scale:
 *   - Panel titles      → h3 (18px)
 *   - Panel item title  → body-lg (15px) semibold
 *   - Panel item meta   → caption (12px) muted
 *   - Stat cell number  → h1 (28px) — was ~40-44px
 *   - Stat cell label   → h6 (11px) uppercase muted
 *
 * All landing surfaces now read at proportional tiers — top and
 * bottom feel like one coherent design.
 * ============================================================ */
.hcm-hr-panel-title {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-h3-size);
    font-weight: 600;
    color: var(--hashira-color-text-primary);
    margin: 0;
}
.hcm-hr-panel-seeall {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-body-sm-size);
    color: var(--hashira-color-brand-green);
    text-decoration: none;
    font-weight: 500;
}
.hcm-hr-panel-item-title {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-body-lg-size);
    font-weight: 600;
    color: var(--hashira-color-text-primary);
    line-height: 1.35;
    margin: 4px 0 2px;
}
.hcm-hr-panel-item-meta {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-caption-size);
    color: var(--hashira-color-text-muted);
    line-height: 1.4;
}
.hcm-hr-panel-item-tag {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-body-sm-size);
    color: var(--hashira-color-text-secondary);
}
.hcm-hr-panel-item-action {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-body-sm-size);
    color: var(--hashira-color-brand-green);
    font-weight: 500;
}
.hcm-hr-panel-empty {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-body-size);
    color: var(--hashira-color-text-muted);
    padding: 24px 0;
    text-align: center;
    font-style: italic;
}
.hcm-hr-stat-cell-num {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-h1-size);
    font-weight: 700;
    color: var(--hashira-color-text-primary);
    line-height: 1.1;
}
.hcm-hr-stat-cell-label {
    font-family: var(--hashira-font-body);
    font-size: var(--hashira-h6-size);
    font-weight: 600;
    color: var(--hashira-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
}

/* v2.5.3 — Stat strip cell hover state (moved out of inline <style>) */
.hcm-hr-stat-strip a.hcm-hr-stat-cell {
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.05s;
    cursor: pointer;
}
.hcm-hr-stat-strip a.hcm-hr-stat-cell:hover {
    background: var(--hashira-color-bg-section-tint);
}
.hcm-hr-stat-strip a.hcm-hr-stat-cell:active {
    transform: scale(0.98);
}

/* ============================================================
 * v2.5.4 — Card content-height enforcement (D-40 visual regression fix)
 *
 * ROOT CAUSE (diagnosed via browser DevTools console output):
 *   theme.css ships its own `.hashira-card { height: 100% }` rule.
 *   This was a class-name collision — the theme uses the same class
 *   we previously used for portal cards. Theme's rule forced our
 *   cards to fill their grid-cell column height (which was stretched
 *   to the tallest sibling cell), producing the oversized empty
 *   boxes the steward reported on candidate detail page.
 *
 * v2.5.5 BL-061 UPDATE:
 *   Plugin's card class renamed `.hashira-card` → `.hcm-card`. The
 *   original namespace collision with the theme is therefore resolved
 *   by isolation. The `!important` declaration below is kept as
 *   belt-and-braces — if a future theme update were to add a rule on
 *   `.hcm-card` too, the explicit `height: auto !important` would
 *   continue to beat it. Same logic for `align-self: start`.
 *
 * D-40 ADJACENT SURFACE AUDIT (4 surfaces use .hcm-card):
 *   - HR portal: candidate detail (~5030)       ✅ fix applies
 *   - HR portal: application detail (~2305)     ✅ fix applies
 *   - HR portal: job view (~1605)               ✅ fix applies
 *   - Candidate-facing profile (templates/public/candidate-profile.php) ✅ fix applies
 *   All four want content-sized cards, none rely on equal-height columns.
 *
 * NOTE on `!important`: normally avoided, but justified here because
 * the historical conflict was with a THIRD-PARTY rule (theme.css)
 * outside our plugin. Even after rename, the defensive override
 * costs nothing and prevents recurrence.
 * ============================================================ */
.hcm-card {
    /* Defensive override against future theme rules on .hcm-card */
    height: auto !important;
    align-self: start;
}
.hcm-card__body {
    /* Body extends naturally; no flex-grow inheriting from parent */
    flex-grow: 0;
    flex-shrink: 0;
    height: auto;
    min-height: 0;
}

/* Column wrappers must also size to content stack, not stretch */
.hcm-hr-detail-main,
.hcm-hr-detail-side {
    align-self: start;
    height: max-content;
}

/* Empty cards (no content rendered conditionally) must not reserve space */
.hcm-card:empty,
.hcm-card__body:empty {
    display: none;
}

/* ============================================================
 * v2.5.5 BL-055 — Resume inline drawer
 *
 * Right-side slide-out at ~60% viewport. On mobile, collapses to
 * 100% viewport. Triggered by [data-hashira-resume-drawer-open="<url>"]
 * buttons; closed by Esc key, overlay click, or × button.
 *
 * Layout: fixed-position overlay covering full viewport; the panel
 * itself is anchored to the right and slides in via transform.
 * Iframe inside the panel fills available height.
 * ============================================================ */
.hashira-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
}
.hashira-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.hashira-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 32, 53, 0.55);
    opacity: 0;
    transition: opacity 240ms ease;
}
.hashira-drawer.is-open .hashira-drawer__overlay {
    opacity: 1;
}

.hashira-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* v2.5.6.5 B — widened 60vw → 80vw → 90vw (BL-664) so the preview dominates the
       visible area and the candidate-page chrome behind it is more clearly
       de-emphasized. Mobile already at 100vw via media query. */
    width: 90vw;
    max-width: 1800px;
    min-width: 480px;
    background: var(--hashira-color-bg-card, #fff);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), width 200ms ease;
    display: flex;
    flex-direction: column;
}
.hashira-drawer.is-open .hashira-drawer__panel {
    transform: translateX(0);
}
/* v2.5.6.5 D — Fullscreen mode toggle. Click the ⛶ Fullscreen button in the
   drawer header → drawer.classList.toggle('is-fullscreen') → panel expands
   from 80vw to 100vw. Smooth transition via the width property above. */
.hashira-drawer.is-fullscreen .hashira-drawer__panel {
    width: 100vw;
    max-width: 100vw;
}

/* v2.5.6.5 polish — Loading spinner for mammoth render. Subtle, design-token
   driven. Used inside .hashira-drawer__mammoth while the .docx is parsing. */
.hcm-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--hashira-color-border, #ECECEC);
    border-top-color: var(--hashira-color-text-muted, #94a3b8);
    border-radius: 50%;
    margin: 0 auto;
    animation: hcm-spinner-rotate 0.9s linear infinite;
}
@keyframes hcm-spinner-rotate {
    to { transform: rotate(360deg); }
}

.hashira-drawer__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hashira-space-4, 16px) var(--hashira-space-5, 20px);
    border-bottom: 1px solid var(--hashira-color-border, #ECECEC);
    background: var(--hashira-color-bg-card, #fff);
    flex-wrap: wrap; /* BL-100 v2.6.3 — Controls + actions wrap on narrow viewports */
    gap: var(--hashira-space-3, 12px);
}
.hashira-drawer__title {
    margin: 0;
    font-size: var(--hashira-h3-size, 18px);
    font-weight: 600;
    color: var(--hashira-color-text-primary, #0B2035);
    font-family: var(--hashira-font-display, inherit);
}
/* BL-100 v2.6.3 — Drawer chrome title-block slot (header LEFT segment). */
.hashira-drawer__title-block {
    flex: 0 0 auto;
}
/* BL-100 v2.6.3 — Drawer chrome controls slot (header MIDDLE segment).
   Only shown for Hashira Resume (data-hashira-resume-source=hashira).
   Hidden for Uploaded Resume. */
.hashira-drawer__controls {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hashira-space-2, 8px) var(--hashira-space-3, 12px);
    padding: 0 var(--hashira-space-3, 12px);
    font-size: var(--hashira-text-13, 13px);
}
.hashira-drawer__controls[hidden] { display: none; }
.hashira-drawer__controls-label {
    font-weight: 600;
    color: var(--hashira-color-text-primary, #0B2035);
    margin-right: var(--hashira-space-2, 8px);
}
.hashira-drawer__radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.hashira-drawer__radio input[type="radio"] {
    margin: 0;
}
/* BL-100 v2.6.3 — HR Override textarea — Option A locked. Drops down as second row
   inside header strip below the radios; hidden when not in custom mode. */
.hashira-drawer__controls-custom-wrap {
    flex-basis: 100%;
    margin-top: var(--hashira-space-2, 8px);
}
.hashira-drawer__controls-custom-wrap[hidden] { display: none; }
.hashira-drawer__controls-custom-wrap textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: var(--hashira-space-2, 8px) var(--hashira-space-3, 12px);
    border: 1px solid var(--hashira-color-border, #ECECEC);
    border-radius: var(--hashira-radius-sm, 4px);
    font-family: var(--hashira-font-body, inherit);
    font-size: var(--hashira-text-13, 13px);
    resize: vertical;
}
.hashira-drawer__actions {
    display: flex;
    align-items: center;
    gap: var(--hashira-space-3, 12px);
    flex: 0 0 auto;
}
.hashira-drawer__close {
    background: transparent;
    border: 1px solid var(--hashira-color-border, #ECECEC);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: var(--hashira-text-xl, 20px);
    line-height: 1;
    cursor: pointer;
    color: var(--hashira-color-text-muted, #666);
    transition: background 120ms ease, color 120ms ease;
}
.hashira-drawer__close:hover {
    background: var(--hashira-color-border, #ECECEC);
    color: var(--hashira-color-text-primary, #0B2035);
}

.hashira-drawer__body {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}
.hashira-drawer__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* BL-100 v2.6.3 — Drawer footer strip. NEW.
   Slim ~50px high. Shown for BOTH resume types (Hashira Resume + Uploaded
   Resume) — symmetric per approved v2.5.9 mock. Carries: Recipient hint
   (left) + Download + Email (right). */
.hashira-drawer__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--hashira-space-3, 12px);
    padding: var(--hashira-space-3, 12px) var(--hashira-space-5, 20px);
    border-top: 1px solid var(--hashira-color-border, #ECECEC);
    background: var(--hashira-color-bg-subtle, #FAFAFA);
    font-size: var(--hashira-text-13, 13px);
    min-height: 50px;
    box-sizing: border-box;
}
.hashira-drawer__footer[hidden] { display: none; }
.hashira-drawer__footer-hint {
    color: var(--hashira-color-text-muted, #666);
}
.hashira-drawer__footer-hint code {
    font-family: var(--hashira-font-mono, monospace);
    font-size: var(--hashira-text-xs, 11px);
    background: var(--hashira-color-bg-card, #fff);
    padding: 2px 6px;
    border-radius: var(--hashira-radius-sm, 4px);
}
.hashira-drawer__footer-spacer {
    flex: 1 1 auto;
}

/* v2.5.6.1 G1.9 — Mammoth output styling. Mammoth produces raw HTML;
   these rules match design tokens so rendered .docx looks polished. */
.hashira-drawer__mammoth {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: var(--hashira-space-6, 24px) var(--hashira-space-7, 32px);
    box-sizing: border-box;
}
.hcm-mammoth-content {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--hashira-font-body, system-ui, sans-serif);
    font-size: var(--hashira-text-base, 14px);
    line-height: 1.6;
    color: var(--hashira-color-text, #1f2937);
}
.hcm-mammoth-content h1 {
    font-size: var(--hashira-h2-size, 22px);
    font-weight: 700;
    margin: var(--hashira-space-6, 24px) 0 var(--hashira-space-3, 12px);
    color: var(--hashira-color-text-primary, #0B2035);
    border-bottom: 2px solid var(--hashira-color-border, #ECECEC);
    padding-bottom: var(--hashira-space-2, 8px);
}
.hcm-mammoth-content h2 {
    font-size: var(--hashira-h3-size, 18px);
    font-weight: 600;
    margin: var(--hashira-space-5, 20px) 0 var(--hashira-space-2, 8px);
    color: var(--hashira-color-text-primary, #0B2035);
}
.hcm-mammoth-content h3 {
    font-size: var(--hashira-h4-size, 16px);
    font-weight: 600;
    margin: var(--hashira-space-4, 16px) 0 var(--hashira-space-2, 8px);
}
.hcm-mammoth-content p {
    margin: 0 0 var(--hashira-space-3, 12px) 0;
}
.hcm-mammoth-content ul,
.hcm-mammoth-content ol {
    margin: 0 0 var(--hashira-space-3, 12px) 0;
    padding-left: var(--hashira-space-5, 20px);
}
.hcm-mammoth-content li {
    margin-bottom: var(--hashira-space-1, 4px);
}
.hcm-mammoth-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--hashira-space-3, 12px) 0;
}
.hcm-mammoth-content th,
.hcm-mammoth-content td {
    border: 1px solid var(--hashira-color-border, #ECECEC);
    padding: var(--hashira-space-2, 8px);
    text-align: left;
    vertical-align: top;
}
.hcm-mammoth-content th {
    background: #f8fafc;
    font-weight: 600;
}
.hcm-mammoth-content img {
    max-width: 100%;
    height: auto;
}
.hashira-drawer__message {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

/* v2.5.6.1 G1.11 — Print rules: when the drawer prints, hide everything else */
@media print {
    body > *:not(#hashira-resume-drawer) { display: none !important; }
    #hashira-resume-drawer { position: static !important; }
    #hashira-resume-drawer .hashira-drawer__overlay,
    #hashira-resume-drawer .hashira-drawer__header { display: none !important; }
    #hashira-resume-drawer .hashira-drawer__panel { position: static !important; width: 100% !important; box-shadow: none !important; }
}

@media (max-width: 768px) {
    .hashira-drawer__panel {
        width: 100vw;
        min-width: 0;
    }
}

/* ============================================================
 * v2.40.0 BL-T7-4 thru BL-T7-8 — UX Coherence components
 *
 * Per D-52 (compat-layer pattern): these are additive new
 * components that supplement existing styles. Old class names
 * remain functional via careers-compat.css.
 *
 * Naming: existing `hashira-careers-` prefix (per BL-101 BEM
 * decision still blocked).
 *
 * Components:
 *   .hashira-careers-hero          — page hero (compact)
 *   .hashira-careers-panel         — unified card replacing 3-card stacks
 *   .hashira-careers-empty-state   — inline empty result
 *   .hashira-careers-btn-*         — button system
 *   .hashira-careers-filter-bar    — single-row filter component
 * ============================================================ */

/* BL-T7-4 — Hero (compact) */
.hashira-careers-hero {
    background: #1B3B1B;
    padding: var(--hashira-space-4) var(--hashira-space-5);
    border-radius: var(--hashira-radius-lg) var(--hashira-radius-lg) 0 0;
    color: #fff;
}
.hashira-careers-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--hashira-space-4);
}
.hashira-careers-hero-titlewrap {
    min-width: 0;
}
.hashira-careers-hero-breadcrumb {
    font-size: var(--hashira-text-12);
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 2px;
    line-height: var(--hashira-leading-snug);
}
.hashira-careers-hero-title {
    font-size: var(--hashira-text-2xl);
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: var(--hashira-leading-tight);
    letter-spacing: var(--hashira-letter-tight);
}
.hashira-careers-hero-subtitle {
    font-size: var(--hashira-text-13);
    color: rgba(255, 255, 255, 0.65);
    margin: 6px 0 0;
    line-height: var(--hashira-leading-normal);
}
.hashira-careers-hero-back {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    padding: var(--hashira-space-2) var(--hashira-space-3);
    border-radius: var(--hashira-radius-md);
    font-size: var(--hashira-text-13);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.hashira-careers-hero-back:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* BL-T7-5 — Panel (unified card) */
.hashira-careers-panel {
    background: var(--hashira-color-bg-card);
    border: 1px solid var(--hashira-color-border);
    border-radius: var(--hashira-radius-lg);
    overflow: hidden;
}
.hashira-careers-panel-section {
    padding: var(--hashira-space-3) var(--hashira-space-5);
}
.hashira-careers-panel-section + .hashira-careers-panel-section {
    border-top: 1px solid var(--hashira-color-border);
}
.hashira-careers-panel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--hashira-space-4);
    flex-wrap: wrap;
}
.hashira-careers-panel-section--muted {
    background: #FAFAFA;
}

/* BL-T7-6 — Empty state (inline) */
.hashira-careers-empty-state {
    padding: var(--hashira-space-7) var(--hashira-space-5);
    text-align: center;
}
.hashira-careers-empty-state-title {
    font-size: var(--hashira-text-base);
    font-weight: 500;
    color: var(--hashira-color-text-primary);
    margin: 0 0 4px;
}
.hashira-careers-empty-state-hint {
    font-size: var(--hashira-text-13);
    color: var(--hashira-color-text-secondary);
    margin: 0;
}

/* BL-T7-7 — Button system */
.hashira-careers-btn-primary,
.hashira-careers-btn-secondary,
.hashira-careers-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--hashira-radius-md);
    font-size: var(--hashira-text-13);
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    border: 1px solid transparent;
}
.hashira-careers-btn-primary {
    background: var(--hashira-color-brand-green);
    color: #fff;
    border-color: var(--hashira-color-brand-green);
}
.hashira-careers-btn-primary:hover {
    background: var(--hashira-color-brand-green-dark);
    color: #fff;
}
.hashira-careers-btn-secondary {
    background: #fff;
    color: var(--hashira-color-brand-green);
    border-color: var(--hashira-color-brand-green);
}
.hashira-careers-btn-secondary:hover {
    background: var(--hashira-color-brand-green-pale);
}
.hashira-careers-btn-text {
    background: transparent;
    color: var(--hashira-color-brand-green);
    padding: 5px 8px;
}
.hashira-careers-btn-text:hover {
    background: var(--hashira-color-brand-green-pale);
}

/* BL-T7-8 — Filter bar (single row, no separate card) */
.hashira-careers-filter-bar {
    display: flex;
    gap: var(--hashira-space-4);
    align-items: center;
    flex-wrap: wrap;
}
.hashira-careers-filter-bar-label {
    font-size: var(--hashira-text-12);
    color: var(--hashira-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.hashira-careers-filter-bar-summary {
    flex: 1;
    min-width: 0;
    font-size: var(--hashira-text-13);
    color: var(--hashira-color-text-secondary);
}
.hashira-careers-filter-bar select,
.hashira-careers-filter-bar input[type="text"],
.hashira-careers-filter-bar input[type="search"] {
    border: 1px solid var(--hashira-color-border);
    padding: 5px 8px;
    border-radius: var(--hashira-radius-md);
    font-size: var(--hashira-text-13);
    background: #fff;
}

/* Mobile-first (D-45) */
@media (max-width: 480px) {
    .hashira-careers-hero {
        padding: var(--hashira-space-3) var(--hashira-space-4);
    }
    .hashira-careers-hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--hashira-space-2);
    }
    .hashira-careers-hero-title {
        font-size: var(--hashira-text-xl);
    }
    .hashira-careers-hero-back {
        align-self: flex-start;
    }
    .hashira-careers-panel-section {
        padding: var(--hashira-space-3) var(--hashira-space-4);
    }
    .hashira-careers-panel-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--hashira-space-2);
    }
}

/* ============================================================
   BL-104 (v2.73.0) — HR Full-Edit Drawer
   Reuses the .hashira-drawer chrome; this only styles the form
   inside it. Appended as a new component (D-52 compat discipline).
   Mobile-first ~380px (D-45).
   ============================================================ */
.hashira-app-edit__body { padding: 16px; }
.hashira-app-edit__note {
    font-size: var(--hashira-text-13, 13px);
    color: var(--hashira-color-ink-soft, #5A564B);
    background: var(--hashira-color-brand-green-pale, #EAF3DE);
    border-radius: 8px; padding: 10px 12px; margin: 0 0 16px;
    line-height: 1.45;
}
.hashira-app-edit__group {
    border: 1px solid var(--hashira-color-border, #DAD3BE);
    border-radius: 10px; padding: 12px 14px 14px; margin: 0 0 14px;
}
.hashira-app-edit__group legend {
    font-weight: 600; font-size: var(--hashira-text-13, 13px);
    padding: 0 6px; color: var(--hashira-color-brand-green-dark, #1B5E20);
}
.hashira-app-edit__field { display: block; margin: 0 0 10px; }
.hashira-app-edit__field span {
    display: block; font-size: var(--hashira-text-12, 12px);
    color: var(--hashira-color-ink-soft, #5A564B); margin: 0 0 4px;
}
.hashira-app-edit__field input,
.hashira-app-edit__field textarea {
    width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 1px solid var(--hashira-color-border, #DAD3BE);
    border-radius: 7px; font-size: var(--hashira-text-14, 14px);
    background: #fff; color: var(--hashira-color-ink, #2B2A26);
}
.hashira-app-edit__field input:focus,
.hashira-app-edit__field textarea:focus {
    outline: none; border-color: var(--hashira-color-brand-green, #3B6D11);
}
.hashira-app-edit__row { display: flex; gap: 10px; }
.hashira-app-edit__row .hashira-app-edit__field { flex: 1; }
.hashira-app-edit__field--narrow { max-width: 120px; }
.hashira-app-edit__doc-note {
    font-size: var(--hashira-text-12, 12px);
    color: var(--hashira-color-ink-soft, #5A564B); margin: 0 0 8px; line-height: 1.4;
}
.hashira-app-edit__footer {
    display: flex; gap: 10px; padding-top: 6px;
    border-top: 1px solid var(--hashira-color-border, #DAD3BE); margin-top: 4px;
}
.hashira-decision-panel__edit { margin-left: 10px; }
@media (max-width: 420px) {
    .hashira-app-edit__row { flex-direction: column; gap: 0; }
    .hashira-app-edit__field--narrow { max-width: none; }
}