/* ============================================================
   Korni Hire — Haberkorn design system
   (extends and consolidates the prototype in /korni-hire)
   ============================================================ */

:root {
    /* --- Brand palette (HSL channels for hsl(var(--token)) usage) --- */
    --background: 0 0% 100%;
    --foreground: 215 25% 17%;

    --muted: 210 30% 96%;
    --muted-foreground: 215 14% 45%;

    --border: 213 25% 87%;
    --input: 213 25% 80%;
    --ring: 201 100% 37%;

    --primary: 201 100% 37%;          /* Haberkorn blue #007abc */
    --primary-foreground: 0 0% 100%;

    --secondary: 201 80% 94%;
    --secondary-foreground: 201 80% 25%;

    --destructive: 351 70% 50%;
    --warning: 35 100% 50%;
    --success: 89 60% 38%;

    --radius: 8px;

    --hk-font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hk-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;
    --hk-tracking: 0.01em;

    --workflow-gutter: 24px;
    --workflow-panel-radius: 12px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-family: var(--hk-font-sans);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: var(--hk-tracking);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--hk-font-mono); }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Buttons ------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 0 14px;
    height: 36px;
    border-radius: var(--radius);
    font-family: var(--hk-font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--hk-tracking);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
    background: transparent;
    color: hsl(var(--foreground));
    text-decoration: none;
    white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring) / .25); }

.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }

.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover:not(:disabled) { background: hsl(var(--primary) / .9); }

.btn-outline { border-color: hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.btn-outline:hover:not(:disabled) { background: hsl(var(--muted)); border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }

.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
.btn-ghost:hover:not(:disabled) { background: hsl(var(--muted)); color: hsl(var(--primary)); }

/* --- Inputs ------------------------------------------------- */
.input, .select, .textarea {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--hk-font-sans);
    font-size: 13px;
    letter-spacing: var(--hk-tracking);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select { appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
    padding-right: 32px;
}
.textarea {
    width: 100%; height: auto;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
    min-height: 120px;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 3px hsl(var(--ring) / .15);
}
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }

/* --- Avatar / kbd ------------------------------------------- */
.avatar {
    width: 32px; height: 32px; border-radius: 999px;
    background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.kh-avatar-img {
    width: 40px; height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.kbd {
    display: inline-flex; align-items: center;
    padding: 2px 6px; border-radius: 4px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    font-family: var(--hk-font-mono);
    font-size: 10px; font-weight: 700;
    color: hsl(var(--muted-foreground));
}

/* --- App shell ---------------------------------------------- */
.kh-shell {
    display: flex; flex-direction: column;
    height: 100vh; width: 100vw; overflow: hidden;
    background: hsl(var(--muted));
}

.kh-topbar {
    height: 64px; padding: 0 24px;
    background: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
    display: flex; align-items: center; gap: 16px;
    flex: none;
}
.kh-topbar .logo { height: 28px; }
.kh-topbar .product {
    display: flex; flex-direction: column; gap: 1px;
    padding-left: 16px; margin-left: 4px;
    border-left: 1px solid hsl(var(--border));
}
.kh-topbar .product .eyebrow {
    font-family: var(--hk-font-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}
.kh-topbar .product .name {
    font-size: 14px; font-weight: 800;
    letter-spacing: .01em; color: hsl(var(--foreground));
}

.kh-topbar-chips { display: flex; gap: 6px; align-items: center; }
.kh-chip {
    height: 24px; padding: 0 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
    background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
    display: inline-flex; align-items: center; gap: 6px;
}
.kh-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: hsl(var(--primary)); }

/* --- Two-pane workflow -------------------------------------- */
.kh-workspace {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--workflow-gutter);
    padding: var(--workflow-gutter);
    overflow: hidden;
}

.kh-pane {
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: var(--workflow-panel-radius);
    display: flex; flex-direction: column;
    min-height: 0; overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

.kh-pane-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid hsl(var(--border));
    flex: none;
}
.kh-pane-header .titles { display: flex; flex-direction: column; gap: 2px; }
.kh-pane-header .eyebrow {
    font-family: var(--hk-font-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}
.kh-pane-header .title {
    font-size: 16px; font-weight: 800; letter-spacing: .01em;
    color: hsl(var(--foreground));
}
.kh-pane-actions { display: flex; gap: 8px; align-items: center; }
.kh-pane-body { flex: 1; overflow: auto; padding: 24px; }

/* --- Section block ----------------------------------------- */
.kh-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.kh-section:last-child { margin-bottom: 0; }
.kh-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kh-section-head h4 {
    margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .01em;
    color: hsl(var(--foreground));
}
.kh-section-head .actions { display: flex; gap: 6px; }
.kh-section-head .actions form { margin: 0; }

.kh-section-sub {
    font-size: 13px; font-weight: 700; font-style: italic; letter-spacing: .01em;
    color: hsl(var(--primary));
}
.kh-section-body {
    font-size: 14px; line-height: 22px; letter-spacing: .01em;
    color: hsl(var(--foreground));
}
.kh-section-body p { margin: 0 0 8px; }
.kh-section-body p:last-child { margin-bottom: 0; }
.kh-section-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.kh-section-body ul li::marker { color: hsl(var(--primary)); }

/* --- Form field group --------------------------------------- */
.kh-field { display: flex; flex-direction: column; gap: 6px; }
.kh-field label {
    font-family: var(--hk-font-sans);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}
.kh-field label .req { color: hsl(var(--destructive)); margin-left: 2px; }
.kh-field .helper { font-size: 12px; color: hsl(var(--muted-foreground)); letter-spacing: .01em; }
.kh-field .helper.error { color: hsl(var(--destructive)); }
.kh-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- Segmented control -------------------------------------- */
.kh-segmented {
    display: inline-flex; padding: 3px; gap: 2px;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
}
.kh-segmented .kh-seg {
    height: 30px; padding: 0 14px; border: 0; background: transparent;
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .01em;
    border-radius: 6px; cursor: pointer;
    color: hsl(var(--muted-foreground));
    transition: all .15s ease;
}
.kh-segmented .kh-seg.active {
    background: hsl(var(--background));
    color: hsl(var(--primary));
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* --- Alert / Callout --------------------------------------- */
.kh-alert {
    display: flex; gap: 12px;
    padding: 14px 16px; border-radius: 8px;
    border: 1px solid; margin-bottom: 16px;
}
.kh-alert .alert-ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.kh-alert .alert-body { flex: 1; min-width: 0; }
.kh-alert h5 { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.kh-alert p, .kh-alert ul { margin: 0; font-size: 13px; line-height: 20px; letter-spacing: .01em; }
.kh-alert ul { padding-left: 18px; margin-top: 6px; }
.kh-alert ul li { margin-bottom: 2px; }

.kh-alert.info     { background: hsl(var(--primary) / .07);     border-color: hsl(var(--primary) / .25);     color: hsl(201 70% 28%); }
.kh-alert.info h5  { color: hsl(var(--primary)); }
.kh-alert.warning  { background: hsl(var(--warning) / .12);     border-color: hsl(var(--warning) / .35);     color: hsl(35 80% 24%); }
.kh-alert.warning h5 { color: hsl(35 100% 30%); }
.kh-alert.danger   { background: hsl(var(--destructive) / .08); border-color: hsl(var(--destructive) / .30); color: hsl(351 60% 30%); }
.kh-alert.danger h5  { color: hsl(351 70% 45%); }
.kh-alert.success  { background: hsl(var(--success) / .10);     border-color: hsl(var(--success) / .35);     color: hsl(89 50% 22%); }
.kh-alert.success h5 { color: hsl(89 60% 30%); }

/* --- Empty state ------------------------------------------- */
.kh-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 16px; padding: 32px; text-align: center;
}
.kh-empty .ico {
    width: 64px; height: 64px; border-radius: 50%;
    background: hsl(var(--secondary)); color: hsl(var(--primary));
    display: flex; align-items: center; justify-content: center;
}
.kh-empty h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.kh-empty p {
    margin: 0; max-width: 380px;
    font-size: 14px; line-height: 22px; color: hsl(var(--muted-foreground));
}
.kh-empty .hints {
    margin-top: 8px; display: flex; flex-direction: column; gap: 6px;
    font-size: 12px; color: hsl(var(--muted-foreground));
}
.kh-empty .hints .kbd-pair { display: inline-flex; align-items: center; gap: 6px; }

/* --- Trace strip ------------------------------------------- */
.kh-trace {
    margin-top: 24px; padding: 10px 14px;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    font-family: var(--hk-font-mono);
    font-size: 11px; letter-spacing: .03em;
    color: hsl(var(--muted-foreground));
    display: flex; gap: 16px; flex-wrap: wrap;
}
.kh-trace b { color: hsl(var(--foreground)); font-weight: 700; }
.kh-trace .ok { color: hsl(89 60% 30%); }
.kh-trace .bad { color: hsl(351 70% 45%); }

/* --- Copy button confirmation ------------------------------ */
.kh-copy[data-state="copied"] { color: hsl(89 60% 30%); }

/* --- Footer ------------------------------------------------- */
.kh-footer {
    padding: 8px 24px;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: hsl(var(--muted-foreground));
    letter-spacing: .01em;
    flex: none;
}

/* --- Job ad title bar inside output ------------------------ */
.kh-jobad-head {
    padding-bottom: 16px; margin-bottom: 20px;
    border-bottom: 1px solid hsl(var(--border));
}
.kh-jobad-head h2 {
    margin: 0; font-size: 24px; font-weight: 800; letter-spacing: .01em;
    color: hsl(var(--primary));
}
.kh-jobad-head h2 .all-genders {
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}
.kh-jobad-head .meta-row {
    margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap;
}
.kh-jobad-head .meta {
    display: inline-flex; gap: 6px; align-items: center;
    font-size: 12px; color: hsl(var(--muted-foreground));
    letter-spacing: .01em;
}
.kh-jobad-head .meta b { color: hsl(var(--foreground)); font-weight: 700; }

/* --- Inline lucide icon sizing ------------------------------ */
[data-lucide] { display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: -2px; }
.btn [data-lucide] { width: 14px; height: 14px; }
.btn-sm [data-lucide] { width: 13px; height: 13px; }
.btn-lg [data-lucide] { width: 16px; height: 16px; }

/* --- Optional metadata panel inside input pane -------------- */
.kh-meta-block {
    padding: 14px;
    background: hsl(var(--muted));
    border-radius: 8px;
    margin-bottom: 20px;
}
.kh-meta-block .meta-eyebrow {
    font-family: var(--hk-font-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin-bottom: 12px;
}

.kh-input-footnote {
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid hsl(var(--border));
    font-size: 11px; color: hsl(var(--muted-foreground)); line-height: 1.5;
}

/* --- Accessibility helpers --------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}