/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Navigation Menu – 2026 Corporate Theme ───────────────── */

.tm-nav[b-pr0e84buze] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* ── Brand / Logo Area ────────────────────────────────────── */
.tm-nav-brand[b-pr0e84buze] {
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.tm-nav-brand a[b-pr0e84buze] {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: opacity 0.2s;
}

.tm-nav-brand a:hover[b-pr0e84buze] {
    opacity: 0.9;
}

.tm-nav-brand i.icon[b-pr0e84buze] {
    font-size: 1.35rem;
    margin-right: 0.75rem;
    background: linear-gradient(135deg, var(--tm-primary-on-dark), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Site switcher in sidebar */
.tm-nav-site-switcher[b-pr0e84buze] {
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[b-pr0e84buze] .tm-site-switcher {
    width: 100%;
}

.tm-nav-site-label[b-pr0e84buze] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tm-nav-site-label i.icon[b-pr0e84buze] {
    font-size: 0.75rem;
    margin: 0;
    opacity: 0.6;
}

/* ── Group Switcher in sidebar ────────────────────────────── */
.tm-nav-group-switcher[b-pr0e84buze] {
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.tm-nav-group-label[b-pr0e84buze] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tm-nav-group-label i.icon[b-pr0e84buze] {
    font-size: 0.75rem;
    margin: 0;
    opacity: 0.6;
}

/* ── Navigation Menu ──────────────────────────────────────── */
.tm-nav-menu[b-pr0e84buze] {
    flex: 1;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    overflow-y: auto;
    padding: 0.5rem 0;
    background: transparent !important;
}

.tm-nav-menu[b-pr0e84buze]  .item {
    padding: 0.75rem 1.25rem 0.75rem 1.5rem !important;
    border-radius: 0 !important;
    margin: 1px 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Anchor for the active-state ::before indicator below: it must sit on
       the same <a> element the pseudo-element decorates, not on some
       ancestor further up the tree (see NavMenu.razor.css history, TM-39). */
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0;
}

.tm-nav-menu .item i.icon[b-pr0e84buze] {
    margin-right: 0.75rem !important;
    width: 1.25rem;
    font-size: 1rem;
    opacity: 0.7;
    transition: all 0.2s;
}

/* ── Hover State ──────────────────────────────────────────── */
.tm-nav-menu[b-pr0e84buze]  a.item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.tm-nav-menu a.item:hover i.icon[b-pr0e84buze] {
    opacity: 1;
}

/* ── Active State ─────────────────────────────────────────── */
.tm-nav-menu[b-pr0e84buze]  a.item.active {
    background: color-mix(in srgb, var(--tm-primary-on-dark) 15%, transparent) !important;
    color: #fff !important;
    font-weight: 600;
}

/* `.tm-nav-menu` is repeated on purpose — a specificity hack, not a typo. Fomantic
   ships a whole divider-line rule this indicator collides with:
   `.ui.vertical.menu .item:before { position: absolute; content: ''; top: 0%; left: 0;
   width: 100%; height: 1px; background: rgba(34,36,38,.1); }`, plus an inverted-theme
   override for just the colour, `.ui.vertical.inverted.menu .item:before
   { background: rgba(255,255,255,.08); }`, and a first-item exception,
   `.ui.vertical.menu .item:first-child:before { display: none !important; }` (Dashboard
   is that first item and also the default active route on "/"). All three sit at
   5 classes; CSS specificity compares the class tier before anything else, so our
   selector's extra `a` type and `::before` pseudo-element never got a say against
   that at 4 classes. Doubling `.tm-nav-menu` ties the class tier at 5, letting that
   extra type/pseudo-element tier decide in our favour for every property Fomantic
   also declares — `!important` on `display` and `background` beats the plain
   `!important` first-child rule; on `height`, `width`, `top` and `left`, plain
   specificity is enough since Fomantic never marks those `!important` (TM-39: without
   this, the fix compiled and matched — computed style even reported a resolved
   gradient — but rendered nothing, because Fomantic's `height: 1px` divider-line
   height won by being the only rule to declare `height` at all; our rule relied on
   `top`+`bottom` alone to stretch it, which never enters that cascade). */
.tm-nav-menu.tm-nav-menu[b-pr0e84buze]  a.item.active::before {
    content: '';
    display: block !important;
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    height: auto !important;
    width: 3px;
    /* The bottom stop used to be indigo-500, one step darker than the top. Mixing 45%
       of the on-dark token into --tm-primary lands within one unit per channel of that
       old value, so the bar keeps its shading without carrying a colour literal. */
    background: linear-gradient(180deg,
        var(--tm-primary-on-dark),
        color-mix(in srgb, var(--tm-primary-on-dark) 45%, var(--tm-primary))) !important;
    border-radius: 0 3px 3px 0;
}

.tm-nav-menu a.item.active i.icon[b-pr0e84buze] {
    opacity: 1;
    color: var(--tm-primary-on-dark) !important;
}

/* ── Section Headers ──────────────────────────────────────── */
.tm-nav-menu .header.item[b-pr0e84buze] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35) !important;
    margin-top: 0.75rem;
    padding: 0.6rem 1.25rem 0.4rem 1.5rem !important;
    cursor: default;
    font-weight: 700;
}

.tm-nav-menu .header.item:hover[b-pr0e84buze] {
    background: transparent !important;
}

.tm-nav-menu .header.item i.icon[b-pr0e84buze] {
    font-size: 0.75rem;
    opacity: 0.5;
}

/* ── Divider ──────────────────────────────────────────────── */
.tm-nav-menu .ui.divider[b-pr0e84buze] {
    margin: 0.5rem 1.5rem;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5jc20yg7et],
.components-reconnect-repeated-attempt-visible[b-5jc20yg7et],
.components-reconnect-failed-visible[b-5jc20yg7et],
.components-pause-visible[b-5jc20yg7et],
.components-resume-failed-visible[b-5jc20yg7et],
.components-rejoining-animation[b-5jc20yg7et] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-retrying[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-failed[b-5jc20yg7et],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5jc20yg7et] {
    display: block;
}


#components-reconnect-modal[b-5jc20yg7et] {
    background-color: white;
    width: 22rem;
    margin: 20vh auto;
    padding: 2.5rem;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5jc20yg7et 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-5jc20yg7et 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5jc20yg7et 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-5jc20yg7et]::backdrop {
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: components-reconnect-modal-fadeInOpacity-b-5jc20yg7et 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5jc20yg7et {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5jc20yg7et {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5jc20yg7et {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5jc20yg7et] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5jc20yg7et] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-5jc20yg7et] {
    border: 0;
    background: linear-gradient(135deg, var(--tm-primary), #7c3aed);
    color: white;
    padding: 8px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

    #components-reconnect-modal button:hover[b-5jc20yg7et] {
        background: linear-gradient(135deg, var(--tm-primary-hover), #6d28d9);
        box-shadow: 0 4px 12px var(--tm-primary-glow);
        transform: translateY(-1px);
    }

    #components-reconnect-modal button:active[b-5jc20yg7et] {
        transform: translateY(0);
    }

.components-rejoining-animation[b-5jc20yg7et] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5jc20yg7et] {
        position: absolute;
        border: 3px solid var(--tm-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5jc20yg7et 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5jc20yg7et] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5jc20yg7et {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SiteSwitcher.razor.rz.scp.css */
.tm-site-switcher[b-x3vemmu1e7] {
    display: flex;
    align-items: center;
    min-width: 200px;
}

.tm-site-switcher[b-x3vemmu1e7]  .ui.dropdown {
    min-width: 200px;
}

.tm-site-switcher[b-x3vemmu1e7]  .ui.dropdown .menu {
    max-height: 300px;
    overflow-y: auto;
}

.tm-no-sites[b-x3vemmu1e7] {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
    font-size: 0.9em;
}
/* /Components/Pages/Public/Signature.razor.rz.scp.css */
.tm-signature-label[b-4z7h74fo95] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

/* Declaration and item list (TM-77). Same rules as the in-app pad
   (Sessions/SignatureModal.razor.css) — CSS isolation means they cannot be shared, so the two
   are kept looking alike deliberately: the same declaration should not read differently
   depending on which screen a person happened to sign on. */

/* The declaration is the thing being agreed to, so it is body text, not a caption. */
.tm-signature-declaration[b-4z7h74fo95] {
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.tm-signature-items[b-4z7h74fo95] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    /* Long agendas scroll inside the list rather than pushing the pad off a phone screen. */
    max-height: 11rem;
    overflow-y: auto;
}

.tm-signature-items li[b-4z7h74fo95] {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.tm-signature-items-empty[b-4z7h74fo95] {
    margin: 0 0 1rem;
    color: #6b7280;
    font-style: italic;
}

.tm-signature-note[b-4z7h74fo95] {
    margin: 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.tm-signature-pad[b-4z7h74fo95] {
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    /* Fixed drawing height; the canvas fills the box. */
    height: 200px;
    overflow: hidden;
}

.tm-signature-canvas[b-4z7h74fo95] {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    /* Prevent the browser from scrolling/zooming while drawing on touch devices. */
    touch-action: none;
}

.tm-signature-actions[b-4z7h74fo95] {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-align: right;
}
/* /Components/Pages/Sessions/AttendanceChecklist.razor.rz.scp.css */
/* TM-62 — the attendance sheet on its narrow shape: requirements down the page instead of
   across it. The point of the layout is that nothing ever scrolls sideways, so every rule
   here is about keeping the two columns inside the page width. */

.tm-attendance-checklist[b-0kvc2l64ub] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Belt and braces against the very thing this layout exists to remove. */
    max-width: 100%;
}

.tm-checklist-person[b-0kvc2l64ub] {
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 0.85rem 1rem 1rem;
}

.tm-checklist-person-header[b-0kvc2l64ub] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.tm-checklist-person-identity strong[b-0kvc2l64ub] {
    font-size: 1.1em;
}

.tm-checklist-person-attendance[b-0kvc2l64ub],
.tm-checklist-signature[b-0kvc2l64ub] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tm-checklist-signature[b-0kvc2l64ub] {
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.tm-checklist-field-label[b-0kvc2l64ub] {
    font-weight: 600;
    color: #555;
}

.tm-checklist-subtext[b-0kvc2l64ub] {
    font-size: 0.8em;
    color: #888;
}

.tm-checklist-table[b-0kvc2l64ub] {
    width: 100%;
    /* Fixed layout so a long requirement name wraps instead of widening the table. */
    table-layout: fixed;
}

/* The result column holds one glyph; everything left over belongs to the name. */
.tm-checklist-result-heading[b-0kvc2l64ub],
.tm-checklist-result-cell[b-0kvc2l64ub] {
    width: 7rem;
    white-space: nowrap;
}

.tm-checklist-requirement-cell[b-0kvc2l64ub] {
    /* Long, unbroken document codes must break rather than push the table wider. */
    overflow-wrap: anywhere;
}

/* Phone: the two columns still fit, so unlike the matrix (TM-58) this table is not stacked
   into cards — it only gives the name more of the width. */
@media only screen and (max-width: 700px) {
    .tm-checklist-result-heading[b-0kvc2l64ub],
    .tm-checklist-result-cell[b-0kvc2l64ub] {
        width: 4.5rem;
    }

    .tm-checklist-person[b-0kvc2l64ub] {
        padding: 0.6rem 0.7rem 0.75rem;
    }
}
/* /Components/Pages/Sessions/AttendanceMatrixCell.razor.rz.scp.css */
/* TM-60 — one cell of the attendance matrix: the frame says how much the requirement
   applies to this person, the glyph says where they stand, and everything editable is
   one click away in a popover. Nothing is rendered twice. */

/* TM-98 shrank the cell from 2.6 × 2rem to a 1.75rem square. The sheet grows a column per
   agenda requirement, so every millimetre here is paid for once per requirement per row; at
   the old size a five-requirement sheet already spent more width on padding than on glyphs.
   Nothing about what the cell *says* changed — only how much room it takes to say it. */
.tm-matrix-cell[b-fublk5n5of] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 7px;
}

/* ── The frame is the relevance ────────────────────────────────────────────────
   Mandatory reads as a firm box, recommended as a tentative one, and something that
   does not apply to this person has no box at all — the eye can skip it. */
.tm-matrix-cell--mandatory[b-fublk5n5of] {
    border: 1.5px solid #6b7280;
}

.tm-matrix-cell--recommended[b-fublk5n5of] {
    border: 1.5px dashed #9ca3af;
    background: rgba(0, 0, 0, 0.015);
}

.tm-matrix-cell--not-relevant[b-fublk5n5of] {
    border: 1.5px solid transparent;
    background: rgba(0, 0, 0, 0.03);
}

/* A closed session shows no relevance at all, so the cell wears no frame either. */
.tm-matrix-cell--plain[b-fublk5n5of] {
    border: none;
    padding: 0;
}

/* TM-112 — settled by a signature. Deliberately not the quiet dash of TM-95: that says "nobody
   has to decide this", and this says "this was decided and is now attested to". The result
   stays exactly as legible as it was; only the cursor and the faint tint say it is done being
   argued with. Anything louder would put a warning on the normal, correct end state of a row. */
.tm-matrix-cell--signed[b-fublk5n5of] {
    background: rgba(0, 0, 0, 0.04);
    cursor: default;
}

/* The result label fills the frame instead of sitting in it (TM-98). SemLabel renders its
   own element, which never inherits this file's scope — hence ::deep. The colours are
   Fomantic's own: this screen keeps the application's standard look, and the scale that
   makes Pending the loudest of the four (TM-31) is exactly what those colours already do. */
.tm-matrix-cell[b-fublk5n5of]  .ui.label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1;
}

.tm-cell-trigger[b-fublk5n5of] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.tm-cell-trigger:focus-visible[b-fublk5n5of] {
    outline: 2px solid #2185d0;
    outline-offset: 2px;
    border-radius: 4px;
}

/* The resting face of a cell nobody has to do anything about. Grey enough to recede,
   dark enough to stay legible (7.4:1 on white). */
.tm-cell-blank[b-fublk5n5of] {
    color: #595959;
    font-weight: 600;
}

/* ── Popover ──────────────────────────────────────────────────────────────────── */

.tm-cell-backdrop[b-fublk5n5of] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.tm-cell-popover[b-fublk5n5of] {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    min-width: 12rem;
    padding: 0.5rem;
    text-align: left;
    white-space: normal;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* TM-93 — the same panel once cell-popover.js has promoted it into the top layer.
   The browser's own popover styling assumes a centred, self-sized dialog (inset: 0 with
   auto margins, its own border and padding), so all of that is taken back: the script
   supplies `left`/`top` in viewport coordinates and the panel keeps the look it has in
   flow. Without the promotion — an old browser, or the phone card layout — the rules
   above still stand on their own and nothing regresses beyond the old clipping. */
.tm-cell-popover[popover][b-fublk5n5of] {
    position: fixed;
    inset: auto;
    margin: 0;
    transform: none;
    max-width: min(22rem, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid #d4d7dc;
    color: inherit;
}

.tm-cell-popover-heading[b-fublk5n5of] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #595959;
    margin: 0.25rem 0 0.3rem;
}

.tm-cell-popover-note[b-fublk5n5of] {
    margin: 0.25rem 0 0.4rem;
    font-size: 0.85rem;
    color: #595959;
}

.tm-cell-popover-options[b-fublk5n5of] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.35rem;
}

.tm-cell-option[b-fublk5n5of] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: none;
    border-radius: 5px;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    color: #1b1c1d;
    text-align: left;
    cursor: pointer;
}

.tm-cell-option:hover[b-fublk5n5of],
.tm-cell-option:focus-visible[b-fublk5n5of] {
    background: #f1f3f5;
}

.tm-cell-option.is-current[b-fublk5n5of] {
    background: #e8f0fe;
    font-weight: 700;
}

.tm-cell-option-glyph[b-fublk5n5of] {
    display: inline-block;
    width: 1rem;
    text-align: center;
    font-weight: 700;
}

/* ── Phone ─────────────────────────────────────────────────────────────────────
   The matrix collapses into cards under 700px (TM-58) and each card clips its own
   overflow for the rounded corners, so an absolutely positioned popover would be cut
   off. There it expands the card instead of floating above it. */
@media only screen and (max-width: 700px) {
    .tm-matrix-cell[b-fublk5n5of] {
        flex-direction: column;
        align-items: flex-end;
    }

    /* cell-popover.js leaves the panel alone below this width, so it never carries the
       `popover` attribute here and these rules are the only ones positioning it. */
    .tm-cell-popover[b-fublk5n5of] {
        position: static;
        transform: none;
        margin-top: 0.4rem;
        min-width: 0;
        width: 100%;
        box-shadow: none;
    }

    .tm-cell-backdrop[b-fublk5n5of] {
        display: none;
    }
}
/* /Components/Pages/Sessions/Create.razor.rz.scp.css */
/* Hint shown next to a start date that lies in the past (TM-27).
   Deliberately not a SemMessage: Fomantic hides `.ui.form .warning.message`
   until its own JS switches the form into that state, which this app never does. */
.tm-past-date-hint[b-9vc3r72xpz] {
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--tm-warning, #f59e0b);
    border-radius: 0 var(--tm-radius-sm, 8px) var(--tm-radius-sm, 8px) 0;
    background: rgba(245, 158, 11, 0.1);
    color: var(--tm-text-secondary, #475569);
    font-size: 0.85rem;
    line-height: 1.4;
}

.tm-past-date-hint i.icon[b-9vc3r72xpz] {
    margin-right: 0.35rem;
    color: var(--tm-warning, #f59e0b);
}

/* An untouched form must look neutral (TM-28). Hiding the messages is not enough:
   SemFormField puts `error` on the field straight from the validation state, and
   SemanticBlazor dropdowns validate their field while Fomantic initialises them.
   So the field keeps the class, and the colours are undone here until the first
   submit switches the form out of `is-pristine`. */
.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error > label,
.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error .input {
    color: inherit;
}

.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error input,
.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error textarea,
.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error select {
    background: var(--tm-surface, #ffffff);
    border-color: var(--tm-border, #e2e8f0);
    color: var(--tm-text, #0f172a);
}

.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error .ui.dropdown,
.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error .ui.dropdown .text {
    background: var(--tm-surface, #ffffff);
    color: var(--tm-text, #0f172a);
}

.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error .ui.dropdown,
.tm-session-form.is-pristine[b-9vc3r72xpz]  .field.error .ui.dropdown:hover {
    border-color: var(--tm-border, #e2e8f0) !important;
}

/* The error belongs to the field, not to the values it offers: Fomantic paints the
   whole menu red once the field is in the error state (TM-28). The red border and
   the red text of the closed control carry the message on their own. */
.tm-session-form[b-9vc3r72xpz]  .field.error .ui.dropdown .menu > .item {
    background: var(--tm-surface, #ffffff);
    color: var(--tm-text, #0f172a);
}
/* /Components/Pages/Sessions/Detail.razor.rz.scp.css */
/* TM-17 — merged attendance sheet (matrix + toolbar + evidence + "what's missing" panel).
   Scoped to Detail.razor, so the Fomantic globals stay untouched. */

.tm-sheet-toolbar[b-qs8m3aw39h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

/* The matrix can be wider than the page (one column per agenda requirement); it scrolls
   inside its own box instead of pushing the page sideways.
   A box that scrolls on one axis clips the other, so this box clips vertically as well as
   it scrolls horizontally. TM-60 accepted that and let a cell popover opened on the bottom
   row extend the scrollable area instead of escaping it; in practice it read as broken UI
   and part of the menu disappeared under the signature cards. Since TM-93 the popovers are
   promoted into the browser's top layer by wwwroot/js/cell-popover.js, which is outside
   every overflow on the page — so nothing here has to give the popovers room any more. */
.tm-sheet-scroll[b-qs8m3aw39h] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tm-attendance-matrix[b-qs8m3aw39h] {
    min-width: 100%;
}

.tm-sheet-subtext[b-qs8m3aw39h] {
    font-size: 0.8em;
    color: #888;
}

.tm-sheet-result-cell[b-qs8m3aw39h] {
    white-space: nowrap;
}

/* TM-98/TM-113: the signature column has a fixed width, and everything in it is sized to fit
   that width on one line — a signed row must not be taller than an unsigned one. */
.tm-sheet-signature-face[b-qs8m3aw39h] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.3rem;
}

.tm-sheet-signed[b-qs8m3aw39h] {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    white-space: nowrap;
    font-weight: 600;
}


/* The result cell no longer holds a control of its own (TM-60) — it is a frame, a glyph
   and a popover, all owned by AttendanceMatrixCell. */
.tm-sheet-signature-cell select[b-qs8m3aw39h] {
    margin-top: 0.35rem;
}

/* Pushes the overflow trigger to the far end of the toolbar (TM-98), so the two buttons that
   are always there stay together on the left and the ⋮ is always in the same corner. */
.tm-sheet-toolbar-spacer[b-qs8m3aw39h] {
    flex: 1 1 auto;
}

/* ── The progress strip (TM-98) ─────────────────────────────────────────────────
   Replaces the "mark rest N/A" message box. It is a status line, not a control: quiet
   surface, no border, and nothing in it is clickable. */
.tm-sheet-progress[b-qs8m3aw39h] {
    margin-bottom: 1rem;
    padding: 0.55rem 0.85rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.tm-sheet-progress-line[b-qs8m3aw39h] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.4rem;
}

.tm-sheet-progress-pending[b-qs8m3aw39h] {
    color: #1b1c1d;
    font-weight: 600;
}

.tm-sheet-progress-track[b-qs8m3aw39h] {
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.09);
    overflow: hidden;
}

.tm-sheet-progress-bar[b-qs8m3aw39h] {
    height: 100%;
    background: #2185d0;
    transition: width 0.2s ease;
}

/* ── Column geometry (TM-98) ────────────────────────────────────────────────────
   The left-hand block — actions, name, signature, attendance — has a fixed width; only the
   requirement columns multiply. Keeping the fixed part fixed is the whole point of having
   moved the signature off the right-hand end. */
.tm-sheet-menu-heading[b-qs8m3aw39h],
.tm-sheet-menu-cell[b-qs8m3aw39h] {
    width: 2.25rem;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    text-align: center;
}

/* Time and ⋮ on one line (TM-113). TM-115 took the seal badge out of the cell, so the 4rem it
   was costing goes back to the requirement columns. */
.tm-sheet-signature-heading[b-qs8m3aw39h] {
    width: 7rem;
}

.tm-sheet-attendance-heading[b-qs8m3aw39h] {
    width: 7rem;
}

/* A heading turned on its side, so a column is as wide as the glyph it holds rather than as
   wide as a course name. `vertical-rl` + a half turn puts the text bottom-up, which is the
   direction a reader tilts their head for. */
.tm-sheet-requirement-heading[b-qs8m3aw39h] {
    width: 2.5rem;
    vertical-align: bottom !important;
    padding: 0.4rem 0.15rem !important;
}

/* Capped, because the header row is as tall as the longest name in it and that cost is paid
   whether the sheet has ten requirement columns or two. Past this the name ellipsises; the
   whole of it is on the `title` and in the accessible name either way.

   Set generously on purpose. A tighter cap buys perhaps 30px of height and costs the reader
   the end of every name — and two requirements from the same family ("Fire Safety Training",
   "Fire Safety Refresher") truncate to the same prefix, on a sheet where ticking the wrong
   column is the mistake that matters. Height is the cheaper thing to spend. */
.tm-sheet-requirement-heading-text[b-qs8m3aw39h] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    max-height: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
}

.tm-sheet-result-cell[b-qs8m3aw39h] {
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
    text-align: center;
}

/* A thin rule on both sides of the attendance column, so "was this person here" reads as its
   own thing and not as the first of the requirements. */
.tm-sheet-attendance-heading[b-qs8m3aw39h],
.tm-attendance-matrix tbody td[data-label="Attendance"][b-qs8m3aw39h] {
    border-left: 1px solid #e4e7ec;
    border-right: 1px solid #e4e7ec;
}

/* Trainer / translator signatures sit below the matrix, side by side on a wide screen. */
.tm-sheet-role-signatures[b-qs8m3aw39h] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.tm-sheet-role-signature[b-qs8m3aw39h] {
    flex: 1 1 260px;
    min-width: 240px;
    padding: 0.85rem 1rem;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.015);
}



.tm-sheet-scans[b-qs8m3aw39h] {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

.tm-sheet-upload-label[b-qs8m3aw39h] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    cursor: pointer;
    color: var(--tm-primary, #2185d0);
    font-weight: 600;
}

.tm-sheet-upload-input[b-qs8m3aw39h] {
    max-width: 220px;
}

.tm-sheet-missing[b-qs8m3aw39h] {
    margin-top: 1.25rem;
}

/* Online signature-link status pill (TM-23). */
.tm-token-status[b-qs8m3aw39h] {
    font-weight: 600;
}

.tm-token-status[data-token-status="signed"][b-qs8m3aw39h] {
    color: #16a34a;
}

.tm-token-status[data-token-status="expired"][b-qs8m3aw39h] {
    color: #dc2626;
}

.tm-token-status[data-token-status="pending"][b-qs8m3aw39h] {
    color: #ca8a04;
}

.tm-token-status[data-token-status="none"][b-qs8m3aw39h] {
    color: #888;
}

.tm-sheet-token-actions[b-qs8m3aw39h] {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

/* ── Phone: the matrix becomes a stack of cards ─────────────────────────────
   The prezenční listina is the one screen a trainer opens on a phone in the room,
   so under 700px each row turns into a card with the column name as a label.

   The table carries the `unstackable` class (TM-58) so Fomantic's own phone
   stacking is off and these rules are the only ones stacking it. The !important
   below is belt-and-braces: Fomantic's stacking rules are !important themselves,
   so without it the header would come back as an empty "ghost" card the moment
   `unstackable` was ever dropped from the markup. */
@media only screen and (max-width: 700px) {
    .tm-attendance-matrix.ui.table thead[b-qs8m3aw39h] {
        display: none !important;
    }

    .tm-attendance-matrix.ui.table[b-qs8m3aw39h],
    .tm-attendance-matrix.ui.table tbody[b-qs8m3aw39h],
    .tm-attendance-matrix.ui.table tr[b-qs8m3aw39h],
    .tm-attendance-matrix.ui.table td[b-qs8m3aw39h] {
        display: block !important;
        width: auto !important;
    }

    .tm-attendance-matrix.ui.table tr[b-qs8m3aw39h] {
        margin-bottom: 0.9rem;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        overflow: hidden;
    }

    .tm-attendance-matrix.ui.table td[b-qs8m3aw39h] {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        text-align: right;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .tm-attendance-matrix.ui.table td[b-qs8m3aw39h]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: #555;
        flex: 0 0 40%;
    }

    /* TM-98: the wide-screen geometry is undone here. A card is a stack of full-width rows,
       so fixed column widths mean nothing, a heading turned on its side has no heading row to
       live in, and the rule marking off the attendance column would draw a box round one line
       of a card. The matrix keeps stacking exactly as TM-58 left it. */
    .tm-attendance-matrix.ui.table .tm-sheet-menu-cell[b-qs8m3aw39h],
    .tm-attendance-matrix.ui.table td[data-label="Attendance"][b-qs8m3aw39h] {
        width: auto !important;
        text-align: right;
        border-left: none !important;
        border-right: none !important;
    }

    .tm-attendance-matrix.ui.table .tm-sheet-menu-cell[b-qs8m3aw39h] {
        justify-content: space-between;
    }

    .tm-sheet-result-cell[b-qs8m3aw39h] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        text-align: right;
    }

    .tm-sheet-role-signatures[b-qs8m3aw39h] {
        flex-direction: column;
    }
}
/* /Components/Pages/Sessions/ParticipantStatusCell.razor.rz.scp.css */
/* TM-61 — the attendance column of the sheet. Deliberately the same shape as
   AttendanceMatrixCell (trigger + popover), because it sits in the same table and a second
   interaction idiom in the same row would be one too many. Blazor's scoped CSS cannot be
   shared between components, so the popover rules are repeated here rather than lifted into
   a global stylesheet nobody would find. */

.tm-status-cell[b-3b5w7u54ru] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tm-status-trigger[b-3b5w7u54ru] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.tm-status-trigger:focus-visible[b-3b5w7u54ru] {
    outline: 2px solid #2185d0;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Popover ──────────────────────────────────────────────────────────────────── */

.tm-status-backdrop[b-3b5w7u54ru] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.tm-status-popover[b-3b5w7u54ru] {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    min-width: 10rem;
    padding: 0.5rem;
    text-align: left;
    white-space: normal;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* TM-93 — the same panel once cell-popover.js has promoted it into the browser's top layer,
   which is outside the sheet's horizontal scroll box and therefore outside its clipping.
   The UA's popover styling (inset: 0, auto margins, its own border) is taken back; the
   script supplies left/top in viewport coordinates. See AttendanceMatrixCell.razor.css. */
.tm-status-popover[popover][b-3b5w7u54ru] {
    position: fixed;
    inset: auto;
    margin: 0;
    transform: none;
    max-width: min(22rem, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid #d4d7dc;
    color: inherit;
}

.tm-status-popover-heading[b-3b5w7u54ru] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #595959;
    margin: 0.25rem 0 0.3rem;
}

.tm-status-popover-options[b-3b5w7u54ru] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tm-status-option[b-3b5w7u54ru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: none;
    border-radius: 5px;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    color: #1b1c1d;
    text-align: left;
    cursor: pointer;
}

.tm-status-option:hover[b-3b5w7u54ru],
.tm-status-option:focus-visible[b-3b5w7u54ru] {
    background: #f1f3f5;
}

.tm-status-option.is-current[b-3b5w7u54ru] {
    background: #e8f0fe;
    font-weight: 700;
}

/* ── Phone ─────────────────────────────────────────────────────────────────────
   Under 700px the matrix becomes cards (TM-58) that clip their own overflow, so a
   floating popover would be cut off. It expands the card instead. */
@media only screen and (max-width: 700px) {
    .tm-status-cell[b-3b5w7u54ru] {
        flex-direction: column;
        align-items: flex-end;
    }

    /* cell-popover.js leaves the panel alone below this width, so it never carries the
       `popover` attribute here and these rules are the only ones positioning it. */
    .tm-status-popover[b-3b5w7u54ru] {
        position: static;
        transform: none;
        margin-top: 0.4rem;
        min-width: 0;
        width: 100%;
        box-shadow: none;
    }

    .tm-status-backdrop[b-3b5w7u54ru] {
        display: none;
    }
}
/* /Components/Pages/Sessions/SheetMenu.razor.rz.scp.css */
/* TM-98 — the on-demand menu of the attendance sheet.

   Deliberately the same look as the cell popovers (AttendanceMatrixCell.razor.css): the
   screen already teaches "click the quiet thing, get a panel", and a second visual language
   for the same gesture would be one to learn for nothing. */

.tm-sheet-menu[b-vftdeqitjo] {
    position: relative;
    display: inline-flex;
}

/* The trigger carries no visible word — its meaning is in the accessible name, the way the
   cells of this sheet have done since TM-60. It is grey at rest so a column of them down the
   left edge reads as a margin rather than as a column of controls. */
.tm-sheet-menu-trigger[b-vftdeqitjo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: none;
    color: #888;
    font: inherit;
    cursor: pointer;
}

.tm-sheet-menu-trigger:hover:not(:disabled)[b-vftdeqitjo],
.tm-sheet-menu-trigger[aria-expanded="true"][b-vftdeqitjo] {
    background: #f1f3f5;
    color: #1b1c1d;
}

.tm-sheet-menu-trigger:disabled[b-vftdeqitjo] {
    color: #ccc;
    cursor: default;
}

.tm-sheet-menu-trigger:focus-visible[b-vftdeqitjo] {
    outline: 2px solid #2185d0;
    outline-offset: 1px;
}

.tm-sheet-menu-trigger .icon[b-vftdeqitjo] {
    margin: 0;
}

.tm-sheet-menu-backdrop[b-vftdeqitjo] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

/* The in-flow fallback, used before cell-popover.js takes over and on any browser where it
   cannot (see the [popover] block below). It anchors by an edge for the same reason the script
   does: a menu trigger sits at an edge of the sheet, and a centred panel would hang off it. */
.tm-sheet-menu-panel[b-vftdeqitjo] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 13rem;
    padding: 0.35rem 0;
    text-align: left;
    white-space: normal;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.tm-sheet-menu-panel[data-align="end"][b-vftdeqitjo] {
    left: auto;
    right: 0;
}

/* The same panel once cell-popover.js has promoted it into the top layer (TM-93): the
   script supplies left/top in viewport coordinates, so the browser's own centring is undone. */
.tm-sheet-menu-panel[popover][b-vftdeqitjo] {
    position: fixed;
    inset: auto;
    margin: 0;
    transform: none;
    max-width: min(20rem, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
    overflow: auto;
    border: 1px solid #d4d7dc;
    color: inherit;
}

/* Items are passed in as child content, so they carry the *caller's* CSS scope, not this
   component's — ::deep is what lets the menu style them anyway. */
.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    color: #1b1c1d;
    text-align: left;
    cursor: pointer;
}

.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item:hover:not(:disabled),
.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item:focus-visible {
    background: #f1f3f5;
}

.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item:disabled {
    color: #aaa;
    cursor: default;
}

.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item .icon {
    width: 1.1rem;
    margin: 0;
    color: #888;
    text-align: center;
}

.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item:disabled .icon {
    color: #ccc;
}

/* Destructive items are separated and coloured — the one thing in the menu that cannot be
   undone by clicking again. */
.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item--danger,
.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item--danger .icon {
    color: #a32d2d;
}

.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-item--danger:hover:not(:disabled) {
    background: #fceceb;
}

.tm-sheet-menu-panel[b-vftdeqitjo]  .tm-sheet-menu-separator {
    height: 0;
    margin: 0.35rem 0;
    border-top: 1px solid #edeef0;
}

/* Phone: the sheet is a stack of cards (TM-58) and cell-popover.js leaves the panel in flow
   below 700px, so these rules are the only ones positioning it there. */
@media only screen and (max-width: 700px) {
    .tm-sheet-menu-panel[b-vftdeqitjo] {
        position: static;
        transform: none;
        margin-top: 0.4rem;
        min-width: 0;
        width: 100%;
        box-shadow: none;
    }

    .tm-sheet-menu-backdrop[b-vftdeqitjo] {
        display: none;
    }
}
/* /Components/Pages/Sessions/SignatureModal.razor.rz.scp.css */
/* Signature pad styling for the in-app signature modal (TM-19). Mirrors the anonymous
   /sign page (Public/Signature.razor.css); CSS isolation means the styles cannot be
   shared, so the pad look is kept in sync here deliberately. */
.tm-signature-label[b-ozxjrxh68t] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

.tm-signature-signer-name[b-ozxjrxh68t] {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

/* Personal number sits directly under the name: the two together are the identity, and
   splitting them across the screen would invite reading the name on its own (TM-63). */
.tm-signature-signer-id[b-ozxjrxh68t] {
    margin: 0 0 1rem;
    color: #4b5563;
}

/* The declaration is the thing being agreed to, so it is body text, not a caption. */
.tm-signature-declaration[b-ozxjrxh68t] {
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.tm-signature-items[b-ozxjrxh68t] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    /* Long agendas scroll inside the list rather than pushing the pad off the screen. */
    max-height: 11rem;
    overflow-y: auto;
}

.tm-signature-items li[b-ozxjrxh68t] {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.tm-signature-items-empty[b-ozxjrxh68t] {
    margin: 0 0 1rem;
    color: #6b7280;
    font-style: italic;
}

.tm-signature-note[b-ozxjrxh68t] {
    margin: 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.tm-signature-pad[b-ozxjrxh68t] {
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    /* Fixed drawing height; the canvas fills the box. */
    height: 200px;
    overflow: hidden;
}

.tm-signature-canvas[b-ozxjrxh68t] {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    /* Prevent the browser from scrolling/zooming while drawing on touch devices. */
    touch-action: none;
}

.tm-signature-actions[b-ozxjrxh68t] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: right;
}