/* Kin OS — application shell.
 *
 * One shell for every module. A module contributes a secondary rail and page content and
 * nothing else; it never repeats the frame.
 *
 * P7.2 composition, from the reference screenshots: a dark chrome top bar runs the full width;
 * the dark primary rail sits beneath it; the module rail and the white working surface follow.
 * Rails animate their widths (320ms) so opening a module reads as the navigation physically
 * making room; the rails' inner columns hold full width and clip during flight so text never
 * rewraps mid-motion. Rail state is route-driven — see ShellPolicy.
 *
 *   ┌──────────────────────────────────────────────────────┐
 *   │ topbar: wordmark │ crumbs …            bell gear     │  chrome
 *   ├─────────┬──────────┬─────────────────────────────────┤
 *   │ rail    │ module   │ content (white, scrolls on its  │
 *   │ (dark)  │ rail     │ own; Home's hero bleeds dark)   │
 *   │ …foot   │ (light)  │                                 │
 *   └─────────┴──────────┴─────────────────────────────────┘
 */

.kin-app {
    display: grid;
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    height: 100dvh;
    background: var(--brand-canvas);
    color: var(--brand-ink);
}

/* Three tracks, and the middle one is 0 until a module asks for it.
 *
 * IT WAS FOUR FOR ONE COMMIT (87499ba), when an area's subsections had a column of their own.
 * They are nested inside rail 2 now and the fourth track went with them (P25-206). */
.kin-app { grid-template-columns: var(--rail-width) 0 minmax(0, 1fr); }
.kin-app.has-module-rail { grid-template-columns: var(--rail-width) var(--rail-secondary-width) minmax(0, 1fr); }
.kin-app.rail-collapsed { grid-template-columns: var(--rail-width-collapsed) 0 minmax(0, 1fr); }
.kin-app.rail-collapsed.has-module-rail { grid-template-columns: var(--rail-width-collapsed) var(--rail-secondary-width) minmax(0, 1fr); }

/* ---- Top bar — one frame with the rail, across the whole application ----------------------
 * It already spanned every column (grid-column: 1 / -1), but it was painted in the deeper
 * --brand-chrome while the rail beneath it used --brand-rail. Two darks meeting at the rail's
 * top corner made the header read as though it began where the rail ended (P7.4 §2-3). It now
 * takes the RAIL's colours, so header and rail are one continuous structural frame, and the
 * deeper chrome is left to the Home hero alone:
 *
 *     top bar + primary rail    --brand-rail      the structural brand dark
 *     Home hero                 --brand-chrome    a deeper tone of the same brand
 *     working area              --paper-0         white
 */

.kin-topbar {
    grid-row: 1;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-4) 0 var(--space-5);
    background: var(--brand-topbar);
    color: var(--brand-rail-ink);
}

.kin-topbar-brand {
    display: inline-flex;
    align-items: center;
    color: var(--brand-rail-ink);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
    margin-left: calc(-1 * var(--space-2));
}

.kin-topbar-divider {
    width: 1px;
    height: 1.35rem;
    background: var(--brand-topbar-line);
    flex: none;
}

.kin-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--brand-rail-muted);
    min-width: 0;
    flex: 1 1 auto;
    /* THE TRAIL IS CLIPPED, NOT PAINTED OVER THE ICONS (P15 §responsive-accessibility#3).
       At 375px the nav shrinks to its flex share of 132px while its content is 210px, and with
       nothing clipping it 66px of the current page name was drawn underneath the Notifications
       and Settings buttons. */
    overflow: hidden;
}

.kin-crumbs a {
    color: var(--brand-rail-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.2rem;
    transition: color var(--motion-fast) var(--ease);
}

.kin-crumbs a:hover { color: var(--brand-rail-ink); text-decoration: underline; }
.kin-crumb-sep { opacity: 0.45; }

/* The current page is the crumb that must survive a narrow bar, so it is the one allowed to
   shrink and it ends in an ellipsis rather than disappearing under something. */
.kin-crumb-current {
    color: var(--brand-rail-ink);
    font-weight: var(--weight-semibold);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kin-topbar-actions { display: flex; align-items: center; gap: var(--space-2); }

.kin-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-topbar-hover);
    color: var(--brand-rail-ink);
    cursor: default;
    transition: background var(--motion-fast) var(--ease);
}

.kin-topbar-icon:hover { background: var(--brand-topbar-line); }

/* The cog is a real link now, so it gets a pointer and an active state — the same accent the
   rail uses for the screen you are on, because it is the same statement (P10.1 §10.1.2). The
   disabled bell keeps the default cursor from the rule above. */
a.kin-topbar-icon { cursor: pointer; }

.kin-topbar-icon.active {
    background: var(--brand-rail-accent);
    color: var(--brand-rail-accent-ink, var(--brand-rail));
}

.kin-topbar-icon.active:hover { background: var(--brand-rail-accent); }

/* A top-bar control that CARRIES A WORD, for the Backup control beside Notifications (P15).
 *
 * The round icon buttons above are right for a control whose meaning is fixed — a bell is
 * always notifications. The backup control has to say something that changes: when the last
 * run was and whether it verified. An icon-only version of that could only differ by colour,
 * and colour is never the only signal in Kin OS (KD-086) — so it gets a label and the label
 * does the work. The icon changes with the state as well, so the two agree.
 *
 * Same height, same ground, same hover and the same active accent as the icon buttons beside
 * it, because it belongs to that row rather than being an ornament dropped into it. */
.kin-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 34px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 999px;
    background: var(--brand-topbar-hover);
    color: var(--brand-rail-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease);
}

.kin-topbar-status:hover { background: var(--brand-topbar-line); }

.kin-topbar-status.active {
    background: var(--brand-rail-accent);
    color: var(--brand-rail-accent-ink, var(--brand-rail));
}

.kin-topbar-status.active:hover { background: var(--brand-rail-accent); }

/* Narrow bars keep the control and lose the words. The accessible name and the title still
 * carry the whole sentence, so nothing is lost but the space. */
@media (max-width: 1100px) {
    .kin-topbar-status-label { display: none; }

    .kin-topbar-status {
        width: 34px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

.kin-topbar :focus-visible { outline-color: var(--brand-rail-accent); }

/* ---- Primary rail — the brand dark, from under the top bar to the floor ------------------- */

.kin-rail {
    grid-row: 2;
    grid-column: 1;
    width: var(--rail-width);
    background: var(--brand-rail);
    color: var(--brand-rail-ink);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* transform is in the base list so crossing the 860px boundary animates the drawer BOTH
       ways. */
    transition: width var(--motion-rail) var(--ease-rail),
                transform var(--motion-rail) var(--ease-rail);
}

.kin-app.rail-collapsed .kin-rail { width: var(--rail-width-collapsed); }

.kin-rail-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) var(--space-2) var(--space-3);
    /* The inner column keeps full width so nothing rewraps while the rail animates. */
    min-width: var(--rail-width);
}

.kin-rail-foot {
    flex: none;
    padding: var(--space-2);
    border-top: 1px solid var(--brand-rail-line);
    min-width: var(--rail-width);
}

.kin-app.rail-collapsed .kin-rail-nav,
.kin-app.rail-collapsed .kin-rail-foot { min-width: var(--rail-width-collapsed); }

/* Functional grouping is a visual aid only — see ModuleCatalog. Small, faded headings per the
   reference; collapsed, the label yields to a short rule so the grouping stays legible. */
.kin-rail-group + .kin-rail-group { margin-top: var(--space-4); }

.kin-rail-group-title {
    position: relative;
    height: 1.3rem;
    margin: 0 var(--space-3) var(--space-1);
}

.kin-rail-group-title span {
    font-size: 0.66rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* 62%, not 46% (P15 §responsive-accessibility#6). This is 10.56px letterspaced capitals —
       the hardest text on the screen to read — and at 46% it measured 4.19:1 on TalentCorp and
       3.78:1 on TalentSmith, whose rail ink is Sandstone rather than white. "Small and faded"
       was the intent; below AA was not. 62% is 6.29 / 6.88 / 6.27 / 5.89 across the four rails,
       and the hierarchy survives: items 78%, these 62%, planned 58%, collapse 55%.
       BrandContrastTests computes every one of these mixes. */
    color: color-mix(in srgb, var(--brand-rail-ink) 62%, var(--brand-rail));
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--motion) var(--ease);
}

.kin-rail-group-title::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 24px;
    height: 1px;
    background: var(--brand-rail-line);
    opacity: 0;
    transition: opacity var(--motion) var(--ease);
}

.kin-app.rail-collapsed .kin-rail-group-title span { opacity: 0; }
.kin-app.rail-collapsed .kin-rail-group-title::after { opacity: 1; }

/* Items. The icon never moves: it sits at a fixed inset in both states, so collapsing reads
   as the labels receding, not the whole rail re-laying itself out. */
.kin-rail-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.44rem var(--space-3);
    margin-bottom: 1px;
    border-radius: var(--radius);
    color: var(--brand-rail-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.kin-rail-item svg { flex: none; }

.kin-rail-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transition: opacity var(--motion) var(--ease);
}

/* The avatar chip is the profile item's icon — it stays when labels recede. */
.kin-app.rail-collapsed .kin-rail-item > span:not(.kin-rail-avatar) { opacity: 0; }

.kin-rail-item:hover { background: var(--brand-rail-hover); color: var(--brand-rail-ink); text-decoration: none; }

/* The active module is marked by an accent bar as well as by ground and weight, so it stays
   obvious when the rail is collapsed to icons. */
.kin-rail-item.active {
    background: var(--brand-rail-active);
    color: var(--brand-rail-ink);
    font-weight: var(--weight-semibold);
    box-shadow: inset 3px 0 0 var(--brand-rail-accent);
}

/* Planned modules are quiet but still legible — a colour step down its own rail ramp. No hover
   ground and no pointer: a surface that lights up promises a click it cannot honour.
   58%, not 42%: at 42% "still legible" was 3.37:1 on TalentSmith. The step down from a live
   item is now carried by weight and by the missing hover ground as much as by the colour,
   which is how KD-086 says state should be told apart anyway. */
.kin-rail-item.is-unavailable {
    color: color-mix(in srgb, var(--brand-rail-ink) 58%, var(--brand-rail));
    cursor: default;
}

.kin-rail-item.is-unavailable:hover {
    background: transparent;
    color: color-mix(in srgb, var(--brand-rail-ink) 58%, var(--brand-rail));
}

/* ---- The rail foot: Suggestions · My profile · Sign out · Collapse menu (P7.2 §16) --------- */

.kin-rail-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: -2px -2px -2px -2px;
    border-radius: 50%;
    background: var(--brand-rail-active);
    color: var(--brand-rail-ink);
    font-size: 0.62rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
}

.kin-rail-foot .kin-dev-badge { margin-left: 0.45em; }

/* The collapse control is deliberately the most muted thing on the rail — muted, and readable.
   At 40% it was 3.16:1 on TalentSmith, the lowest ratio anywhere in the product. 55% keeps it
   the quietest of the four rail voices at 4.90:1 or better, and the regular weight beside every
   other item's medium is still doing most of the work. */
.kin-rail-collapse {
    color: color-mix(in srgb, var(--brand-rail-ink) 55%, var(--brand-rail));
    font-weight: var(--weight-regular);
}

.kin-dev-badge {
    flex: none;
    padding: 0.02rem 0.32rem;
    border-radius: var(--radius-sm);
    background: var(--state-note-bg);
    border: 1px solid var(--state-note-line);
    color: var(--state-note-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
}

/* ---- Secondary rail — light, quiet, and animated by its track ------------------------------ */

.kin-rail-2 {
    grid-row: 2;
    grid-column: 2;
    width: var(--rail-secondary-width);
    overflow: hidden;
    background: var(--brand-soft);
    border-right: 1px solid var(--brand-line);
    transition: width var(--motion-rail) var(--ease-rail),
                border-color var(--motion-rail) var(--ease-rail);
}

/* Closed: zero width and no visible edge. The element stays, so the closing is a slide. */
.kin-app:not(.has-module-rail) .kin-rail-2 {
    width: 0;
    border-right-color: transparent;
}

.kin-rail-2-inner {
    width: var(--rail-secondary-width);
    height: 100%;
    overflow-y: auto;
    padding: var(--space-5) var(--space-3);
}

/* The module's name as a small letterspaced label, per the reference inner navigation. */
.kin-rail-2-head { padding: 0 var(--space-3) var(--space-3); }

.kin-rail-2-module {
    font-size: 0.66rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-muted);
}

/* A group of areas under one business-purpose heading (P8.2 §8.2.7).

   The heading borrows the module label's voice exactly — the same size, letterspacing and muted
   colour as .kin-rail-2-module — because it is the same kind of thing one level down. Making it
   look different would suggest it does something different. */
.kin-rail-2-group + .kin-rail-2-group { margin-top: var(--space-4); }

.kin-rail-2-group-title {
    padding: 0 var(--space-3) var(--space-2);
    font-size: 0.66rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-muted);
}

/* AN UNGROUPED RUN ABOVE THE FIRST GROUP — CORE'S OWN OVERVIEW LINK — KEEPS ITS DISTANCE.
 *
 * That sentence was already here, above .kin-rail-2-group:first-child, and that selector is the
 * one case it cannot describe: a group is the rail's first child exactly when there is no
 * ungrouped run above it to keep a distance from. Core's Overview declares no Group, so
 * ORGANISATION is the second child of .kin-rail-2-nav and matched nothing — the selected entry
 * and the next section heading ran together, which is what Jakes reported at P19 acceptance
 * Test 1. The rule fired only where it was not needed and stayed silent where it was.
 *
 * A run of areas ending and a new section heading beginning is ONE relationship, and
 * .kin-rail-2-group + .kin-rail-2-group already owns it at --space-4. This is that same boundary
 * with an ungrouped run on the near side, so it takes the same token rather than a distance of
 * its own; the two boundaries in one rail reading differently is the thing being repaired.
 *
 * STRUCTURAL, NOT SELECTED-STATE. The separation is between the run and the heading, so it is
 * the same whichever Core area is open — including none of them. Hanging it off .active would
 * make the rail change shape as the reader moves through it. */
.kin-rail-2-branch + .kin-rail-2-group { margin-top: var(--space-4); }

/* A group that genuinely is first needs only a lead-in from the module label above it. */
.kin-rail-2-group:first-child { margin-top: var(--space-3); }

.kin-rail-2-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.42rem var(--space-3);
    margin-bottom: 1px;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--brand-muted);
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.kin-rail-2-item:hover { background: var(--brand-hover); color: var(--brand-ink); text-decoration: none; }

/* Active: the reference's quiet grey chip and weight — no coloured bar in the inner rail. */
.kin-rail-2-item.active {
    background: var(--paper-3);
    color: var(--brand-ink);
    font-weight: var(--weight-semibold);
}

.kin-rail-2-item.is-unavailable { opacity: 0.5; cursor: default; }
.kin-rail-2-item.is-unavailable:hover { background: transparent; color: var(--brand-muted); }

/* ---- An area's subsections, nested in rail 2 (DEC-UX-003 as amended, P25-206) ---------------
 *
 * THEY HAD A RAIL OF THEIR OWN FOR ONE COMMIT. 87499ba gave them a third column, and on a
 * subsection page that measured 464px of navigation before any content: a collapsed primary
 * rail, a 212px module rail and a 188px subsection rail, to show seven links. Jakes rejected the
 * proportion on sight and chose a disclosure inside the module rail instead, which is the
 * pattern the tool this replaces already uses.
 *
 * The nesting is drawn as an indent and a lighter weight rather than as a second surface. A
 * boxed sub-list inside a rail reads as a rail inside a rail, which is the thing that was too
 * heavy in the first place. One rail, two levels, and the level you are on is the one that is
 * emphasised.
 *
 * THE CHEVRON IS A CONTROL, and it is the only click-driven rail state in Kin OS. See
 * SecondaryRail for why that is scoped safely: it discloses a list, and never decides whether
 * the rail exists or how wide it is. */

.kin-rail-2-branch { display: contents; }

.kin-rail-2-row { display: flex; align-items: stretch; gap: 1px; }

.kin-rail-2-row .kin-rail-2-item { flex: 1 1 auto; min-width: 0; }

/* Square, quiet, and the same height as the label beside it, so the row reads as one item with
   an affordance rather than as an item and a button. */
.kin-rail-2-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand-muted);
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease);
}

.kin-rail-2-toggle:hover { background: var(--paper-3); color: var(--brand-ink); }

.kin-rail-2-toggle:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: -2px;
}

/* The indent is the whole signal that these belong to the item above, so it is a rule down the
   left rather than a margin: a margin alone would leave four links floating at an offset with
   nothing saying what they hang from. */
.kin-rail-2-sections {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 1px 0 var(--space-2) var(--space-4);
    padding-left: var(--space-2);
    border-left: 1px solid var(--brand-line);
}

.kin-rail-2-section {
    display: block;
    padding: calc(var(--space-1) + 1px) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--brand-muted);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.3;
}

.kin-rail-2-section:hover { background: var(--paper-3); color: var(--brand-ink); }

/* The selected subsection carries the emphasis, and its parent keeps the quieter active ground
   from .kin-rail-2-item.active. Two levels of highlight, so the rail says both which area you
   are in and which page of it you are on. */
.kin-rail-2-section.active {
    background: var(--paper-3);
    color: var(--brand-ink);
    font-weight: var(--weight-semibold);
}

.kin-rail-2-section:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: -2px;
}

/* ---- Work area — white, scrolling on its own ------------------------------------------------ */

.kin-workarea {
    grid-row: 2;
    grid-column: 3;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--brand-canvas);
}

.kin-content {
    flex: 1 1 auto;
    overflow-y: auto;
    position: relative;
    padding: 0 var(--space-6) var(--space-7);
}

/* No reading cap on the working area at all (P7.5, second pass).
 *
 * It was a centred 1440px column, which on a wide monitor left a band of empty white between
 * the rail and the first tile — and an equal one on the right — while the hero above ran the
 * full width. The content read as though it had drifted away from the navigation.
 *
 * Nothing is lost by removing it: the blocks that are actually prose cap their own measure
 * (.kin-page-lede, .kin-hero-lede, both 64ch), and the tiles and tables are grids that should
 * use the width they are given. The column's own padding is the gutter.
 *
 * ITS OWN LAYER, WITH OR WITHOUT AN ENTRANCE (P40-110X). An entrance that fills forwards keeps
 * the column a stacking context after it ends, so the pop-ups inside a page, the Columns panel
 * and a combo box at z-index 20, always stacked under the drawer and its scrim. A document's first
 * page now wears no entrance, and without this the same pop-ups would paint over the open drawer
 * on that page alone and take its clicks. Measured in a static harness (Chromium 152): with
 * neither entrance a z-index 20 pop-up later in the page is on top of a z-index 20 fixed rail;
 * with a finished entrance, or with this, the rail is. EntranceMotionTests holds it. */
.kin-content-inner { max-width: none; isolation: isolate; }

/* Route changes replay a short rise-and-fade — two identical animations alternated by the
   layout, restarting the motion without re-creating the page inside the wrapper. A document's
   first page wears neither, prerendered or drawn again by the circuit, so only a navigation
   inside the circuit enters (P40-110X). */
.kin-content-enter-a { animation: kin-content-enter-a var(--motion-enter) var(--ease) both; }
.kin-content-enter-b { animation: kin-content-enter-b var(--motion-enter) var(--ease) both; }

@keyframes kin-content-enter-a {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

@keyframes kin-content-enter-b {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

/* Reduced motion: the page change keeps a brief opacity-only entrance — the rise goes, the
   sequence stays. RDP sessions report reduced motion by default, so without this every
   in-app navigation on a hosted Kin OS would be an instant swap with no sense of arrival.
   Fade-only keyframes, real duration, out-cascading the global collapse in tokens.css. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kin-content-enter-a {
        animation: kin-app-arrive var(--motion-fade) var(--ease) both !important;
    }

    :root:not([data-motion="full"]) .kin-content-enter-b {
        animation: kin-app-arrive-b var(--motion-fade) var(--ease) both !important;
    }
}

/* No arrival on the shell (P40-110X). The whole shell used to fade in from transparent on every
   full page load, a composed arrival (P7). On a full load that painted the page blank first, and
   when the circuit attached and Blazor replaced the prerendered page with its own, the fade began
   again. Jakes's recording of signing in to Home (Monday 657897202) shows both, a pale page
   fading in and then the drawn Home washing out and back, and the P40-110X trace measured
   kin-app-arrive starting twice per load. So a full load now paints the shell at once, and the
   first page in it wears no content entrance either (WorkspaceLayout). Restoring the arrival is
   one rule here. The two keyframes stay: the reduced-motion content entrance above uses them. */

@keyframes kin-app-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Identical twin for the reduced-motion content flip: alternating NAMES is what restarts the
   entrance on navigation (same device as kin-content-enter-a/b). */
@keyframes kin-app-arrive-b {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kin-drawer-scrim { display: none; }

/* ---- Responsive -----------------------------------------------------------------------------
 * Desktop operational use is primary. Two steps down:
 *   1100px — the module rail becomes a horizontal strip above the content
 *    860px — the primary rail becomes an overlay drawer opened from the top bar
 */

@media (max-width: 1100px) {
    .kin-app,
    .kin-app.has-module-rail,
    .kin-app.rail-collapsed,
    .kin-app.rail-collapsed.has-module-rail {
        grid-template-columns: var(--rail-width) minmax(0, 1fr);
        grid-template-rows: var(--header-height) auto minmax(0, 1fr);
    }

    .kin-app.rail-collapsed,
    .kin-app.rail-collapsed.has-module-rail {
        grid-template-columns: var(--rail-width-collapsed) minmax(0, 1fr);
    }

    .kin-rail { grid-row: 2 / -1; }

    .kin-rail-2 {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--brand-line);
        transition: none;
    }

    .kin-app:not(.has-module-rail) .kin-rail-2 { display: none; }

    .kin-rail-2-inner {
        width: auto;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 var(--space-4);
        /* The strip is scrolled to the current area by shell.js after every navigation (P15
           §responsive-accessibility#2); this is the air it leaves beside it, so the active
           item never lands flush against the cut edge. */
        scroll-padding-inline: var(--space-4);
    }

    .kin-rail-2-inner nav { display: flex; align-items: center; gap: var(--space-4); }
    .kin-rail-2-head { padding: var(--space-3) 0; white-space: nowrap; }
    .kin-rail-2-nav { display: flex; gap: var(--space-1); padding: var(--space-2) 0; }
    .kin-rail-2-item { white-space: nowrap; margin-bottom: 0; }

    /* Below this width the rail is a horizontal strip, so the groups lay out along it and
       their headings sit in front of their items rather than above them. The heading stays —
       a strip of eleven scrolling items with no signposts is worse than a column of eleven. */
    .kin-rail-2-group {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .kin-rail-2-group + .kin-rail-2-group {
        margin-top: 0;
        margin-left: var(--space-3);
        padding-left: var(--space-3);
        border-left: 1px solid var(--brand-line);
    }

    /* The same boundary as in the column, turned on its side. Here the run above the first group
       is Overview sitting inline, and without this it was separated from ORGANISATION by the
       strip's --space-1 gap while every later section boundary got --space-3 and a rule. The
       column margin is cleared because at this width the boundary is horizontal. */
    .kin-rail-2-branch + .kin-rail-2-group {
        margin-top: 0;
        margin-left: var(--space-3);
        padding-left: var(--space-3);
        border-left: 1px solid var(--brand-line);
    }

    .kin-rail-2-group:first-child { margin-top: 0; }

    .kin-rail-2-group-title { padding: 0 var(--space-1) 0 0; white-space: nowrap; }

    /* THE SUBSECTIONS FLATTEN INTO THE STRIP, and only the open area's do.
     *
     * Below this width rail 2 is one horizontal scrolling line, and a nested disclosure has
     * nowhere to hang: an indented sub-list inside a single row of items is not a hierarchy, it
     * is a longer row. So the indent, the rule and the chevron all go, and the open area's
     * subsections follow it inline as ordinary items one weight lighter.
     *
     * The chevron goes rather than being restyled because there is nothing for it to do here:
     * with no column to indent into, "collapsed" and "expanded" would look the same. Which
     * subsections show is therefore route-driven at this width, which is also the shell's
     * default rule everywhere else. */
    .kin-rail-2-branch { display: contents; }
    .kin-rail-2-row { display: contents; }
    .kin-rail-2-toggle { display: none; }

    .kin-rail-2-sections {
        flex-direction: row;
        gap: var(--space-1);
        margin: 0;
        padding-left: var(--space-2);
        border-left: 1px solid var(--brand-line);
    }

    .kin-rail-2-section { white-space: nowrap; }

    .kin-workarea { grid-column: 2; grid-row: 3; }
    .kin-app:not(.has-module-rail) .kin-workarea { grid-row: 2 / -1; }

    .kin-content { padding: 0 var(--space-5) var(--space-6); }
}

@media (max-width: 860px) {
    /* The rail leaves the flow and becomes an overlay drawer, so one column is enough. */
    .kin-app,
    .kin-app.has-module-rail,
    .kin-app.rail-collapsed,
    .kin-app.rail-collapsed.has-module-rail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--header-height) auto minmax(0, 1fr);
    }

    .kin-rail {
        position: fixed;
        inset: var(--header-height) auto 0 0;
        z-index: 20;
        width: var(--rail-width);
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }

    .kin-app[data-drawer="open"] .kin-rail { transform: translateX(0); }

    /* Collapsed is a desktop idea. In a drawer there is room for the labels, and the collapse
       control would visibly do nothing — so it goes too.

       THE SELECTOR HAS TO MATCH THE ONE IT OVERRIDES, `:not()` INCLUDED (P15
       §journey-shell-home#1). Written as `.kin-rail-item > span` it was three classes and an
       element against the desktop collapse rule's four and an element, so it lost on
       specificity despite coming later — and every route inside a module carries
       rail-collapsed. Measured at 768px inside Core: eight items, all eight labels at opacity
       0, and Sign out and My profile unreadable in a 234px drawer of anonymous icons. The
       group titles were fine only because their two rules happen to weigh the same. */
    .kin-rail-collapse { display: none; }
    .kin-app.rail-collapsed .kin-rail { width: var(--rail-width); }
    .kin-app.rail-collapsed .kin-rail-item > span:not(.kin-rail-avatar),
    .kin-app.rail-collapsed .kin-rail-group-title span { opacity: 1; }
    .kin-app.rail-collapsed .kin-rail-group-title::after { opacity: 0; }
    .kin-app.rail-collapsed .kin-rail-nav,
    .kin-app.rail-collapsed .kin-rail-foot { min-width: var(--rail-width); }

    .kin-app[data-drawer="open"] .kin-drawer-scrim {
        display: block;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        z-index: 19;
        background: rgba(10, 16, 26, 0.42);
        border: 0;
    }

    .kin-rail-2 { grid-column: 1; grid-row: 2; }
    .kin-workarea { grid-column: 1; grid-row: 3; }
    .kin-app:not(.has-module-rail) .kin-workarea { grid-row: 2 / -1; }

    .kin-content { padding: 0 var(--space-4) var(--space-6); }
    .kin-topbar { padding: 0 var(--space-3) 0 var(--space-4); gap: var(--space-3); }
    .kin-topbar-divider { display: none; }
}

/* On a phone the trail is one crumb: the one you are standing on.
 *
 * Clipping alone still spends most of a 132px bar on "Home / Core /" and ellipsises the only
 * word that answers where-am-I. Below 560px — the width entry.css already treats as a phone —
 * the ancestors go and the current page name gets the whole bar. Nothing is lost: every page
 * carries an unconditional BackLink (KD-195) and the drawer holds the rest of the navigation. */
@media (max-width: 560px) {
    .kin-crumbs a,
    .kin-crumb-sep { display: none; }
}

/* The drawer button is only meaningful once the rail is an overlay. */
.kin-drawer-btn { display: none; }
@media (max-width: 860px) { .kin-drawer-btn { display: inline-flex; cursor: pointer; } }

/* ---- Global Search in the top bar (P32-202, KR-P3-05) ------------------------------------ */

/* The box sits between the trail and the actions and takes the slack in that row, so a wide
 * bar gives it room and a narrow one gives it to the crumbs first. It is not present at all
 * for an identity with no reachable provider, so there is no disabled state to style.
 *
 * `position: relative` is what the results panel hangs from. The panel is the only thing in
 * the top bar that overlays the workspace beneath it, which is why it carries the lift shadow
 * the cards use rather than the flat chrome the bar does. */
.kin-topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    min-width: 0;
}

/* Narrower than a register's box, because it shares a row with the trail and the actions
 * rather than owning a card head. */
.kin-topbar-search-box { width: 260px; min-width: 180px; }

/* Below the bar, aligned to the box's right edge so it never runs off a narrow window. The
 * height ceiling is a scroll rather than a cut: ten rows per provider is a peek, and the
 * register is one click further on for anybody who wants the list. */
.kin-search-results {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 40;
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: var(--shadow-lg);
}

.kin-search-empty {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    color: var(--brand-muted);
    font-size: var(--text-sm);
}

/* Which provider a run of results came from. Quiet, because it is a heading over an answer
 * rather than the answer. */
.kin-search-group {
    margin: var(--space-2) 0 var(--space-1);
    padding: 0 var(--space-3);
    color: var(--brand-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kin-search-result {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--brand-ink);
    font-size: var(--text-sm);
    text-decoration: none;
}

.kin-search-result:hover { background: var(--brand-hover); }

.kin-search-result-label { font-weight: var(--weight-medium); }

/* The second line is the thing that tells two people with the same name apart, so it is
 * present and quiet rather than absent. It never carries a matched value — see SearchResult. */
.kin-search-result-second {
    margin-left: auto;
    color: var(--brand-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
}

/* A bar with no room for both loses the search before it loses the trail: somebody reading a
 * narrow window needs to know where they are more than they need to look for somewhere else. */
@media (max-width: 1100px) {
    .kin-topbar-search { display: none; }
}