/* HP.CraftAuth — base reset + craft "gate card" + admin styles. Mobile-first, WCAG AA, one-handed. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--hp-font);
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ */
/* Craft "gate card" — the entire craft interaction surface           */
/* ------------------------------------------------------------------ */
.craft-body {
    min-height: 100dvh;
    background: var(--hp-charcoal);
    border-top: 3px solid var(--hp-red); /* HP-red brand spine */
}

.craft-shell {
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem) 1rem;
}

.craft-card {
    width: 100%;
    max-width: 28rem;
    background: var(--paper);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 5vw, 2rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.craft-logo {
    display: block;
    height: 2.25rem;
    width: auto;
    margin-bottom: 1.5rem;
    background: var(--hp-charcoal);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.craft-lang {
    text-align: right;
    margin-bottom: 0.25rem;
}

.craft-title {
    font-size: 1.75rem;   /* 28px */
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--ink);
    line-height: 1.2;
}

/* FocusOnNavigate focuses the <h1> for screen-reader announcement (tabindex -1). Suppress the UA
   outline box on that programmatic focus — the announcement still happens; only the visible ring is hidden. */
.craft-title:focus,
.craft-title:focus-visible { outline: none; }

.craft-body-text {
    font-size: 1.125rem;  /* 18px */
    color: var(--ink);
    margin: 0 0 1.25rem;
}

/* Fast-path prompt ("Already know your number?") sitting just above the primary Sign-in button. */
.craft-lead {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}

/* Section heading for the lookup path ("Don't know your number? Look it up:"). */
.craft-subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.75rem;
}

/* "or" divider between the sign-in fast path and the lookup path. */
.craft-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.95rem;
    margin: 1.75rem 0;
}
.craft-divider::before,
.craft-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--hp-light-gray);
}
.craft-divider span { padding: 0 0.75rem; }

.craft-help {
    font-size: 0.95rem;
    color: var(--ink-muted); /* AA on white */
    margin: 0.25rem 0 1.25rem;
}

.craft-help--center { text-align: center; margin-bottom: 0; }

/* "How this works" info tooltip. CSS-only: reveals on hover (desktop) and on tap via :focus-within (mobile). */
.craft-tip {
    position: relative;
    display: inline-block;
    margin: -0.25rem 0 1rem;
}
.craft-tip__icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0.375rem 0;
    margin: 0;
    color: var(--hp-red);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}
.craft-tip__glyph { flex: none; }
.craft-tip__icon:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.6);
}
.craft-tip__bubble {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: min(22rem, 80vw);
    margin-top: 0.25rem;
    background: var(--hp-charcoal);
    color: #fff;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    border-left: 4px solid var(--hp-yellow);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.craft-tip:hover .craft-tip__bubble,
.craft-tip:focus-within .craft-tip__bubble { display: block; }

.craft-fineprint {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 1rem;
}

/* The one moment of emphasis: the revealed employee number, with a yellow accent rule. */
.craft-reveal {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin: 0.25rem 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 4px solid var(--hp-yellow);
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.craft-label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 1rem 0 0.375rem;
}

.craft-input {
    display: block;
    width: 100%;
    font-family: var(--hp-font);
    font-size: 1.375rem;  /* 22px, above iOS auto-zoom threshold */
    padding: 0.75rem 0.875rem;
    min-height: var(--tap-min);
    border: 2px solid var(--hp-light-gray);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--paper);
}

/* Signature accent: high-visibility Wheatland-yellow focus ring (safety-tape "attention here"). */
.craft-input:focus-visible {
    outline: none;
    border-color: var(--hp-yellow);
    box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.45);
}

.craft-input--otp {
    font-size: 2rem;         /* 32px */
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.craft-btn {
    display: flex;               /* flex-center so it renders identically as <button> or <a> */
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: var(--hp-font);
    font-size: 1.125rem;
    font-weight: 500;
    min-height: 56px;
    padding: 0.875rem 1rem;
    margin-top: 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

/* Launch-SuccessFactors call to action on the reveal page: a little extra separation from the number. */
.craft-btn--cta { margin-top: 1.75rem; }

.craft-btn--primary {
    background: var(--hp-red);   /* red on white ≈ 6.5:1 AA */
    color: #fff;
}

.craft-btn--primary:hover { background: var(--hp-red-dark); }

.craft-btn--secondary {
    background: var(--paper);
    color: var(--hp-charcoal);
    border-color: var(--hp-light-gray);
}

.craft-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.6);
}

.craft-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--hp-red);
    font-weight: 500;
    text-decoration: underline;
}

.craft-link--muted { color: var(--ink-muted); }

.craft-alert {
    background: #FFF7E6;
    border-left: 4px solid var(--hp-yellow);
    padding: 0.75rem 0.875rem;
    border-radius: 4px;
    margin: 0 0 1rem;
    color: var(--ink);
}

/* Top-of-screen support note (e.g. "no SSN? call this number"). */
.craft-note {
    background: var(--hp-charcoal);
    color: #fff;
    padding: 0.75rem 0.875rem;
    border-radius: 6px;
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    border-left: 4px solid var(--hp-yellow);
}

.craft-error {
    color: var(--hp-red);   /* errors are red, never gray */
    font-weight: 500;
    margin: 0 0 1rem;
}

/* ------------------------------------------------------------------ */
/* Admin area (interactive server)                                     */
/* ------------------------------------------------------------------ */
.admin-shell {
    min-height: 100dvh;
    background: var(--surface, #F7F8F9);
    color: var(--ink);
}

.admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--hp-charcoal);
    color: #fff;
    border-bottom: 3px solid var(--hp-red);
}

.admin-brand { font-weight: 700; }
.admin-nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.admin-nav a { color: #fff; text-decoration: none; }
.admin-nav a:hover { text-decoration: underline; }

.admin-main { padding: 1.5rem 1.25rem; max-width: 72rem; margin: 0 auto; }

.admin-tiles { display: flex; flex-wrap: wrap; gap: 1rem; }
.admin-tile {
    background: var(--paper);
    border: 1px solid var(--hp-light-gray);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    min-width: 8rem;
    display: flex;
    flex-direction: column;
}
.admin-tile__n { font-size: 2rem; font-weight: 700; }

.admin-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--paper); }
.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--hp-light-gray);
    font-size: 0.95rem;
}
.admin-table th { background: #EFF1F2; }

.admin-btn {
    display: inline-block;
    background: var(--hp-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
}
.admin-link { background: none; border: none; color: var(--hp-red); cursor: pointer; text-decoration: underline; padding: 0 0.5rem; }
.admin-muted { color: var(--ink-muted); }
.admin-error { color: var(--hp-red); font-weight: 500; }
.admin-pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.admin-config-group { margin-bottom: 1.5rem; }

/* Small phones (≤ ~416px): keep the hero number and title comfortable without horizontal scroll. */
@media (max-width: 26rem) {
    .craft-title { font-size: 1.5rem; }
    .craft-reveal { font-size: 2.25rem; letter-spacing: 0.03em; }
    .craft-input--otp { letter-spacing: 0.3em; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}