/*
 * The two utilities the base layout itself writes, and the only sheet every
 * page of this product loads.
 *
 * WHY A SECOND CORE SHEET RATHER THAN A BLOCK IN THE TOKEN SHEET
 *
 * The token sheet states, in its own first paragraph, that nothing in it lays
 * anything out: it is named values and one default, and a rule that positions
 * something belongs with the component it positions. Both rules below position
 * something. Written there they would be the first exception to a rule that has
 * held, and the second exception is always easier to argue than the first.
 *
 * They are not component rules either. The elements they address are written in
 * `templates/core/layout.tpl` -- the skip link by name, the clipped span by
 * every surface that has a word for a reader and no room to draw it -- so the
 * component that owns them is the layout, and this is the layout's sheet.
 *
 * THE SKIP LINK WAS IN EVERY PAGE AND STYLED IN NONE
 *
 * `templates/core/layout.tpl` has emitted `<a class="a360-skip">` since the
 * layout was written. No sheet this product serves declared that class on a
 * screen: the one rule anywhere naming it is a print rule in the transcript
 * sheet that removes it from paper. So the link rendered as an ordinary link at
 * the top of the body of every page -- the console, the embedded conversation
 * window, all forty-five administration screens.
 *
 * That is not a conformance failure. A visible skip link satisfies 2.4.1
 * exactly as a clipped one does, and it is the failure mode to prefer: a reader
 * who needs it can always see it. It is a design defect, and it is the sort
 * that survives review for a long time, because the people who read the screen
 * do not use the link and the people who use the link do not mind the paint.
 *
 * Clipped until it holds the keyboard is what it should have been, and the
 * clipping has to keep the element in the tab sequence -- `display: none` and
 * `hidden` take it out of the accessibility tree, which would leave a product
 * whose skip link cannot be skipped to.
 *
 * THE CLIPPED SPAN, MOVED HERE RATHER THAN SPELLED A THIRD TIME
 *
 * `a360-visually-hidden` was declared in `public/assets/visitor/patterns.css`,
 * which the visitor surface loads and the console does not. The console needs
 * the same idiom -- the switchboard has a word about a tab that there is no
 * room to draw -- and the third spelling of one idea is how this product ends
 * up unable to say which of the three was the decision. It is one spelling, in
 * the sheet every surface already has.
 *
 * The administration kit still declares `a360-offscreen`, which is the same
 * idiom under a second name. That is recorded as a gap in
 * `docs/04-accessibility.md` with an owner rather than repaired here: the kit's
 * class is named in administration templates, a check holds every kit class to
 * being defined in the kit sheet, and a rename that touches both is a change
 * for the surface that owns them.
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 * Copyright (C) 2026 Astral Internet inc.
 */

/*
 * Out of sight, still in the page.
 *
 * display: none and hidden take the element out of the accessibility tree as
 * well as off the screen, which is right for something nobody should reach and
 * wrong for every use here -- an announcer nobody hears, a label nothing is
 * named by, the word that says which of six sorts a conversation line is.
 * Clipped, the element keeps its place in the reading order and in the tab
 * sequence.
 *
 * The size is one pixel rather than nought because an element of no size is one
 * some engines decline to place at all, and a control that is not placed is a
 * control that cannot take focus.
 */
.a360-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * The way past the chrome, clipped until somebody tabs to it.
 *
 * The clip is the same idiom as above and is written out rather than shared,
 * because the two elements part company the moment one of them is focused and a
 * rule that only sometimes applies to half its subjects is a rule nobody can
 * read. It is also what tells the pointer-target check that a control one pixel
 * across is one pixel across on purpose.
 */
.a360-skip {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * And back onto the screen, at the start of the page, the moment it has the
 * keyboard.
 *
 * The clip is released rather than overridden one property at a time: an
 * element that is still absolutely positioned at one pixel with its clip
 * removed is an element painted underneath whatever the page begins with. The
 * inset offsets are logical, so the link appears at the start of the line in
 * both directions rather than always on the left.
 *
 * `--link` on `--surface` measures 4.52 and the ring measures 4.50 against the
 * same ground, so the one control a keyboard reader meets before anything else
 * clears both thresholds on every surface this layout renders.
 */
.a360-skip:focus-visible {
    background: var(--surface);
    block-size: auto;
    clip-path: none;
    color: var(--link);
    inline-size: auto;
    inset-block-start: 0;
    inset-inline-start: 0;
    outline: var(--focus-ring-width) solid var(--brand-edge);
    outline-offset: var(--focus-ring-offset);
    padding: 0.5rem 0.75rem;
    z-index: 1000;
}