/* AHFONT is a licensed font, not yet present at static/fonts/AHFONT.woff2.
   ponytail: @font-face is commented out until the file exists — a 404'ing
   font still makes the browser hold text invisible during its load-attempt
   on every page, which is the lag/jump between the icon and the words.
   Uncomment (and restore font-display: optional) once AHFONT.woff2 is added. */
/*
@font-face {
    font-family: "AHFONT";
    src: url("/static/fonts/AHFONT.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: optional;
}
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: #000;
    color: #fff;
    animation: fade-in 0.2s ease-in;
    font-family: "AHFONT", Arial, Helvetica, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: #fff;
}

/* Skip link: visually hidden until focused. */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -200%;
    z-index: 10;
    padding: 0.75rem 1rem;
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
}

:root {
    /* The shell's edge padding. Shared, so the paginated home nav can inset
       each page by exactly the same amount (see .nav-page). */
    --page-pad: clamp(1rem, 4vw, 3rem);
}

/* Shared page shell. */
.page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: var(--page-pad);
}

/* Landing page: navigation centered horizontally, top-aligned like every
   other page. .page only sets min-height (so other page types can grow with
   content), but the paginated nav below needs a hard cap here: flex-basis
   and overflow-y: auto on a descendant only clip against a definite
   ancestor height, not an auto one, so without this the nav-pager would
   just grow to fit all pages and the whole document would scroll instead. */
.page--home {
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    height: 100dvh;
}

/* Invisible stand-in for a section title: reserves the same height a
   .page--section header takes (title line-height + its margin-bottom) so the
   nav list starts at the same vertical position as it does on section pages,
   without showing a title on the home page itself. */
.home-title-spacer {
    visibility: hidden;
    font-size: clamp(2rem, 7vw, 4.5rem);
    line-height: 1.1;
    margin: 0 0 2rem;
}

.navigation {
    width: min(96vw, 48rem);
}

/* Default (tall viewport): the two lists just stack and read as one
   continuous menu. No scrolling, no dots. */
.nav-pager {
    display: block;
}

.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation li {
    margin: 0;
}

.nav-dots {
    display: none;
}

.navigation a {
    display: block;
    padding: 0.6rem 0;
    color: #fff;
    font-size: clamp(2rem, 7vw, 4.5rem);
    line-height: 1.1;
    text-decoration: none;
    /* Center each menu item on the page. Links are block-level and fill the
       .navigation column, so centering their text centers the label. */
    text-align: center;
    /* Long labels like "Purchase Orders" should stay on one line rather than
       wrap inside the narrow 34rem column. */
    white-space: nowrap;
    /* Transparent border keeps layout stable when focus/hover adds an outline. */
    border: 2px solid transparent;
    min-height: 44px;
}

.navigation a:focus-visible {
    border-color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    outline: none;
}

/* Coming-soon landing page: a single line that reads like one entry of the
   main menu. It reuses the .navigation column, so it inherits the column
   width and the JS-flex layout; this just gives the text itself the exact
   same size/line-height/centering as a .navigation a entry. */
.coming-soon {
    margin: 0;
    padding: 0.6rem 0;
    font-size: clamp(2rem, 7vw, 4.5rem);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

/* The home navigation is paginated by app.js: the single .nav-items list is
   broken into full-height "pages" that hold as many items as fit, the rest
   overflowing onto later pages. .page--home scroll-snaps between pages, and
   a column of dot buttons on the side reflects / switches the current page
   (the current page's dot is filled). Without JS the single list is shown
   as-is. */

/* Unpaginated, the shell keeps its normal padding (top AND bottom) and the
   .home-title-spacer so the main menu's top position stays exactly where it
   was — aligned with section pages. The navigation column then fills the
   remaining height below the spacer, which is also what app.js measures to
   decide how many items fit on a page. */
:root.js .navigation {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Before JS runs (or when everything fits on one page) the pager is a flex
   child holding the source list at the top of the content area. */
:root.js .nav-pager {
    flex: 1 1 auto;
    min-height: 0;
}

/* Once JS paginates, .page--home itself (not the pager) becomes the
   scroll/snap area, and its edge padding moves inside each .nav-page. That
   inset is then page content rather than a gap outside the scroll box, so an
   exiting page's items stay visible sliding through it and are only clipped
   at the true screen edge — top and bottom alike. With no padding or spacer
   left outside the pages, each page is exactly one scrollport tall and page
   starts fall on exact multiples of it, so every snap point lands with the
   same inset and there is no dead scroll range past the last page. */
:root.js .page--home.is-paged {
    padding: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

:root.js .page--home.is-paged::-webkit-scrollbar {
    display: none;
}

@media not (prefers-reduced-motion: reduce) {
    :root.js .page--home.is-paged {
        scroll-behavior: smooth;
    }
}

/* The shell's own spacer is hidden and app.js clones it into every page
   instead, so each page (not just the first) starts its items on the
   section-title line — and that height stays defined in exactly one place
   rather than being re-derived as a duplicated calc. */
:root.js .page--home.is-paged > .home-title-spacer {
    display: none;
}

/* Pages are exactly one scrollport tall. The top inset is this padding plus
   the cloned spacer; app.js reserves the same amount again at the bottom
   when filling a page, so a full page's inset reads the same top and
   bottom. */
:root.js .page--home.is-paged .nav-page {
    height: 100%;
    min-height: 0;
    padding-top: var(--page-pad);
    padding-bottom: var(--page-pad);
}

/* Each page stacks its items from the top and reserves side clearance for
   the fixed dot indicator; its vertical inset is set above, once paged. */
:root.js .nav-page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    padding-right: calc(clamp(0.5rem, 3vw, 1.5rem) + 44px + 0.75rem);
    padding-left: calc(clamp(0.5rem, 3vw, 1.5rem) + 44px + 0.75rem);
    scroll-snap-align: start;
    box-sizing: border-box;
}

/* Dots: a fixed column on the right edge, one per page, built by app.js. */
:root.js .nav-dots.has-dots {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: fixed;
    top: 50%;
    right: clamp(0.5rem, 3vw, 1.5rem);
    transform: translateY(-50%);
    z-index: 5;
}

.nav-dot {
    /* Reset the native <button> chrome so the dot is the only visible
       affordance. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    position: relative;
    width: 44px;
    height: 44px;
}

.nav-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
}

.nav-dot[aria-current="true"]::before {
    background: #fff;
}

.nav-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Section / error pages share a single-column shell. The column matches the
   width of the home navigation (min(90vw, 48rem)) and is centered, so the page
   title's left edge aligns with the navigation menu. 48rem (vs. the nav text's
   narrower 34rem feel) is wide enough that the longest title, "Roles &
   Permissions", still fits beside the chevron on one line at its full
   clamp(2rem, 7vw, 4.5rem) size without shrinking the font. */
.page--section {
    display: block;
    max-width: min(96vw, 48rem);
    margin: 0 auto;
    width: 100%;
    padding: clamp(1rem, 4vw, 3rem) 0;
}

/* The section header is a 3-track grid: [back chevron] [title] [add icon].
   The two outer 1fr tracks are always equal width, so the title's auto-width
   center track sits exactly at the column's center — the title is centered on
   the page regardless of the chevron/add-icon widths, while the chevron pins
   to the far left and the add icon to the far right. Vertical centering comes
   from `align-items: center`, so all three share the same Y position. */
.section-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 2rem;
}

.add-icon {
    display: block;
    justify-self: end;
    width: clamp(1.5rem, 4.5vw, 2.5rem);
    height: clamp(1.5rem, 4.5vw, 2.5rem);
    /* Same white-on-black treatment as .chevron-icon: flatten to black, then
       invert to white. */
    filter: brightness(0) invert(1);
}

.back {
    justify-self: start;
    margin: 0;
    line-height: 1;
}

.chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
    text-decoration: none;
    padding: 0;
    /* Transparent border keeps layout stable for the focus outline. */
    border: 2px solid transparent;
    min-height: 44px;
}

.chevron-icon {
    display: block;
    width: clamp(1.5rem, 4.5vw, 2.5rem);
    height: clamp(1.5rem, 4.5vw, 2.5rem);
    /* The source SVG is a dark glyph; this filter forces it to solid white so it
       is visible on the black background. brightness(0) first flattens any
       color to black, invert(1) flips it to white. */
    filter: brightness(0) invert(1);
}

/* Hover is intentionally a no-op to keep the interface calm and static. */

.chevron:focus-visible {
    border-color: #fff;
    outline: none;
}

.page--section h1 {
    /* Match the site's normal navigation text so section titles are consistent
       with the home page menu and the sub-page links (e.g. Customers / Sales
       Orders) beneath them: same size, line-height, and weight (normal, not
       the browser's bold h1 default). white-space: nowrap plus the wider
       .page--section column (48rem) keep even "Roles & Permissions" on one
       line instead of wrapping. text-align: center is what actually centers
       the title within its grid track (see .section-header); nowrap means the
       track is exactly the text width, so centering is exact. */
    font-size: clamp(2rem, 7vw, 4.5rem);
    line-height: 1.1;
    font-weight: inherit;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

/* Login form: same column width as the section shell, fields stacked and
   centered like the rest of the app's text-forward layout. */
.login-form {
    width: 100%;
    margin: 0 auto;
}

.continue-text {
    margin: 1.5rem 0 0;
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: #fff;
    text-align: center;
}

.field {
    position: relative;
    display: block;
    width: 100%;
    font-size: clamp(1.25rem, 4vw, 2rem);
    padding: 0 var(--page-pad);
}

.field input {
    width: 100%;
    background: #000;
    color: #fff;
    border: 0;
    border-bottom: 2px solid #fff;
    padding: 0.6rem 0;
    font: inherit;
    min-height: 44px;
    outline: none;
}

.field button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.page--error p {
    margin-top: 1rem;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    max-width: 40rem;
}

/* Page transitions: a short fade in on load and fade out before
   internal navigation. Scoped under the `js` class (added by an inline head
   script) so no-JS users always see a fully opaque page. */
:root.js body {
    opacity: 0;
    animation: page-fade-in 0.25s ease forwards;
}

:root.js body.page-leaving {
    animation: page-fade-out 0.18s ease forwards;
}

@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes page-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Respect reduced-motion: disable transitions entirely. */
@media (prefers-reduced-motion: reduce) {
    :root.js body,
    :root.js body.page-leaving {
        animation: none;
        opacity: 1;
    }
}

/* Visually hidden but available to assistive technology. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Respect reduced-motion preferences. There is intentionally no animation in
   this design; this guard prevents any future additions from moving. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}