/*
 * Application shell: a top header on the page paper, the work area right under it.
 *
 * The old kinvoice.app structure (product-kit.md §4a, layout 3): the wordmark on the left, the
 * role's menu beside it, the exit on the right, one centred column of --w-wide below. There is
 * no sidebar and no remembered menu state — a flat menu of at most seven items fits one row, and
 * on a phone it simply wraps under the wordmark (core.md §1.7 is read as «a flat list»).
 */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Header -------------------------------------------------------------------------- */

/* The header is the page colour, not a white bar: the chrome recedes and the sheet leads. */
.app-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.app-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-5);
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: var(--space-2) var(--space-3);
}

/* The wordmark as the live kinvoice.app draws it: the whole word bold in the third text tone, the
   first letter heavier and in the full text tone (owner, 23.10.2026). The footer brand is the same word. */
.app-header__brand,
.app-footer__wordmark {
    color: var(--text-3);
    font-weight: var(--fw-bold);
}

.app-header__brand {
    font-size: var(--fs-section);
    white-space: nowrap;
}

.app-header__brand b,
.app-footer__wordmark b {
    color: var(--text);
    font-weight: var(--fw-heavy);
}

.app-header__brand:hover {
    color: var(--text-3);
    text-decoration: none;
}

/* The groups of the menu stand in one row; the exit is pushed to the far edge by the menu. */
.app-header__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-0) var(--space-2);
    margin-right: auto;
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-0);
}

/* A divider introduces the next group; the first group has none. */
.app-nav + .app-nav {
    padding-left: var(--space-2);
    border-left: 1px solid var(--border);
}

.app-nav__item {
    display: flex;
    align-items: center;
    /* The mark stands beside the word it marks, not at the far edge of the item: connected
       elements are read together and are never split across the corners (core.md §1.6). */
    justify-content: flex-start;
    gap: var(--space-0);
    padding: var(--inset-row) var(--space-2);
    border-radius: var(--radius-control);
    color: var(--text-3);
    font-size: var(--fs-caption);
    transition: background var(--transition), color var(--transition);
}

.app-nav__item:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

/* The current section is held by two signals: dark text and the accent line under it. The
   corners are square: on a rounded item the inset line curved up its ends and read as a pill. */
.app-nav__item[aria-current='page'] {
    border-radius: 0;
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* Unread security notifications mark the menu item. */
.app-nav__alert {
    flex: none;
    color: var(--negative);
    font-weight: var(--fw-bold);
}

/* Logging out changes state, so it is a POST form; the button has to shed the browser chrome
   to read as the menu item it is. */
.app-nav__item--button {
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-caption);
    cursor: pointer;
}

/* On a phone the menu takes a row of its own under the wordmark and the exit; the wordmark
   pushes the exit to the right edge, so only the menu wraps (core.md §1.7). */
@media (max-width: 480px) {
    .app-header__brand {
        margin-right: auto;
    }

    .app-header__menu {
        order: 1;
        flex: 1 0 100%;
        margin-right: 0;
    }

    /* A wrapped group starts its own row: the hairline between groups would stand alone at the left edge. */
    .app-nav + .app-nav {
        border-left: 0;
        padding-left: 0;
    }
}

/* --- Work area ----------------------------------------------------------------------- */

/* min-width: 0 keeps a wide table from stretching the page: the table scrolls inside its own
   box and the page never scrolls sideways. */
.app-main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    max-width: var(--w-wide);
    margin-inline: auto;
    /* Tight under the header on purpose: the work starts right below it (defaults 3.10.3). */
    padding: var(--space-3) var(--space-3) var(--space-6);
}

.app-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

/* Main column and a side column (a card with its actions, a payment with its explanation; owner
   review 23.10.2026): one column on a phone, side by side from the desktop breakpoint. */
.app-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

/* 1081px = --bp-desktop + 1 (var() does not work in a media condition). */
@media (min-width: 1081px) {
    .app-split {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.app-titlebar__title {
    margin-right: auto;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

.app-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Touch targets are decided by the pointer type, not by the window width. */
@media (pointer: coarse) {
    .app-nav__item {
        min-height: var(--control-touch);
        border-radius: var(--radius);
    }
}

/*
 * The way back from the page of one object to the list it came from.
 *
 * A line of its own above the page, not a button among the actions: leaving is not an action on
 * the object, and putting it next to "delete" would read as one.
 */
.app-page-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* The way back stands close above the object it leads away from. */
    padding-bottom: var(--space-2);
}

.app-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-3);
    text-decoration: none;
}

.app-back:hover {
    color: var(--accent);
}

/* --- The head of an object page ------------------------------------------------------ */

/*
 * Everything known about one object, in a strip across the width: badges on the left, figures
 * in the middle, the management buttons on the right.
 *
 * A card would be the wrong shape here. Three figures and a row of badges in a tall half-width
 * card is the most space for the least meaning — core.md §4.2 asks for compactness, and a page
 * is not a list of cards just because a list of cards exists.
 *
 * The name of the object is deliberately absent: it is the title of the page, already shown in
 * the bar above, and saying it twice on one screen is saying it once too often.
 */
.app-object-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    /* Tight on purpose: three figures and a row of badges do not need the air of a card. */
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.app-object-head--archived {
    background: var(--archived);
    color: var(--text-4);
}

.app-object-head__about {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.app-object-head__note {
    color: var(--text-3);
    font-size: var(--fs-caption);
}

/* A bar with no figures (the user page Ж.Б18): the buttons still go to the far edge (core.md §4.10). */
.app-object-head__about + .app-object-head__actions {
    margin-left: auto;
}

/* The figures take the middle and push the buttons to the far edge. */
.app-figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin-left: auto;
}

/*
 * Caption above, amount below, both centred on the same axis: side by side these read as
 * three facts rather than as a table, and a caption hanging off the left edge of its own
 * number would be the floating line core.md §4.1 forbids.
 */
.app-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

/* The three cells of the amount keep their columns; the block as a whole is what centres. */
.app-figure .app-amount-list {
    justify-content: center;
}

.app-figure__label {
    color: var(--text-3);
    font-size: var(--fs-caption);
    white-space: nowrap;
}

/*
 * In the strip the buttons stand together at the right edge rather than pushed apart: the
 * split into two groups is what a narrow card needs, and here there is nothing to split across.
 */
.app-object-head__actions .app-object-card__actions {
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 720px) {
    .app-figures,
    .app-object-head__about + .app-object-head__actions {
        margin-left: 0;
    }
}

/* --- The document editor: the EDITOR card on the left, the PREVIEW card on the right -------- */

/*
 * The old constructor's shape (KINV-121, owner 23.10.2026: the current kinvoice.app form is the
 * base): two white cards side by side, the form with its two tab strips in the left one, the
 * language, the layout tiles, the A4 sheet and the actions in the right one. The page column is
 * wider than the other pages, so the shell widens itself — header and work area together, or the
 * wordmark and the cards would start at different edges.
 */
.app-shell:has(.app-editor) .app-header__inner,
.app-shell:has(.app-editor) .app-main {
    max-width: var(--w-editor);
}

/*
 * A page whose filter row holds four controls (Payments, KINV-255, core.md §4.2: page widths of a section may
 * differ if it serves reading) takes the editor's column: search + Period + State + Flagged is about 1270px and
 * does not fit the 1068px of the usual column. The marker is the filter row itself; the header widens with
 * the work area so the wordmark and the page start at one edge.
 */
.app-shell:has(.app-filters--wide) .app-header__inner,
.app-shell:has(.app-filters--wide) .app-main {
    max-width: var(--w-editor);
}

/* The hero of the home page: a centred heading with its italic accent words, and one lead line. */
.app-hero {
    padding-top: var(--space-6);
    text-align: center;
}

.app-hero__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.app-hero__title em {
    color: var(--accent);
}

.app-hero__lead {
    max-width: var(--w-prose);
    margin: 0 auto;
    color: var(--text-3);
    font-size: var(--fs-card);
}

/* The two cards: one column below --bp-desktop (the preview under the fields it mirrors). */
.app-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-5);
}

.app-editor__form,
.app-editor__preview {
    min-width: 0;
}

/* The old card padded its contents by a layout step, 24px, a little more than a list card. */
.app-editor .app-card__body {
    gap: var(--space-2);
    padding: var(--space-5);
}

/* The label of the editor card carries the hairline under it, and the first strip stands after it. */
.app-editor__form .app-card__label--ruled {
    margin-bottom: var(--space-3);
}

.app-editor__form .app-form-group + .app-form-group {
    margin-top: var(--space-5);
}

/* The labels of this form are the old form's: dark and bold, not the quiet caption of other forms. */
.app-editor .app-field__label {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.app-editor .app-field {
    gap: var(--space-0);
    min-width: 0;
}

/* The language switch stands at the top right edge of the preview card, level with its label. */
.app-editor__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.app-editor__bar .app-field {
    flex-direction: row;
    align-items: center;
}

/* The language tiles and «Add English» to their right, one group at the right edge (map row Б2 Б3). */
.app-editor__languages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* The language tiles rest on the light edge like the layout tiles below (owner, 23.10.2026). */
.app-editor__bar .app-tiles {
    --tile-edge: var(--border);
}

/* The sheet's column is also the container that tells the sheet how much room it has (sheet.css). */
.app-editor__sheet {
    min-width: 0;
    container-type: inline-size;
}

/*
 * The sheet lies on a white card, so it needs its own edge to be seen: a hairline and the soft
 * shadow the old site gave it (defaults 3.10.1 asked for no frame on the warm page — the card is
 * the old site's, so the page no longer shows the sheet bare).
 */
/* The hairline is a 1px ring of shadow, not a border: the sheet is content-box at its computed A4 width
   (KINV-19), and a border would make it 2 px wider than the page it previews (orchestrator AUTO, KINV-60). */
.app-editor__sheet .app-sheet {
    border-radius: var(--radius-glyph);
    box-shadow: 0 0 0 1px var(--border), var(--shadow-pop);
}

/* The actions stand right under the sheet, in its width: looked, then downloaded. */
.app-editor__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* One row of buttons: the draft actions on the left, the downloads at the right edge. */
.app-editor__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.app-editor__downloads {
    display: flex;
    gap: var(--space-1);
    margin-left: auto;
}

.app-editor__row .app-btn {
    min-width: 104px;
}

/* The quiet lines under the actions: the paywall, then the privacy note on a grey ground. */
.app-editor__paywall {
    margin: var(--space-1) 0 0;
}

/* The hero's hint under the sheet (Б91, guest and PRO): the small figure and the line it says, in the preview card. */
.app-editor__hint {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.app-editor__hint-hero {
    flex: none;
    width: 40px;
    height: auto;
}

.app-editor__hint-bubble {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    background: var(--muted);
    color: var(--text-2);
    font-size: var(--fs-caption);
    line-height: var(--lh-text);
}

/* A locked layout is a link now: it keeps the look of a tile, without the link underline and colour. */
a.app-tile {
    text-decoration: none;
}

/* The PRO dialog (З.Б1.В6: title В1, text В2, price В3, buttons В4–В5): the hero stands at the left of the text. */
.app-pro-dialog__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.app-pro-dialog__hero {
    flex: none;
    width: 56px;
    height: auto;
}

.app-pro-dialog__body p {
    margin: 0 0 var(--space-2);
}

.app-pro-dialog__list {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
    list-style: disc;
}

.app-pro-dialog__list li + li {
    margin-top: var(--space-1);
}

/* On a phone the hero stays at the left but smaller, and the gap is one notch tighter. */
@media (max-width: 480px) {
    .app-pro-dialog__hero {
        width: 40px;
    }

    .app-pro-dialog__body {
        gap: var(--space-3);
    }
}

/* The share toast's body (Б96): the line, the quiet note, a wrapping row of buttons. */
.app-share__text {
    margin: 0 0 var(--space-2);
}

.app-share__note {
    color: var(--text-3);
    font-size: var(--fs-caption);
}

.app-share__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.app-share__actions .app-btn {
    text-decoration: none;
}

/* The principles section (Б92): a heading over the row of three cards, between the constructor and the band. */
.app-principles {
    margin-top: var(--space-6);
}

.app-principles__title {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    text-align: center;
}

/* The only dark block of the page: the PRO band that closes the guest landing. */
.app-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-control);
    background: var(--text);
    color: var(--surface);
}

.app-band__text {
    flex: 1 1 360px;
    max-width: 560px;
}

.app-band__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-display);
    font-size: var(--fs-widget);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
}

.app-band__lead {
    margin: 0;
    color: var(--text-disabled);
    font-size: var(--fs-caption);
    line-height: var(--lh-text);
}

.app-band__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.app-band__price {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
}

.app-band__price-note {
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
}

/* The call to action is the orange of the PRO corner, so «PRO» is one colour wherever it shows. */
.app-band .app-btn {
    border-color: var(--warn);
    background: var(--warn);
    color: var(--surface);
}

.app-band .app-btn:hover {
    border-color: var(--warn);
    background: var(--warn);
    color: var(--surface);
    filter: brightness(0.92);
}

.app-band__link,
.app-band__link:hover {
    color: var(--text-disabled);
    font-size: var(--fs-caption);
}

/* The footer of the public pages: the page's last block, full width on the surface tone. */
.app-footer {
    margin-top: var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.app-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); /* the brand and three columns of at most four links */
    gap: var(--space-5) var(--space-6);
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: var(--space-6) var(--space-3);
}

.app-footer__brand {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-card);
}

/* The social links of the settings, as icons: a row under the tagline, each a full touch target. */
.app-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
}

.app-social__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    color: var(--text-3);
}

.app-social__icon:hover {
    color: var(--text);
}

.app-footer__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-ui);
    color: var(--text-3);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.app-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: var(--fs-caption);
}

@media (max-width: 720px) {
    .app-footer__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The entrance pages' brand-side wordmark is the way back to the site (KINV-253): the link keeps the wordmark's own
   tones and takes no underline. */
.app-entrance__home,
.app-entrance__home:hover {
    color: inherit;
    text-decoration: none;
}

/* --bp-desktop is 1080px; var() does not work in a media condition, so it is written out, as the
   other folds above do. The fold is max-width 1080, so the two-column shape starts one pixel after. */
@media (min-width: 1081px) {
    /* 5 : 6, the proportion of the old cards; the preview does not grow past the form's height. */
    .app-editor {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}