/* TXM brand layer for the staff app: the brand typeface, the tokens the redesign adds to app.css,
   and parts shared by every page (navigation, breadcrumbs, buttons, save status, toast, connection). */
@font-face {
    font-family: "Noto Sans Display";
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 62.5% 100%;
    font-display: swap;
    src: url("/careers/fonts/noto-sans-display-latin.woff2") format("woff2");
}

:root {
    --txm-font: "Noto Sans Display", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Buttons and links: 5.5:1 on white. Brand blue (#4d7dbf) is 4.2:1, so it marks rules and focus. */
    --txm-blue-strong: #3b6aa8;
    --txm-blue-line: #c4d3ea;
    /* Control borders: 3.4:1 on white. */
    --txm-field: #7d8e9a;
    /* Functional colour for errors and overdue work only; not part of the brand palette. */
    --txm-attn: #9c5121;
    --txm-attn-tint: #f9efe6;
    --txm-attn-line: #e8c9ae;
    /* Noto Sans Display Condensed, as the brand guide sets body copy. */
    font-stretch: 75%;
}

select, input, textarea { border-color: var(--txm-field); border-radius: 4px; }

/* Navigation: a blue rule marks the current page, echoing the brand's vertical rules. */
nav a::before { display: none; }
nav a svg { flex-shrink: 0; color: var(--muted); }
nav a.active { box-shadow: inset 3px 0 0 var(--txm-blue); font-weight: 700; }
nav a.active svg { color: var(--txm-blue-strong); }

.crumbs { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 16px; }
.crumbs a { color: var(--txm-blue-strong); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* Page titles carry the brand's thin blue rule. */
.page-heading > div:first-child, .titled { padding-left: 20px; border-left: 4px solid var(--txm-blue); }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding: 0; overflow: hidden; }
.home-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 48px; }
.home-hero h1 { margin: 6px 0 0; font: condensed 700 60px/.96 var(--txm-font); letter-spacing: .01em; text-transform: uppercase; }
.home-hero p { margin: 0; max-width: 440px; color: var(--txm-dark-gray); font-size: 19px; line-height: 1.5; }
.home-hero img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
@media (max-width: 900px) { .home-hero { grid-template-columns: 1fr; } }

/* Buttons and small text actions */
.button.outline { border-color: var(--txm-blue-strong); color: var(--txm-blue-deep); }
.button.danger { border-color: var(--txm-attn); background: var(--txm-attn); color: #fff; }
.button.small { min-height: 40px; padding: 0 12px; font-size: 14px; }
.button:disabled { cursor: not-allowed; }
.text-button { min-height: 44px; color: var(--txm-blue-strong); font-weight: 600; }
.notice.attention { border-color: var(--txm-attn-line); background: var(--txm-attn-tint); }
.notice p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The result of a save, beside its button */
.save-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 15px; }
.save-status.saved { color: var(--green); font-weight: 600; }
.save-status.error { color: var(--txm-attn); font-weight: 600; }

.spin { animation: txm-spin .9s linear infinite; }
@keyframes txm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Toast: a confirmation in the corner that never blocks the page. */
.toast {
    position: fixed;
    top: 80px;
    right: 32px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(460px, calc(100vw - 32px));
    padding: 10px 10px 10px 18px;
    border-radius: 6px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 16px 40px rgba(31, 46, 40, .24);
}
.toast-icon { flex-shrink: 0; color: var(--txm-green); }
.toast-icon.info { color: #a9c4e8; }
.toast-text { flex-grow: 1; line-height: 1.35; }
.toast-undo {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #a9c4e8;
    border-radius: 4px;
    background: transparent;
    color: #a9c4e8;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.toast-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: #d3dae3; cursor: pointer; }

/* Connection status. Blazor adds these classes while it reconnects; the pill never covers the page,
   so typing carries on and txm-drafts.js keeps unsaved text on the device. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 60;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border: 1px solid var(--txm-blue-line);
    border-radius: 999px;
    background: var(--txm-blue-soft);
    color: var(--ink);
    font-size: 15px;
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(31, 46, 40, .16);
}
#components-reconnect-modal > span { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
#components-reconnect-modal.components-reconnect-show .reconnect-show,
#components-reconnect-modal.components-reconnect-failed .reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected { display: inline; }
#components-reconnect-modal.components-reconnect-failed { border-color: var(--txm-attn-line); background: var(--txm-attn-tint); }
.reconnect-retry { margin-left: 8px; border: 0; background: none; color: var(--txm-blue-strong); font-weight: 700; cursor: pointer; }