/* Kin OS — workspace entry: the selector, the barn-door transition and the branded entry pages.
 *
 * These screens follow the approved P7.2 reference closely: a clean light-neutral ground, the
 * group identity, four compact white cards each carrying only its brand's wordmark and accent
 * bar; then a dark brand environment with a white sign-in panel.
 */

.kin-entry {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper-2);
    color: var(--brand-ink);
}

.kin-entry-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-5);
}

/* ---- Workspace selector ---------------------------------------------------------------------
 * Visually self-explanatory (P7.2 §2): the group identity, "Select your workspace", four
 * brands. No explanatory copy anywhere. The rows rise in once on arrival. */

.kin-selector {
    width: 100%;
    max-width: 470px;
    /* The neutral ground's tokens, captured before each row switches itself to its own brand,
       so brand identity comes in and brand furniture stays out. */
    --group-surface: var(--paper-0);
    --group-line: var(--brand-line);
    --group-ink: var(--brand-ink);
    --group-muted: var(--brand-muted);
}

.kin-selector-head {
    text-align: center;
    margin-bottom: var(--space-6);
    animation: kin-entry-rise var(--motion-enter) var(--ease) both;
}

.kin-selector-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.kin-selector-group .kin-wordmark { font-size: 2.1rem; }

.kin-selector-group-suffix,
.kin-login-group {
    font-family: var(--brand-font);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-muted);
}

/* The page's h1 on both selectors (P40-110W), drawn as the title always was: base.css already
   clears a heading's margin, and the body's leading is restated so the heading's tighter one
   does not move the cards. The empty-state line reuses the class as a div. */
.kin-selector-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -0.015em;
    line-height: var(--leading-normal);
}

.kin-selector-list { display: flex; flex-direction: column; gap: var(--space-4); }

/* KinSSO's own sign-out, offered on the public selector after a central sign-out, sits clear of
   the first card rather than against it (P40-110W). */
.kin-selector > .kin-login-note { margin-bottom: var(--space-4); }

.kin-selector-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: 21px var(--space-4) 21px var(--space-5);
    background: var(--group-surface);
    border: 1px solid color-mix(in srgb, var(--group-line) 55%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: var(--group-ink);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    animation: kin-entry-rise var(--motion-enter) var(--ease) both;
    transition: box-shadow var(--motion) var(--ease),
                transform var(--motion) var(--ease);
}

/* Arrival choreography: the head, then each workspace, a beat apart. Token-derived delays so
   reduced-motion collapses them along with the durations. */
.kin-selector-option:nth-child(1) { animation-delay: calc(var(--motion-enter) * 0.25); }
.kin-selector-option:nth-child(2) { animation-delay: calc(var(--motion-enter) * 0.5); }
.kin-selector-option:nth-child(3) { animation-delay: calc(var(--motion-enter) * 0.75); }
.kin-selector-option:nth-child(4) { animation-delay: calc(var(--motion-enter) * 1); }

@keyframes kin-entry-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* The brand's identifying bar — its raw accent, per the approved reference: slate for
   TalentCorp, lime for HelloKindred, the red run of the ramp for CapacityCo, coral for
   TalentSmith. A rounded pill hugging the card's left edge, never text (P7.2 §6). */
.kin-selector-accent {
    /* Absolute, so the bar spans the card's full height rather than only the content box
       between the paddings — in the reference it runs edge to edge, inset a hair. */
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 6px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-bar);
}

.kin-selector-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: var(--space-1) 0;
}

.kin-selector-body .kin-wordmark { font-size: 1.45rem; }

.kin-selector-go {
    flex: none;
    color: var(--group-muted);
    transition: transform var(--motion) var(--ease), color var(--motion) var(--ease);
}

.kin-selector-option:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.kin-selector-option:hover .kin-selector-go { transform: translateX(4px); color: var(--group-ink); }

.kin-selector-option[disabled] { cursor: progress; }

/* ---- The workspace door journey (P7.3, from the original's hand-off spec) -------------------
 * Two full-height panels split down the centre, HINGED ON THEIR OUTER EDGES, swinging outward
 * in 3D — double doors opening towards the viewer — while the whole assembly scales up past
 * the camera and the destination rises from depth to meet you. It is NOT a slide: nothing
 * translates; rotateY + the perspective container + the outer transform-origin ARE the
 * effect, and translateX would produce a flat parting curtain.
 *
 * The panels are a photograph of the page: shell.js clones the current screen into each leaf
 * (each showing its own half), so at the instant they appear nothing looks added. Appended to
 * document.body, outside the Blazor root, so navigation cannot remove them; the login renders
 * BEHIND them and arrives through the opening. ~2s from click to fully open (Jakes's P7.3
 * timing over the original's 1050ms): --motion-doors 1700ms + a short render lead.
 *
 * Reduced motion re-expresses the SAME open/closed states in opacity: leaves fade instead of
 * swinging, the arrival loses scale and blur. One flow, two expressions (KD-108).
 *
 * Nothing here may trap navigation: every frame wait is paired with a timer, the overlay
 * always removes itself, and pointer-events:none means it can never eat a click. */

.kin-doors {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    perspective: 1100px;
    perspective-origin: 50% 45%;    /* eye level, not geometric centre */
    transform-style: preserve-3d;
    transition: transform var(--motion-doors) var(--ease-doors);
}

/* Scaling the CONTAINER is what turns "a door opens" into "you move through it". */
.kin-doors[data-open] { transform: scale(1.45); }

.kin-door {
    position: absolute;
    top: -1px;                      /* 1px bleed kills sub-pixel edge lines */
    bottom: -1px;
    width: 50.5%;                   /* 0.5% overlap: no seam gap at any viewport width */
    overflow: hidden;
    background: var(--paper-2);
    backface-visibility: hidden;    /* load-bearing — see the 112deg note below */
    will-change: transform;
    transition: transform var(--motion-doors) var(--ease-doors),
                box-shadow var(--motion-doors) ease,
                opacity var(--motion-doors) var(--ease);
}

/* Each leaf's viewport-sized window onto the clone: left leaf shows the left half, right
   leaf the right half, so together they ARE the screen until they move. The leaves keep the
   default flat transform-style, so the clone flattens into the leaf's plane and vanishes
   with it past 90°. */
.kin-door-view {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

/* Hinged on the OUTER edges. This is what makes them doors. */
.kin-door-l { left: 0; transform-origin: left center; }
.kin-door-l .kin-door-view { left: 0; }

.kin-door-r { right: 0; transform-origin: right center; }
.kin-door-r .kin-door-view { right: 0; }

/* A hairline down the seam, so the closed pair reads as two doors, not one flat surface. */
.kin-door-l::after,
.kin-door-r::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(22, 32, 46, 0.10);
}

.kin-door-l::after { right: 0; }
.kin-door-r::after { left: 0; }

/* Depth as they swing — the panels cast into the room behind them. */
.kin-doors[data-open] .kin-door { box-shadow: 0 0 90px rgba(0, 0, 0, 0.5); }

/* 112°, not 90: past 90 the leaf faces away and backface-visibility stops drawing it at
   exactly the moment the viewer passes between the two. Stopping at 90 leaves them hanging. */
.kin-doors[data-open] .kin-door-l { transform: rotateY(-112deg); }
.kin-doors[data-open] .kin-door-r { transform: rotateY(112deg); }

/* Suppresses transitions for one frame so the reverse journey can PLANT the doors already
   open before telling them to close. */
.kin-doors.kin-doors-instant,
.kin-doors.kin-doors-instant .kin-door { transition: none !important; }

/* The destination comes to meet you: while a door journey is running (shell.js marks the
   root), the login's view rises from far away, out of focus. The starting scale is
   deliberately deep — subtler reads as a fade, not travel — and the blur is depth-of-field.
   Its easing starts slightly earlier than the doors' so the two never feel mechanically
   linked. The panel's own entrance stands down; the journey owns the arrival. */
.kin-doors-travel .kin-login-main {
    animation: kin-arrive var(--motion-doors) cubic-bezier(0.28, 0.06, 0.18, 1) both;
}

.kin-doors-travel .kin-login-panel { animation: none; }

/* The reverse: the login recedes back through the doorway. */
.kin-doors-travel-back .kin-login-main {
    animation: kin-depart var(--motion-doors) cubic-bezier(0.4, 0.02, 0.3, 1) both;
}

@keyframes kin-arrive {
    from { transform: scale(0.72) translateY(26px); opacity: 0; filter: blur(7px); }
    55%  { opacity: 1; }
    to   { transform: none; opacity: 1; filter: blur(0); }
}

@keyframes kin-depart {
    from { transform: none; opacity: 1; filter: blur(0); }
    60%  { opacity: 0.35; }
    to   { transform: scale(0.78) translateY(20px); opacity: 0; filter: blur(6px); }
}

/* Reduced motion: the SAME states, expressed in opacity — closed is opaque, open is clear —
   so the identical script flow (including planting the reverse open) becomes a crossfade.
   No swing, no scale, no blur; real durations, out-cascading the global collapse (KD-108). */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kin-doors,
    :root:not([data-motion="full"]) .kin-doors[data-open] { transform: none !important; }

    :root:not([data-motion="full"]) .kin-door {
        transform: none !important;
        transition: opacity var(--motion-doors) var(--ease) !important;
    }

    :root:not([data-motion="full"]) .kin-doors[data-open] .kin-door {
        opacity: 0;
        box-shadow: none;
    }

    :root:not([data-motion="full"]) .kin-doors-travel .kin-login-main {
        animation-name: kin-fade-through !important;
        animation-duration: var(--motion-doors) !important;
    }

    :root:not([data-motion="full"]) .kin-doors-travel-back .kin-login-main {
        animation-name: kin-fade-away !important;
        animation-duration: var(--motion-doors) !important;
    }
}

@keyframes kin-fade-through {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kin-fade-away {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ---- Branded entry page --------------------------------------------------------------------------
 * The reference sign-in: the brand's dark environment, a white rounded panel with the mark,
 * the group affiliation, the (development-disabled) credential fields and the brand's Sign In,
 * then the platform family and the way back beneath the panel. See WorkspaceLogin.razor for
 * why the fields are disabled rather than merely ignored.
 *
 * Every sign-in surface wears this shape (P40-110W). A workspace's own login, in its brand.
 * And, in the group identity because no workspace is in their address, the pages framed by
 * GroupEntryPanel (/identity, the refused sign-in, the two account states) and the pages
 * KinOsAuthentication builds outside the component system (the password link, the
 * confirmations, leaving for KinSSO, try again shortly), whose panel also carries .kin-auth. */

.kin-login {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--brand-deep-ink);
    background: var(--brand-chrome);
}

.kin-login-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-5);
}

.kin-login-panel {
    width: 100%;
    max-width: 410px;
    background: var(--paper-0);
    color: var(--brand-ink);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-6) var(--space-5);
    box-shadow: var(--shadow-lg);
    animation: kin-panel-in var(--motion-enter) var(--ease) both;
}

@keyframes kin-panel-in {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.kin-login-mark { display: flex; justify-content: center; margin-bottom: var(--space-3); }
.kin-login-mark .kin-wordmark { font-size: 1.95rem; }

/* The group line under the group mark: the selector's tracked caps, centred in the panel. */
.kin-login-group { text-align: center; }

/* The page's heading, where a page has one: the selector's title weight, centred. */
.kin-login-panel h1 {
    text-align: center;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -0.015em;
    margin: var(--space-3) 0 var(--space-5);
    text-wrap: balance;
}

.kin-login-panel > p,
.kin-login-panel .kin-entry-lede,
.kin-login-panel .kin-entry-note { text-align: center; }

.kin-login-panel .kin-entry-lede { font-size: var(--text-sm); }

/* An account state's facts, centred with the lines above and below them. */
.kin-login-panel .kin-detail-grid { margin-bottom: var(--space-5); text-align: center; }

/* A refusal's or an account state's way on: one full-width pill, as on the sign-in itself. */
.kin-login-panel .kin-actions { flex-direction: column; align-items: stretch; }
.kin-login-panel .kin-actions .kin-btn { width: 100%; white-space: normal; }

/* A refused sign-in that knows no workspace offers the public logins beneath its answer, as the
   selector's own cards (P40-113), set clear of the answer above them. */
.kin-login-panel .kin-selector { margin-top: var(--space-5); }

.kin-login-affiliation {
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}

.kin-login-continue {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--brand-muted);
    margin-bottom: var(--space-5);
}

.kin-login-form { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }

/* The reference labels its fields in sentence case, a size up from the workspace forms'
   caps micro-labels. */
.kin-login-form .kin-field > label {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--brand-ink);
}

.kin-login-form .kin-field input:disabled {
    background: var(--paper-1);
    color: var(--brand-muted);
}

.kin-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--brand-muted);
}

.kin-login-remember { display: inline-flex; align-items: center; gap: 0.45em; }
.kin-login-remember input { accent-color: var(--brand-ink); }

.kin-login-form .kin-btn,
.kin-login-panel .kin-actions .kin-btn,
.kin-auth button,
.kin-auth .button {
    justify-content: center;
    padding: 0.65rem 0.9rem;
    font-size: var(--text-base);
    border-radius: var(--radius-pill);
}

/* Kin OS credentials (P40-110): secondary to KinSSO, closed until chosen. */
.kin-login-local {
    border-top: 1px solid var(--paper-3);
    padding-top: var(--space-3);
}

.kin-login-local > summary {
    cursor: pointer;
    padding: var(--space-2) 0;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--brand-ink);
}

.kin-login-local > summary:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.kin-login-local-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.kin-login-error,
.kin-login-note,
.kin-auth .bad {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--paper-1);
    color: var(--brand-ink);
}

.kin-login-error,
.kin-auth .bad {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-ink);
}

/* ---- The pages built outside the component system (P40-110W) ------------------------------
 * KinOsAuthentication writes these bodies as plain HTML and they are deliberately left as they
 * are: their forms, ids and fields are what the security tests and the deployment verifier read.
 * So they are styled from here, inside the panel's .kin-auth, rather than by classes in them.
 *
 * THE PASSWORD PAGE HIDES ITS OWN FORM. With no link token its script sets the form's hidden
 * attribute and shows the "missing" paragraph instead. No stylesheet here may set display on a
 * form or a p inside .kin-auth or .kin-login-panel: an author display beats the browser's own
 * [hidden] rule, and the dead form would show beside the message. The [hidden] rule below says
 * it again, and says it as important: by weight alone it would only tie .kin-auth .button and
 * lose to .kin-auth input[type="password"], so a body that hid its button or a field the same
 * way would show it. SignInLookTests holds both. */

.kin-auth [hidden] { display: none !important; }

/* The page that leaves for KinSSO is on screen only until its refresh fires, so its panel stands
   still (P40-110X): the login it was posted from hands over to the same panel in the same brand,
   rather than to one fading in from transparent. The other pages here keep the entrance. */
.kin-login-panel.kin-auth-still { animation: none; }

.kin-auth p {
    font-size: var(--text-sm);
    color: var(--brand-muted);
}

.kin-auth label {
    display: block;
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--brand-ink);
}

.kin-auth input[type="password"] {
    display: block;
    width: 100%;
    padding: 0.48rem 0.6rem;
    border: 1px solid var(--brand-control-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
}

.kin-auth button,
.kin-auth .button {
    display: block;
    width: 100%;
    margin-top: var(--space-4);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-weight: var(--weight-semibold);
    background: var(--brand-action);
    color: var(--brand-action-ink);
    border: 1px solid color-mix(in srgb, var(--brand-action) 50%, var(--brand-action-ink));
    box-shadow: var(--shadow-sm);
    transition: background var(--motion-fast) var(--ease);
}

.kin-auth button:hover,
.kin-auth .button:hover {
    background: var(--brand-action-hover);
    text-decoration: none;
}

.kin-auth .cancel {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
}

.kin-auth .cancel a { color: var(--brand-ink); }

/* Honest, and quiet about it: one line, not a warning box. */
.kin-login-temp {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5em;
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--brand-muted);
    line-height: 1.5;
}

.kin-login-temp svg { flex: none; margin-top: 1px; }

/* Beneath the panel, on the dark ground: the platform family and the way back. */
.kin-login-under {
    width: 100%;
    max-width: 470px;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--brand-chrome-line);
    text-align: center;
    animation: kin-panel-in var(--motion-enter) var(--ease) both;
    animation-delay: calc(var(--motion-enter) * 0.4);
}

.kin-login-under-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-chrome-muted);
    margin-bottom: var(--space-4);
}

.kin-login-family {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    color: var(--brand-deep-ink);
}

.kin-login-family .kin-wordmark { font-size: 1.15rem; }

.kin-login-back {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--brand-chrome-muted);
}

.kin-login-back a { color: var(--brand-deep-ink); text-decoration-color: currentColor; }

@media (max-width: 560px) {
    .kin-entry-main { padding: var(--space-5) var(--space-4); }
    .kin-login-main { padding: var(--space-5) var(--space-4); }
    .kin-login-panel { padding: var(--space-5) var(--space-4); }
    .kin-selector-option { gap: var(--space-3); padding-right: var(--space-3); }
    .kin-selector-body .kin-wordmark { font-size: 1.2rem; }
    .kin-login-family { gap: var(--space-4); }
}

/* 16px, so a phone does not zoom the page when a field takes focus. Asked of the pointer as well
 * as the width: a phone held on its side is wider than 560px and zooms all the same. */
@media (max-width: 560px), (pointer: coarse) {
    .kin-login-panel input { font-size: 1rem; }
}

/* ---- The development identity page (P12) -----------------------------------------------------
 *
 * Not a branded entry page and deliberately not dressed as one. It is a development mechanism
 * standing in for authentication (KO-011), and making it look like a designed sign-in would be
 * the beginning of somebody believing it is one. It borrows the entry ground and nothing else.
 *
 * .kin-entry-card now serves only that development identity (P40-110W). The real sign-in and the
 * pages around it moved into GroupEntryPanel's login frame above. .kin-entry-lede and
 * .kin-entry-note still serve both, and the panel centres them. */

.kin-entry-card {
    width: 100%;
    max-width: 780px;
    margin: auto;
    padding: var(--space-6);
    background: var(--paper-0);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-lg);
    animation: kin-entry-rise var(--motion-enter) var(--ease) both;
}

.kin-entry-lede {
    color: var(--brand-muted);
    margin-bottom: var(--space-5);
}

.kin-entry-note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: var(--brand-muted);
}

/* ---- One entrance per page, not two (P40-110X) ------------------------------------------------
 * A full load paints the prerendered page and its entrance plays there. When the circuit
 * attaches, Blazor replaces that page with nodes of its own, and every entrance in this file then
 * started again from transparent: measured, the selector's head and rows and the login's panel
 * rose in twice. EntryLayout marks its root with data-entry-quiet while the circuit shows the page
 * it attached to, and these stand down until the first navigation inside the circuit, whose page
 * enters as designed. The door journey is the development build's, begun by a navigation, so it
 * is not listed. Every entrance an entry page wears is named here; EntranceMotionTests holds it.
 *
 * What this does not do: finish an entrance the circuit interrupts. The new nodes stand at their
 * last frame at once, so a circuit that attaches before the entrance ends shows the rest of it in
 * one step. On the loopback trace it attached 67 ms into the selector's 520 ms entrance, the head
 * a quarter in and the rows not yet under way, and 208 ms into the login's 364 ms. Letting it
 * finish means not starting the circuit until the entrance ends, up to half a second more before
 * an entry page is interactive; that choice is the owner's (P40-110X re-review). */
[data-entry-quiet] .kin-selector-head,
[data-entry-quiet] .kin-selector-option,
[data-entry-quiet] .kin-login-panel,
[data-entry-quiet] .kin-login-under,
[data-entry-quiet] .kin-entry-card { animation: none; }

/* A finished entrance still holds its last frame, and an animation outweighs every ordinary rule,
   so a selector card has never lifted on hover: the rise held its transform at none. Standing the
   entrance down would let the lift through on a quiet arrival alone, and the same card would hover
   two ways. The quiet root holds what the entrance held, so a card hovers alike however it arrived.
   EntranceMotionTests holds this for every property an entrance holds. */
[data-entry-quiet] .kin-selector-option:hover { transform: none; }