/* ============================================================
   Auth and public pages — login, password flows, anonymous signature
   docs/08-design-system-v2.md §3.4 (gradient a koule se ruší), §6 (formuláře)
   ------------------------------------------------------------
   The login screen is the first thing anyone sees of this application and it
   used to be the most generic thing in it: a purple gradient across the whole
   viewport, two decorative gradient orbs, and a gradient submit button. All
   three are gone (§3.4). What is left is a quiet --tm-bg plane with a
   --tm-surface panel on it.

   This file deliberately styles almost nothing. The panel is `.ui.segment`,
   which base.css already paints as the card primitive; the inputs and their
   focus ring come from components/forms.css; the submit button comes from
   components/buttons.css, which collapses `.blue` into the solid --tm-primary
   role. Every override this file used to carry (the gradient button with its
   coloured glow and translateY hop, the translucent panel, the blurred
   backdrop) existed only to fight those shared layers, so removing them *is*
   the redesign. What remains here is the handful of things that are genuinely
   specific to a page with no application chrome around it: the centred plane,
   the brand lockup, and the footer strip.

   Two page-local custom properties carry sizes the global token set has no
   name for — a card width is not a spacing step and not a control height.
   They follow the --tm-card-padding precedent in base.css: one named place to
   change, rather than the same magic number repeated down the file.
   ============================================================ */

/* ── The plane ────────────────────────────────────────────────
   Shared by both anonymous shells. No gradient, no ::before/::after orbs, and
   with them goes the `position: relative` / `overflow: hidden` pair that only
   existed to clip those orbs. --tm-bg (#F7F8FA) against the --tm-surface panel
   is a 1.02:1 step, which is the point: the panel is separated by its border
   and shadow, not by a colour contest. */
.tm-login-page,
.tm-public-page {
    --tm-auth-width: 31rem;

    min-height: 100vh;
    background: var(--tm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tm-space-5);
}

/* The signature page carries a definition list, a declaration and a drawing
   canvas, so it needs more room than a two-field login form. */
.tm-public-page {
    --tm-auth-width: 39rem;
}

.tm-login-container,
.tm-public-container {
    width: 100%;
    max-width: var(--tm-auth-width);
}

/* Fomantic's centring grid is still the markup on the password pages; it must
   not add its own width cap on top of the container's.

   The `.ui.grid` half of the selector is load-bearing, not decoration.
   Fomantic gives `.ui.grid` a negative `margin: -1rem`, which is how its
   gutters work — but with no grid gutter to cancel here it simply pushed the
   card 2px past both edges of a 375px viewport and gave the phone layout a
   horizontal scrollbar (measured: scrollWidth 377 vs clientWidth 375).
   `.tm-login-grid` alone is 0-1-0 and loses to `.ui.grid` at 0-2-0, so the
   reset silently did nothing; 0-3-0 wins it back. */
.ui.grid.tm-login-grid {
    height: 100%;
    margin: 0;
}

.tm-login-column {
    max-width: var(--tm-auth-width) !important;
    padding: 0 !important;
}

/* ── Brand lockup ─────────────────────────────────────────────
   The 3.5rem gradient-clipped graduation-cap glyph is gone. In its place is
   the same mark the application uses elsewhere: a petrol tile with the
   initials, then the wordmark.

   The tile is sized with --tm-control-height so it matches the height of the
   inputs directly beneath it — the mark and the form it introduces sit on one
   rhythm instead of two. `color: var(--tm-surface)` is the panel white read
   back as a token rather than a `#fff` literal; on --tm-primary it measures
   5.95:1, clearing AA for the initials. */
.tm-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tm-space-3);
    margin-bottom: var(--tm-space-5);
    text-align: center;
}

.tm-login-mark {
    width: var(--tm-control-height);
    height: var(--tm-control-height);
    flex: none;
    border-radius: var(--tm-radius-sm);
    background: var(--tm-primary);
    color: var(--tm-surface);
    display: grid;
    place-items: center;
    font-size: var(--tm-text-base);
    line-height: 1;
    font-weight: var(--tm-weight-semibold);
    letter-spacing: -0.02em;
}

/* Was an <h1> at 2rem/300 with a white-to-lavender gradient clipped into the
   text. §2 caps the scale at semibold and §3.1 removes decorative gradients;
   the wordmark is now simply the largest card-level size. */
.tm-login-brand-name {
    margin: 0;
    font-size: var(--tm-text-lg);
    line-height: var(--tm-leading-lg);
    font-weight: var(--tm-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--tm-text);
}

/* "Management", the second line. Matches Layout/NavMenu.razor.css so the
   wordmark does not read differently depending on whether you are signed in.
   --tm-text-secondary on --tm-bg measures 5.82:1. */
.tm-login-brand-name small {
    display: block;
    font-size: var(--tm-text-sm);
    line-height: var(--tm-leading-sm);
    font-weight: var(--tm-weight-normal);
    letter-spacing: 0;
    color: var(--tm-text-secondary);
}

/* Legacy header lockup — `.tm-login-header` with a `huge` Fomantic glyph over
   an <h1>. Layout/AccessDenied.razor and Layout/AuthorizingView.razor still use
   it, and both sit outside this task's file ownership, so the markup could not
   be converted to `.tm-login-brand` with the five auth pages. The rule is kept
   and restyled instead of deleted: dropping it would have left those two
   screens with a 4em icon and a 2rem hairline heading on the new plane.

   Their glyphs are not branding — a padlock for "Access Denied", a spinner for
   "Verifying authentication" — so unlike the login mark they stay as icons,
   just at a calm size and in a neutral colour rather than clipped gradient.
   --tm-text-secondary on --tm-bg is 5.82:1. */
.tm-login-header {
    text-align: center;
    margin-bottom: var(--tm-space-5);
}

.tm-login-header i.icon {
    font-size: var(--tm-text-xl) !important;
    width: auto;
    height: auto;
    margin: 0 0 var(--tm-space-3);
    color: var(--tm-text-secondary);
}

.tm-login-header h1 {
    margin: 0;
    font-size: var(--tm-text-lg);
    line-height: var(--tm-leading-lg);
    font-weight: var(--tm-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--tm-text);
}

/* Centred action row under a panel message — "Back to Login", "Request New
   Link". Replaces `style="margin-top: 16px; text-align: center;"`. */
.tm-login-actions {
    margin-top: var(--tm-space-4);
    text-align: center;
}

/* Validating / loading state inside a panel. Replaces the inline
   `style="margin: 2rem 0"` on the loader and `text-align: center` on its
   caption. */
.tm-login-loading {
    padding: var(--tm-space-5) 0;
    text-align: center;
}

.tm-login-loading p {
    margin: var(--tm-space-4) 0 0;
    color: var(--tm-text-secondary);
}

/* ── The panel ────────────────────────────────────────────────
   base.css already gives `.ui.segment` the surface, border, --tm-radius-md and
   --tm-shadow-sm. The only thing left to say is that the card and the footer
   strip glued under it are one object: the card loses its bottom corners so
   the seam between the two is a single line rather than two stacked cards. */
.tm-login-page .ui.stacked.segment,
.tm-login-page .ui.segment {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

/* A card with no footer strip under it keeps all four corners. `:has()` is
   supported everywhere this application runs; the fallback if it were not is
   a square-bottomed card, which is not a failure worth a second rule. */
.tm-login-column:not(:has(.ui.attached.message)) .ui.segment {
    border-bottom-left-radius: var(--tm-radius-md);
    border-bottom-right-radius: var(--tm-radius-md);
}

/* Fomantic's stacked segment fakes a paper stack with two offset ::after/::before
   sheets. It reads as decoration from the same era as the gradient. */
.tm-login-page .ui.stacked.segment::after,
.tm-login-page .ui.stacked.segment::before {
    display: none;
}

/* The wrapper is a `.ui.center.aligned.grid`, so everything inside the card
   inherited centred text — a two-line paragraph then set ragged-centre above a
   left-aligned footer strip, which is the same disagreement the strip itself
   had. The brand lockup above the card stays centred because it declares that
   for itself; the card's contents read as a form and align left. An inherited
   value loses to any direct declaration, so this needs no extra specificity. */
.tm-login-page .ui.segment {
    text-align: left;
}

/* Panel heading — "Reset your password", "Set Your Password". §2: a card
   header is --tm-text-lg. Beats Fomantic's `.ui.header` (0-2-0). */
.tm-login-page .ui.segment > .ui.header,
.tm-login-page .ui.segment > h3.ui.header {
    margin: 0 0 var(--tm-space-4);
    font-size: var(--tm-text-lg);
    line-height: var(--tm-leading-lg);
    font-weight: var(--tm-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--tm-text);
}

/* Explanatory paragraph under such a heading. Replaces the inline
   `style="color: #666"` these pages carried, which was both a literal and
   below AA at 5.74:1 on white — --tm-text-secondary is 6.18:1. */
.tm-login-page .ui.segment > p {
    margin: 0 0 var(--tm-space-4);
    color: var(--tm-text-secondary);
}

/* ── Form ─────────────────────────────────────────────────────
   Heights, borders and the focus ring all come from components/forms.css, so
   the login form gets the same treatment as every form in the application —
   which is the point of §6. Only the vertical rhythm is set here. */
.tm-login-page .ui.form .field {
    margin-bottom: var(--tm-space-4);
}

.tm-login-page .ui.form .ui.button {
    margin-top: var(--tm-space-2);
}

/* ── Footer strip ─────────────────────────────────────────────
   The strip under the card used to be `text-align: center` while its only
   block-level child was a left-hanging link, so the two halves disagreed and
   the sentence wrapped under the link on any narrow window. It is now a flex
   row that puts the link and the hint on one baseline and, below the phone
   breakpoint, stacks them left-aligned instead of centring the wrap.

   It also loses the translucent white background and the 20px backdrop blur:
   there is nothing behind it to blur any more. */
.tm-login-page .ui.attached.message,
.tm-login-page .ui.bottom.attached.message {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tm-space-1) var(--tm-space-4);

    margin: 0;
    padding: var(--tm-space-3) var(--tm-space-5);
    background: var(--tm-surface-2);
    color: var(--tm-text-secondary);
    border: 1px solid var(--tm-border);
    border-top: 0;
    border-radius: 0 0 var(--tm-radius-md) var(--tm-radius-md);
    box-shadow: none;
    text-align: left;
    font-size: var(--tm-text-sm);
    line-height: var(--tm-leading-sm);
}

/* Fomantic paints `.ui.info.message` with a blue tint and a coloured inset
   border; this strip carries no status, so it stays neutral. */
.tm-login-page .ui.info.attached.message {
    background: var(--tm-surface-2);
    color: var(--tm-text-secondary);
}

.tm-login-page .ui.attached.message a {
    font-weight: var(--tm-weight-medium);
    color: var(--tm-primary);
}

.tm-login-page .ui.attached.message a:hover {
    color: var(--tm-primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The hint half of the strip. When the two halves stack it must not inherit a
   centred alignment from anywhere. */
.tm-login-hint {
    color: var(--tm-text-secondary);
}

/* ── Public signature page ────────────────────────────────────
   Anonymous, reached by a link, and usually opened on a phone. Only the
   surface language changes here — the pad's structure, its data-testid hooks
   and its behaviour are deliberately untouched (§7 applies to the in-app pad,
   and the same restraint applies to this one). */
.tm-public-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tm-space-3);
    margin-bottom: var(--tm-space-5);
    text-align: center;
}

.tm-public-header h2 {
    margin: 0;
    font-size: var(--tm-text-lg);
    line-height: var(--tm-leading-lg);
    font-weight: var(--tm-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--tm-text);
}

.tm-public-header h2 small {
    display: block;
    font-size: var(--tm-text-sm);
    line-height: var(--tm-leading-sm);
    font-weight: var(--tm-weight-normal);
    letter-spacing: 0;
    color: var(--tm-text-secondary);
}

/* Caption under the loading spinner while the signature link is resolved.
   Replaces `style="text-align: center; margin-top: 1rem; color: #6b7280"` —
   that grey measured 4.83:1, this one 6.18:1. */
.tm-public-loading {
    margin: var(--tm-space-4) 0 0;
    text-align: center;
    color: var(--tm-text-secondary);
}

/* The session facts above the pad: who is signing, for what, and when. */
.tm-signature-info {
    margin-bottom: var(--tm-space-5);
}

.tm-signature-info .item {
    padding: var(--tm-space-1) 0 !important;
}

/* Field label. --tm-text-secondary on --tm-surface is 6.18:1. */
.tm-signature-info .header {
    color: var(--tm-text-secondary) !important;
    font-size: var(--tm-text-sm) !important;
    line-height: var(--tm-leading-sm) !important;
    font-weight: var(--tm-weight-medium) !important;
}

.tm-signature-info .description {
    font-size: var(--tm-text-md) !important;
    line-height: var(--tm-leading-md) !important;
    color: var(--tm-text) !important;
    font-weight: var(--tm-weight-medium) !important;
}

/* ── Signature confirmation ───────────────────────────────────
   The success screen after signing. The 4rem tick is the one place on these
   pages where a glyph earns its size, but it is no longer a raw green
   literal. Critically, the state is never carried by colour alone — the
   heading text under it says what happened (WCAG 1.4.1). */
.tm-signature-confirmation {
    text-align: center;
    padding: var(--tm-space-6) 0;
}

.tm-signature-confirmation i.icon {
    font-size: var(--tm-text-2xl) !important;
    color: var(--tm-success);
    margin-bottom: var(--tm-space-4);
}

.tm-signature-confirmation h3 {
    margin: 0 0 var(--tm-space-2);
    font-size: var(--tm-text-lg);
    line-height: var(--tm-leading-lg);
    font-weight: var(--tm-weight-semibold);
    color: var(--tm-text);
}

.tm-signature-confirmation p {
    margin: 0;
    color: var(--tm-text-secondary);
}

/* ── Phone ────────────────────────────────────────────────────
   375px is the reference width. The plane loses most of its padding so the
   card is not squeezed into a column, and the footer strip stacks. */
@media (max-width: 480px) {
    .tm-login-page,
    .tm-public-page {
        padding: var(--tm-space-4) var(--tm-space-3);
        align-items: flex-start;
    }

    .tm-login-page .ui.segment:not(.basic),
    .tm-public-page .ui.segment:not(.basic) {
        padding: var(--tm-space-4);
    }

    .tm-login-page .ui.attached.message,
    .tm-login-page .ui.bottom.attached.message {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--tm-space-3) var(--tm-space-4);
    }
}