:root {

    --color-primary-900: #0a2e33;
    --color-primary-800: #0E4751;
    --color-primary-700: #145a66;
    --color-primary-600: #1c696a;
    --color-primary-500: #027377;
    --color-primary-400: #00A291;
    --color-primary-300: #3dbdad;
    --color-primary-200: #a3ddd4;
    --color-primary-100: #d1eeea;
    --color-primary-50:  #ebf3f3;

    --color-accent-600: #c77820;
    --color-accent-500: #e8952e;
    --color-accent-400: #f0ad4e;
    --color-accent-300: #f5c882;

    --color-neutral-900: #1a1a2e;
    --color-neutral-800: #2a2a3d;
    --color-neutral-700: #3d3d56;
    --color-neutral-600: #555570;
    --color-neutral-500: #71718a;
    --color-neutral-400: #9494a8;
    --color-neutral-300: #b8b8c8;
    --color-neutral-200: #dddde8;
    --color-neutral-100: #f0f0f5;
    --color-neutral-50:  #f8f8fb;

    --color-success: #16a34a;
    --color-warning: #eab308;
    --color-danger:  #dc2626;
    --color-info:    #027377;

    --shadow-sm: 0 1px 2px 0 rgba(10, 46, 51, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(10, 46, 51, 0.08), 0 2px 4px -2px rgba(10, 46, 51, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(10, 46, 51, 0.08), 0 4px 6px -4px rgba(10, 46, 51, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(10, 46, 51, 0.10), 0 8px 10px -6px rgba(10, 46, 51, 0.05);
    --shadow-brand: 0 0 2rem rgba(0, 0, 0, 0.08), 1rem 1rem 0 -0.4rem var(--color-primary-100);

    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-neutral-800);
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-gradient {
    background: linear-gradient(135deg,
        var(--color-primary-900) 0%,
        var(--color-primary-800) 25%,
        var(--color-primary-700) 50%,
        var(--color-primary-800) 75%,
        var(--color-primary-900) 100%);
    background-size: 200% 200%;
    animation: gradient-shift 12s ease infinite;
}

.hero-pattern {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0, 162, 145, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 162, 145, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
}

.brand-card {
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--color-primary-100);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.brand-card:hover {
    box-shadow: var(--shadow-brand);
    transform: translateY(-2px);
    border-color: var(--color-primary-200);
}

.action-card {
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--color-primary-100);
    border-left: 4px solid var(--color-amber-500, #f59e0b);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-base);
}

.action-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: var(--color-primary-200);
    border-left-color: var(--color-amber-600, #d97706);
}

.btn-primary {
    background-color: var(--color-primary-600);
    color: #fff;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--color-primary-700);
    box-shadow: 0 4px 12px rgba(28, 105, 106, 0.3);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-accent {
    background-color: var(--color-accent-500);
    color: #fff;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.btn-accent:hover {
    background-color: var(--color-accent-600);
    box-shadow: 0 4px 12px rgba(232, 149, 46, 0.3);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: #fff;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.btn-outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.btn-outline-dark {
    background: transparent;
    color: var(--color-primary-600);
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 2px solid var(--color-primary-200);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.btn-outline-dark:hover {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}

.feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.feature-icon-teal {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}

.feature-icon-amber {
    background: #fef3cd;
    color: var(--color-accent-600);
}

.feature-icon-emerald {
    background: #d1fae5;
    color: #059669;
}

.nav-brand {
    background: #fff;
    border-bottom: 1px solid var(--color-primary-100);
    box-shadow: var(--shadow-sm);
}

.nav-link {
    color: var(--color-neutral-600);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: all var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.nav-link-active {
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: var(--color-neutral-500);
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: transparent;
}
.nav-icon-btn:hover {
    color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: var(--color-primary-600);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    line-height: 1;
}
.avatar-initials:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

.profile-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 16rem;
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    overflow: hidden;
}
.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    transition: background-color var(--transition-fast);
}
.profile-dropdown-item:hover {
    background-color: var(--color-neutral-50);
}

.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: #fff;
    border-left: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-xl);
    z-index: 51;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-base);
}
.help-drawer.help-drawer-open {
    transform: translateX(0);
}

.login-split-brand {
    background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
    position: relative;
    overflow: hidden;
}

.login-split-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 70%, rgba(0, 162, 145, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(0, 162, 145, 0.10) 0%, transparent 50%);
}

.section-light {
    background-color: var(--color-primary-50);
}

.input-brand {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-neutral-400);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-neutral-800);
    background: #fff;
    transition: all var(--transition-fast);
    font-family: var(--font-body);
}

.input-brand:focus {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(0, 162, 145, 0.12);
}

.input-brand::placeholder {
    color: var(--color-neutral-400);
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }

.footer-brand {
    background: var(--color-neutral-900);
    color: var(--color-neutral-400);
}

.footer-brand a {
    color: var(--color-neutral-300);
    transition: color var(--transition-fast);
}

.footer-brand a:hover {
    color: var(--color-primary-300);
}

.app-body {
    background: var(--color-neutral-50);
}

.text-brand { color: var(--color-primary-600); }
.text-brand-light { color: var(--color-primary-400); }
.bg-brand { background-color: var(--color-primary-600); }
.bg-brand-dark { background-color: var(--color-primary-800); }
.bg-brand-light { background-color: var(--color-primary-50); }
.border-brand { border-color: var(--color-primary-200); }

/* Form-element defaults. `:where()` keeps specificity at (0,0,1) so any
   class-based override (e.g. Tailwind `px-3`, `pl-9`, `py-2`, `.input-brand`)
   still wins. Without this we'd clobber utility padding on the search bar,
   matters / meetings forms, sign_product settings, etc. */
input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="url"], [type="tel"], [type="search"], :not([type])),
select,
textarea {
    border: 1px solid var(--color-neutral-300);
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="url"], [type="tel"], [type="search"], :not([type])):hover,
select:hover,
textarea:hover {
    border-color: var(--color-neutral-500);
    background-color: var(--tv-input-hover, var(--color-neutral-50));
}

input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="url"], [type="tel"], [type="search"], :not([type])):focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(2, 115, 119, 0.15);
    background-color: var(--tv-input-focus, #fff);
}

.input-borderless,
.input-borderless:hover,
.input-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
    min-height: auto;
    background: transparent;
}

@keyframes htmx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.htmx-spinner {
    animation: htmx-spin 1s linear infinite;
}

.entity-layout {
    min-height: calc(100vh - 4rem);
}

.htmx-indicator-toast {
    opacity: 0;
    transition: opacity 200ms ease;
}

/* The scroll bars follow the theme (L-16: Grafikai showed a white bar in the dark theme). */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--tv-scroll-track, var(--color-neutral-100)); }
::-webkit-scrollbar-thumb { background: var(--tv-scroll-thumb, var(--color-neutral-300)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tv-scroll-thumb-hover, var(--color-neutral-400)); }
::-webkit-scrollbar-corner { background: var(--tv-scroll-track, var(--color-neutral-100)); }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.375rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.92rem;
    color: #2f4641;
    border-radius: 0.5rem;
    transition: background-color 150ms, color 150ms;
}
.sidebar-link:hover { background-color: #fff; color: #0E4751; }
.sidebar-link-active {
    background-color: #dff5f1 !important;
    color: #0E4751 !important;
    font-weight: 650;
}

.sidebar-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: #9ca3af;
    stroke: none;
}
.sidebar-link-active .sidebar-icon,
.sidebar-link:hover .sidebar-icon { fill: #1c696a; }
.sidebar-section-btn:hover .sidebar-icon { fill: #6b7280; }

.sidebar-icon-blue { fill: none; stroke: #6b8db5; }
.sidebar-link-active .sidebar-icon-blue,
.sidebar-link:hover .sidebar-icon-blue { fill: none; stroke: #3b6ea0; }
.sidebar-section-btn:hover .sidebar-icon-blue { fill: none; stroke: #3b6ea0; }

.sidebar-icon-teal { fill: none; stroke: #2ba3a3; }
.sidebar-link-active .sidebar-icon-teal,
.sidebar-link:hover .sidebar-icon-teal { fill: none; stroke: #1c696a; }
.sidebar-section-btn:hover .sidebar-icon-teal { fill: none; stroke: #1c696a; }

.sidebar-section-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin: 0 0.5rem;
    width: calc(100% - 1rem);
    min-height: 2.375rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #2f4641;
    border-radius: 0.5rem;
    transition: background-color 150ms, color 150ms;
}
.sidebar-section-btn:hover { background-color: #fff; color: #0E4751; }

.sidebar-submenu { padding: 0.25rem 0.75rem 0.25rem 1.75rem; }
.sidebar-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
    color: #2f4641;
    border-radius: 0.5rem;
    transition: background-color 150ms, color 150ms;
}
.sidebar-sublink:hover { background-color: #fff; color: #0E4751; }

.product-sidebar-action-active {
    outline: 2px solid rgba(14, 71, 81, 0.28);
    outline-offset: -2px;
}

.sidebar-sublink-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    color: #9ca3af;
    cursor: default;
}
.sidebar-soon-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    background-color: #fef3c7;
    color: #92400e;
    opacity: 0;
    transition: opacity 150ms;
}
.group:hover .sidebar-soon-badge { opacity: 1; }

.sidebar-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
}

.sidebar-section-btn[aria-expanded="true"] .chevron-icon,
[data-menu-id][aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

/* JA landing-card left-stripe: Tailwind only compiled border-l-amber-500
   (used by mano action_cards/card_list.html). border-l-brand-500 is needed
   for the own-JA flow cards in ja_v2/_entity_landing.html. One-line shim
   instead of a full Tailwind rebuild. brand-500 = #027377 per tailwind.config.js. */
.border-l-brand-500 { border-left-color: #027377; }

@media (max-width: 1023px) {
    #entity-sidebar.sidebar-mobile-open {
        display: flex !important;
        position: fixed;
        top: 4rem;
        left: 0;
        bottom: 0;
        z-index: 30;
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    }
}

/* ── Language menu (localization G1) ─────────────────────────────────────
   The one language control on every web surface: public header, Sign shell,
   guest ceremony. Fixed width whatever the number of languages, which is the
   point - the one-control-per-language row it replaces grew with each added
   language. Dark-theme overrides for the Sign shell live in sign-product.css
   alongside the other data-sign-theme rules. */
.tv-lang { position: relative; display: inline-block; }
.tv-lang > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.tv-lang > summary::-webkit-details-marker { display: none; }
.tv-lang > summary:hover { color: #111827; background: #f3f4f6; }
.tv-lang > summary:focus-visible { outline: 2px solid #0E4751; outline-offset: 2px; }
.tv-lang-globe { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.tv-lang-code { letter-spacing: 0.02em; }
.tv-lang-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 50;
    min-width: 11rem;
    padding: 0.375rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
}
.tv-lang-heading {
    margin: 0;
    padding: 0.25rem 0.625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}
.tv-lang-panel form { display: contents; }
.tv-lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    font-size: 0.875rem;
    font-family: inherit;
    color: #374151;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.tv-lang-item:hover { background: #f3f4f6; color: #111827; }
.tv-lang-item.is-current { font-weight: 600; color: #0E4751; }
.tv-lang-item.is-current::after { content: "✓"; }
/* tvarka.pro's language menu: the second group offering tvarka.eu (tvarka_eu.market). */
.tv-lang-cross { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid #e5e7eb; }
.tv-lang-cross-link {
    display: block;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0E4751;
    text-decoration: none;
}
.tv-lang-cross-link:hover { background: #f3f4f6; color: #0E4751; }
@media (min-width: 640px) { .tv-lang-cross-link { min-width: 15rem; } }

/* The banner offering the other Tvarka site (both hosts): one sentence, one
   button and a close link, which the server remembers (no script). */
.tv-market-banner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.625rem 3rem 0.625rem 1rem;
    background: #0E4751;
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
}
.tv-market-banner-text { margin: 0; }
.tv-market-banner-go {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    background: #ffffff;
    color: #0E4751;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tv-market-banner-go:hover { background: #e6f0f1; color: #0E4751; }
.tv-market-banner-close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
}
.tv-market-banner-close:hover { background: rgb(255 255 255 / 0.15); color: #ffffff; }
.tv-market-banner a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Trust marks row: marketing/includes/_trust_marks.html (2026-10-10) */
.trust-marks {
    --tm-accent: #00A291;
    --tm-knock: #FFFFFF;
    color: #3F4D4B;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 40px;
    margin: 44px auto 0;
}
.trust-marks-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.trust-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.85;
}
.trust-mark svg { display: block; height: 30px; width: auto; flex: none; }
.trust-mark .tm-a { stroke: var(--tm-accent); }
.trust-mark .tm-ks { stroke: var(--tm-knock); }
.trust-mark .tm-kf { fill: var(--tm-knock); }
.trust-marks-link {
    font-size: 15px;
    font-weight: 600;
    color: #027377;
    text-decoration: none;
    white-space: nowrap;
}
.trust-marks-link:hover { text-decoration: underline; }
.trust-marks--page,
.trust-marks--page .trust-marks-list { justify-content: flex-start; }
.trust-marks--page { margin: 4px 0 32px; }
.trust-marks--page .trust-marks-list { gap: 16px 30px; }
.trust-marks--page .trust-mark { font-size: 15px; }
.trust-marks--page .trust-mark svg { height: 34px; }
@media (max-width: 640px) {
    .trust-marks,
    .trust-marks-list { gap: 16px 26px; }
    .trust-mark { font-size: 12px; }
    .trust-mark svg { height: 26px; }
    .trust-marks-link { flex-basis: 100%; text-align: center; }
    .landing-page .trust-marks { --tm-accent: #62C4A5; --tm-knock: #0B191E; color: #C5D0CE; }
    .landing-page .trust-marks-link { color: #62C4A5; }
}

/* ── One look for all products (owner ruling 10, 2026-11-12, X-13, L-4) ──
   One set of colour tokens for both frames: the Sign frame (Sign, HR, Sauga,
   Formos) and the platform frame (templates/base.html). The light values are
   the light Sign look, the dark values the dark Sign look. The theme is
   painted on <html> by {% ui_theme_head %} (accounts/templatetags/tvarka_theme.py):
   data-sign-theme and data-color-scheme always carry the same value.
   One amber primary with dark ink, one teal for secondary actions, one red
   for deletes. Every text pair below reads at 4.5:1 or more (checked
   2026-11-12): muted on page 5.2, amber ink 9.2, white on teal 6.4 (dark
   4.9), white on red 6.5 (dark 5.5). */
:root {
    --tv-page: #f8faf9;
    --tv-surface: #ffffff;
    --tv-raised: #f3f7f6;
    --tv-line: #d8e2e0;
    --tv-line-strong: #b8cbc6;
    --tv-text: #17252b;
    --tv-text-2: #40524e;
    --tv-muted: #5b6e69;
    --tv-link: #1c696a;
    --tv-focus: #00a291;
    --tv-focus-ring: rgba(0, 162, 145, 0.18);
    --tv-input: #f9fbfa;
    --tv-input-line: #d1dcd9;
    --tv-input-hover: #f8f8fb;
    --tv-input-focus: #ffffff;
    --tv-input-readonly: #eef2f1;
    --tv-primary: #f0ad4e;
    --tv-primary-hover: #e8a03c;
    --tv-primary-ink: #211500;
    --tv-secondary: #1c696a;
    --tv-secondary-hover: #15595b;
    --tv-secondary-ink: #ffffff;
    --tv-danger: #b91c1c;
    --tv-danger-hover: #991b1b;
    --tv-danger-ink: #ffffff;
    --tv-danger-soft: #fff1f2;
    --tv-danger-soft-line: #fecaca;
    --tv-danger-soft-text: #b91c1c;
    --tv-scroll-track: #f0f0f5;
    --tv-scroll-thumb: #b8b8c8;
    --tv-scroll-thumb-hover: #9494a8;
    /* The greatest width of a form on a product page (L-16). */
    --tv-form-max: 56rem;
    /* One color per product (decisions 1 and 2, 2026-11-13). The product
       selection, the header script and every other product mark read these.
       The script tokens are the same colors. Sign keeps the darker step of
       its script, so the name reads at 3:1 or more on a white header. In the
       dark theme each script is a step lighter. */
    --tv-product-sign: #e98200;
    --tv-product-dd: #3b49f5;
    --tv-product-buhalterija: #00a981;
    --tv-product-formos: #0284c7;
    --tv-product-sauga: #e11d48;
    --tv-product-hr: #7c3aed;
    --tv-script-sign: #d97706;
    --tv-script-dd: var(--tv-product-dd);
    --tv-script-buhalterija: var(--tv-product-buhalterija);
    --tv-script-formos: var(--tv-product-formos);
    --tv-script-sauga: var(--tv-product-sauga);
    --tv-script-hr: var(--tv-product-hr);
    /* The calm brand tone (decisions 8 and 17): a soft teal ground with dark
       teal text, for the band of a wizard step and the tile of an empty list. */
    --tv-calm: #e1f1ee;
    --tv-calm-ink: #0e4751;
}
html[data-sign-theme="dark"] {
    --tv-page: #0d1417;
    --tv-surface: #111b20;
    --tv-raised: #17262c;
    --tv-line: #263841;
    --tv-line-strong: #2f6f72;
    --tv-text: #edf6f3;
    --tv-text-2: #dbe8e5;
    --tv-muted: #a9bbb7;
    --tv-link: #5fd3c4;
    --tv-focus: #3dbdad;
    --tv-focus-ring: rgba(61, 189, 173, 0.25);
    --tv-input: #0f181d;
    --tv-input-line: #2b414a;
    --tv-input-hover: #121f25;
    --tv-input-focus: #121f25;
    --tv-input-readonly: #0f181d;
    --tv-primary: #f0ad4e;
    --tv-primary-hover: #f5c882;
    --tv-primary-ink: #211500;
    --tv-secondary: #237d7d;
    --tv-secondary-hover: #1c696a;
    --tv-secondary-ink: #ffffff;
    --tv-danger: #c53030;
    --tv-danger-hover: #a82828;
    --tv-danger-ink: #ffffff;
    --tv-danger-soft: #32191c;
    --tv-danger-soft-line: #72343b;
    --tv-danger-soft-text: #f4a2ae;
    --tv-scroll-track: #111b20;
    --tv-scroll-thumb: #2f4650;
    --tv-scroll-thumb-hover: #3e5a65;
    --tv-product-dd: #6b77ff;
    --tv-script-sign: #f2bd6a;
    --tv-script-formos: #38bdf8;
    --tv-script-sauga: #fb7185;
    --tv-script-hr: #a78bfa;
    --tv-calm: #143338;
    --tv-calm-ink: #8fe1d6;
}
:root { scrollbar-color: var(--tv-scroll-thumb) var(--tv-scroll-track); }

/* ── The shared form look (L-16) ──
   One class set and one greatest width for the forms of every product page,
   in both themes. A page puts .tv-form on its form or section; fields are
   .tv-field with .tv-label, .tv-input and .tv-hint; choices are .tv-choice;
   the buttons are .tv-btn with -primary (amber), -secondary (teal), -danger
   (red) or -quiet. .tv-form-page caps a page of forms at --tv-form-max. */
.tv-form-page,
.tv-page-narrow { max-width: var(--tv-form-max); }
/* The settings page (owner 2026-11-12: too much scrolling). The cards stand
   in two columns where the page is wide enough, so nearly the whole page is
   seen at once on a desktop. The cards keep their order: down the first
   column, then down the second. "Išsaugoti" stands beside the page title as
   well, so a change is saved without scrolling to the end. */
.tv-settings,
.tv-settings-head { max-width: 76rem; }
.tv-settings-cards {
    columns: 2 26rem;
    column-gap: 1.25rem;
}
.tv-settings-cards > * {
    margin: 0 0 1.25rem;
    break-inside: avoid;
}
.tv-settings-cards > .tv-note { margin-bottom: 1.25rem; }
.tv-settings-cards > .tv-span-all { column-span: all; }
/* A choice among a few: tiles with an icon in one row. The hint of the
   chosen tile is shown under the row, so three choices take one line where
   they took three boxes. The radio button itself is kept for the keyboard
   and for screen readers, out of sight. */
.tv-tiles {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.tv-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-tile { display: contents; cursor: pointer; }
.tv-tile > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.tv-tile-box {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-surface);
    color: var(--tv-muted);
    padding: 0.5rem 0.625rem;
    text-align: center;
}
.tv-tile-box .tv-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.tv-tile:hover .tv-tile-box { border-color: var(--tv-line-strong); background: var(--tv-raised); }
.tv-tile:has(input:checked) .tv-tile-box {
    border-color: var(--tv-secondary);
    box-shadow: inset 0 0 0 1px var(--tv-secondary);
    color: var(--tv-link);
}
.tv-tile:has(input:focus-visible) .tv-tile-box {
    border-color: var(--tv-focus);
    box-shadow: 0 0 0 3px var(--tv-focus-ring);
}
.tv-tile-hint {
    grid-row: 2;
    grid-column: 1 / -1;
    display: none;
}
.tv-tile:has(input:checked) .tv-tile-hint { display: block; }
.tv-card {
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-surface);
    color: var(--tv-text-2);
    padding: 1.25rem;
}
.tv-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--tv-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
/* A section title carries its icon. */
.tv-card-title .tv-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--tv-muted);
}
.tv-card-sub {
    margin: 0.25rem 0 0;
    color: var(--tv-muted);
    font-size: 0.875rem;
}
.tv-card-title + .tv-form-grid,
.tv-card-sub + .tv-form-grid,
.tv-card-title + .tv-choices,
.tv-card-title + input[type="hidden"] + .tv-choices { margin-top: 1rem; }
.tv-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
@media (min-width: 1024px) {
    .tv-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tv-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.tv-field-wide { grid-column: 1 / -1; }
.tv-label {
    padding: 0;
    color: var(--tv-text-2);
    font-size: 0.875rem;
    font-weight: 600;
}
.tv-hint {
    margin: 0;
    color: var(--tv-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}
.tv-muted { color: var(--tv-muted); }
.tv-input,
.tv-form input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="date"], [type="tel"], [type="url"], [type="search"], :not([type])),
.tv-form select,
.tv-form textarea {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid var(--tv-input-line);
    border-radius: 0.5rem;
    background-color: var(--tv-input);
    color: var(--tv-text);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
}
.tv-input:hover,
.tv-form select:hover,
.tv-form textarea:hover { border-color: var(--tv-line-strong); background-color: var(--tv-input-hover); }
.tv-input:focus,
.tv-form input:focus,
.tv-form select:focus,
.tv-form textarea:focus {
    outline: none;
    border-color: var(--tv-focus);
    background-color: var(--tv-input-focus);
    box-shadow: 0 0 0 3px var(--tv-focus-ring);
}
.tv-input[readonly],
.tv-input:disabled {
    background-color: var(--tv-input-readonly);
    color: var(--tv-muted);
    box-shadow: none;
}
.tv-input::placeholder { color: var(--tv-muted); opacity: 0.85; }
.tv-form input[type="file"] { color: var(--tv-text-2); font-size: 0.875rem; }
.tv-form input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-raised);
    color: var(--tv-text);
    padding: 0.5rem 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.tv-choices { display: grid; gap: 0.5rem; }
.tv-choices-row { display: flex; flex-wrap: wrap; }
.tv-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-surface);
    padding: 0.625rem 0.75rem;
    cursor: pointer;
}
.tv-choice:hover { border-color: var(--tv-line-strong); background: var(--tv-raised); }
/* The chosen one of several is outlined. A ticked box is not: its tick says enough, and a list of outlined boxes was heavy to read. */
.tv-choice:has(input[type="radio"]:checked) { border-color: var(--tv-secondary); box-shadow: inset 0 0 0 1px var(--tv-secondary); }
.tv-choice input { flex-shrink: 0; margin-top: 0.2rem; accent-color: var(--tv-secondary); }
.tv-choice > span { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.tv-choice-label { color: var(--tv-text); font-size: 0.875rem; font-weight: 600; }
.tv-note {
    margin: 0;
    border: 1px dashed var(--tv-line-strong);
    border-radius: 0.5rem;
    color: var(--tv-muted);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
.tv-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}
.tv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.tv-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.tv-btn-primary { border-color: var(--tv-primary); background: var(--tv-primary); color: var(--tv-primary-ink); }
.tv-btn-primary:hover { border-color: var(--tv-primary-hover); background: var(--tv-primary-hover); color: var(--tv-primary-ink); }
.tv-btn-secondary { border-color: var(--tv-secondary); background: var(--tv-secondary); color: var(--tv-secondary-ink); }
.tv-btn-secondary:hover { border-color: var(--tv-secondary-hover); background: var(--tv-secondary-hover); color: var(--tv-secondary-ink); }
.tv-btn-danger { border-color: var(--tv-danger); background: var(--tv-danger); color: var(--tv-danger-ink); }
.tv-btn-danger:hover { border-color: var(--tv-danger-hover); background: var(--tv-danger-hover); color: var(--tv-danger-ink); }
.tv-btn-quiet { border-color: var(--tv-line); background: transparent; color: var(--tv-text-2); }
.tv-btn-quiet:hover { background: var(--tv-raised); color: var(--tv-text); }

/* Amber with white ink reads at 2.2:1. Every amber button carries the dark
   ink, in both frames and both themes (L-8, ruling 10). */
.bg-amber-500.text-white,
.bg-amber-600.text-white,
.hover\:bg-amber-600:hover.text-white,
.btn-accent { color: var(--tv-primary-ink) !important; }
.btn-accent { background-color: var(--tv-primary); }
.btn-accent:hover { background-color: var(--tv-primary-hover); }

/* The platform frame (templates/base.html): its main button is the one
   amber with dark ink, its quiet grey text reads at 4.5:1. The public site
   keeps its own look. */
.app-body .btn-primary { background-color: var(--tv-primary); color: var(--tv-primary-ink); }
.app-body .btn-primary:hover { background-color: var(--tv-primary-hover); color: var(--tv-primary-ink); box-shadow: 0 4px 12px rgba(240, 173, 78, 0.3); }
.app-body .text-gray-400 { color: #6b7280; }
.tv-theme-toggle .tv-theme-icon-sun { display: none; }
html[data-sign-theme="dark"] .tv-theme-toggle .tv-theme-icon-sun { display: block; }
html[data-sign-theme="dark"] .tv-theme-toggle .tv-theme-icon-moon { display: none; }

/* Quiet text of the platform frame reads at 4.5:1 or more (UX gate 2026-11-12). */
.tv-kbd { color: var(--tv-muted) !important; background-color: var(--tv-raised) !important; border-color: var(--tv-line) !important; }
:root:not([data-color-scheme="dark"]) .app-body .pp-rows-title { color: #555d69; }

/* The header of the platform frame fits a 375 px phone (UX gate 2026-11-12):
   a smaller logo and gaps; the search, help and gear buttons wait for a wider
   screen. The settings are in the profile menu as well. */
@media (max-width: 639px) {
    .app-body .nav-brand > div { padding-left: 0.75rem; padding-right: 0.75rem; }
    .app-body .nav-brand .h-16 { gap: 0.5rem; }
    .app-body .nav-brand .app-logo { height: 2rem; }
    .app-body .nav-brand .h-16 > .min-w-0.flex-1 { display: none; }
    .app-body .nav-brand .h-16 > :last-child { margin-left: auto; }
    .app-body .nav-brand .ml-6 { margin-left: 0.5rem; }
    .tv-hide-mobile { display: none !important; }
    /* The product name stands under the logo, so the header row keeps its width (decision 1). */
    .app-body .nav-brand a:has(> .tv-product-script) { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
    .app-body .nav-brand a > .tv-product-script { margin: 0 0 0 1.25rem; font-size: 1.15rem; line-height: 0.9; }
}

/* ── The product name beside the logo (decision 1, 2026-11-13) ──
   Every product carries its short name in one script, in its own color:
   <span class="tv-product-script" data-product="hr">HR</span>. The Sign
   frame adds .sign-product-script for its size. The platform frame uses
   this class alone, for Buhalterija and Due diligence on their own hosts. */
@font-face {
    font-family: 'Allura';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/allura-regular.ec47de04a5f2.ttf?v=20260509") format('truetype');
}
.tv-product-script {
    color: var(--tv-script-sign);
    font-family: 'Allura', 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 0.82;
    transform: rotate(-4deg) translateY(0.05rem);
    transform-origin: left center;
    white-space: nowrap;
}
.tv-product-script[data-product="hr"] { color: var(--tv-script-hr); }
.tv-product-script[data-product="sauga"] { color: var(--tv-script-sauga); }
.tv-product-script[data-product="formos"] { color: var(--tv-script-formos); }
.tv-product-script[data-product="dd"] { color: var(--tv-script-dd); }
.tv-product-script[data-product="buhalterija"] { color: var(--tv-script-buhalterija); }
.app-body .nav-brand .tv-product-script { margin-left: 0.625rem; }

/* ── Every save button is amber (decision 9, 2026-11-13) ──
   A button that stores what a person typed or chose carries .tv-btn-primary
   beside its own size classes. It is the one amber of the main button, with
   dark ink, in both frames and both themes. One amber save button per form. */
.tv-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.tv-btn-primary:disabled,
.tv-btn-primary[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ── One empty list (decision 8, 2026-11-13) ──
   An icon on a soft tile, one bold line, one plain sentence and the main
   button of the list. It stands in place of the table. The markup is
   includes/_empty_state_fable.html, and a page only includes it. */
.tv-empty {
    border: 1px solid var(--tv-line);
    border-radius: 0.75rem;
    background: var(--tv-surface);
    padding: 2.25rem 1.25rem;
    text-align: center;
}
.tv-empty-flat { border: 0; border-radius: 0; background: transparent; }
.tv-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    border-radius: 0.875rem;
    background: var(--tv-calm);
    color: var(--tv-link);
}
.tv-empty-icon .tv-icon { width: 1.5rem; height: 1.5rem; }
.tv-empty-title { margin: 0; color: var(--tv-text); font-size: 0.9375rem; font-weight: 700; }
.tv-empty-text { margin: 0.25rem auto 0; max-width: 34rem; color: var(--tv-muted); font-size: 0.875rem; line-height: 1.5; }
.tv-empty-action { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.tv-empty-action form { display: contents; }
.tv-empty-action .tv-icon { width: 1rem; height: 1rem; }

/* ── Company cards of one size (decision 11, 2026-11-13) ──
   Mano juridiniai asmenys (templates/core/_entity_card.html). From two
   columns up every card of the grid has one size. The name takes up to two
   lines and is cut with an ellipsis after that (the full name is its title).
   The roles stand at the foot of the card, all in one look. The card lifts
   under the pointer (.brand-card) and stays still for a person who asks for
   less motion. */
@media (min-width: 768px) {
    .tv-entity-grid { grid-auto-rows: 1fr; }
    .tv-entity-grid .tv-entity-name { min-height: 2.8em; }
}
.tv-entity-card { display: flex; flex-direction: column; min-width: 0; }
.tv-entity-card-fill { flex: 1 1 auto; }
.tv-entity-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.tv-role-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: var(--tv-raised);
    color: var(--tv-text-2);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
    .tv-entity-card,
    .tv-entity-card:hover { transition: none; transform: none; }
}

/* ── Plain side menu rows (decision 12, 2026-11-13) ──
   The side menus of Due diligence (templates/duediligence/_sidebar.html) and
   Buhalterija (buhalterija/_sidebar.html) take the rows of the Sign menu:
   .sidebar-link above, one icon in one weight, the active row marked by
   .sidebar-link-active. A group title is a row in bold (.sidebar-group), and
   its entries stand a step in (.sidebar-link-sub). The names of Due diligence
   are long, so its rows are a step smaller and each name keeps one line. */
.sidebar-group {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.sidebar-link-sub { margin-left: 0.75rem; font-size: 0.875rem; }
.sidebar-group,
.sidebar-link-sub { gap: 0.5rem; }
.sidebar-title { color: var(--tv-muted); }

/* ── The calm deadline list (decision 13, 2026-11-13) ──
   templates/core/_deadline_row.html, on the Buhalterija home and on the
   company home. One plain row per deadline: the date in words, then the
   name. Only a deadline due within three days carries the amber mark
   (core/deadline_marks.py). An overdue deadline keeps its red row. */
.tv-deadline {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.25rem;
    border-bottom: 1px solid var(--tv-line);
    font-size: 0.875rem;
}
.tv-deadline:last-child { border-bottom: 0; }
.tv-deadline-date {
    flex: 0 0 auto;
    min-width: 6.25rem;
    color: var(--tv-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* The name of a document in a list of a home page. A long name takes a second
   line and is never cut. A file name without spaces breaks where the line ends
   (clickthrough of 2026-11-14, D7). */
.tv-name-whole { overflow-wrap: anywhere; }
/* A long name takes a second line in the narrow column. It is never cut. */
.tv-deadline-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--tv-text);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.tv-deadline-chip {
    flex: 0 0 auto;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tv-primary) 24%, var(--tv-surface));
    color: var(--tv-primary-ink);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
html[data-sign-theme="dark"] .tv-deadline-chip { color: var(--tv-primary); }
.sidebar-link:focus-visible { outline: 2px solid var(--tv-focus); outline-offset: -2px; }

/* ══ Phase 2 of the UI polish build: the shared parts (package A0, 2026-11-14) ══
   The parts that HR, Sauga, Formos, Due diligence, Buhalterija and the shared
   pages use. Every part is written with the tokens above and serves both
   themes and both frames. The gate shows each part on the specimen pages
   parts-sign and parts-platform (templates/core/ux_gate_parts_fable*.html). */

/* Soft amber: the warning notice and the signing button of a row. It is the
   one amber of the main button, thinned on the surface, so no new hue comes
   in. Its ink is dark in the light theme and amber in the dark theme. */
:root {
    --tv-warn: color-mix(in srgb, var(--tv-primary) 16%, var(--tv-surface));
    --tv-warn-strong: color-mix(in srgb, var(--tv-primary) 30%, var(--tv-surface));
    --tv-warn-line: color-mix(in srgb, var(--tv-primary) 55%, var(--tv-surface));
    --tv-warn-ink: var(--tv-primary-ink);
    /* The edge of a calm part (a chosen tab, a calm notice). */
    --tv-calm-line: color-mix(in srgb, var(--tv-link) 35%, var(--tv-calm));
    /* The greatest width of a form card (choice 6). A short form stays this
       narrow on a wide screen. A form with many fields in one row, such as the
       rows of an invoice, uses .tv-form-page (--tv-form-max) instead. */
    --tv-form-card-max: 44rem;
}
html[data-sign-theme="dark"] { --tv-warn-ink: var(--tv-primary); }

/* ── One form width, short fields for short values (choice 6) ──
   .tv-form-card on the card of a form keeps it to one greatest width.
   .tv-form-row sets fields side by side. Each field takes the free room,
   and a field for a short value keeps a short width: .tv-w-count (a count,
   a country), .tv-w-num (a number, a sum), .tv-w-date, .tv-w-phone and
   .tv-w-code (a company code, a VAT code). The width classes also serve a
   field or an input on their own. On a phone the fields wrap. */
.tv-form-card { max-width: var(--tv-form-card-max); }
.tv-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}
.tv-form-row > * { flex: 1 1 14rem; min-width: 0; }
.tv-w-count { --tv-w: 5rem; }
.tv-w-num { --tv-w: 8rem; }
.tv-w-date { --tv-w: 11rem; }
.tv-w-phone,
.tv-w-code { --tv-w: 12rem; }
.tv-w-count,
.tv-w-num,
.tv-w-date,
.tv-w-phone,
.tv-w-code { width: 100%; max-width: var(--tv-w); }
.tv-form-row > :is(.tv-w-count, .tv-w-num, .tv-w-date, .tv-w-phone, .tv-w-code) { flex: 0 1 var(--tv-w); }

/* ── One upload area (choice 16) ──
   templates/includes/_upload_area_fable.html. The browser file field covers
   the area unseen, so a click or a dropped file reaches it. The script
   static/js/tv-upload-fable.js shows the chosen names. */
.tv-upload { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.tv-upload-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    border: 1.5px dashed var(--tv-line-strong);
    border-radius: 0.75rem;
    background: var(--tv-surface);
    text-align: center;
    transition: border-color var(--transition-fast, 150ms), background-color var(--transition-fast, 150ms);
}
.tv-upload-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.tv-upload-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
    background: var(--tv-calm);
    color: var(--tv-link);
}
.tv-upload-icon .tv-icon { width: 1.375rem; height: 1.375rem; }
.tv-upload-texts { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.tv-upload-title { color: var(--tv-text); font-size: 0.9375rem; font-weight: 700; }
.tv-upload-text { color: var(--tv-muted); font-size: 0.8125rem; }
.tv-upload-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    margin-top: 0.625rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-surface);
    color: var(--tv-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}
.tv-upload-button .tv-icon { width: 1rem; height: 1rem; }
.tv-upload-chosen {
    display: inline-block;
    max-width: 100%;
    margin-top: 0.5rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--tv-calm);
    color: var(--tv-calm-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.tv-upload-chosen:empty { display: none; }
.tv-upload-area:hover,
.tv-upload-over .tv-upload-area {
    border-color: var(--tv-link);
    background: color-mix(in srgb, var(--tv-calm) 45%, var(--tv-surface));
}
.tv-upload-area:hover .tv-upload-button { background: var(--tv-raised); }
.tv-upload-area:has(.tv-upload-input:focus-visible) {
    border-color: var(--tv-focus);
    box-shadow: 0 0 0 3px var(--tv-focus-ring);
}
.tv-upload-has-file .tv-upload-area { border-style: solid; }
.tv-upload-error .tv-upload-area { border-color: var(--tv-danger-soft-text); }
.tv-upload-note { margin: 0; }
.tv-upload-note-error { color: var(--tv-danger-soft-text); font-size: 0.75rem; line-height: 1.45; }
/* The low form, for a field inside a form grid. */
.tv-upload-compact .tv-upload-area {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.375rem 0.75rem;
    padding: 0.625rem 0.75rem;
    text-align: left;
}
.tv-upload-compact .tv-upload-button { order: -1; min-height: 2.25rem; margin-top: 0; padding: 0.375rem 0.75rem; }
.tv-upload-compact .tv-upload-title { font-size: 0.875rem; }
.tv-upload-compact .tv-upload-chosen { margin-top: 0; }

/* ── One family of notices (choices 8, 9, 15) ──
   .tv-notice with a tone: -calm (soft teal), -warn (soft amber) or -fault
   (red). No blue. An icon (.tv-notice-icon), a body (.tv-notice-title,
   .tv-notice-text) and at most one button on the right (.tv-notice-action).
   .tv-notice-card draws the notice as a white card, with the tone on the
   icon tile only (the TPS notice of Due diligence). On a phone the button
   goes under the text. .tv-mark is the same toned tile on its own, for the
   rows of a list (Pranešimai). */
.tv-notice {
    --tv-notice-bg: var(--tv-calm);
    --tv-notice-line: var(--tv-calm-line);
    --tv-notice-ink: var(--tv-link);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tv-notice-line);
    border-radius: 0.75rem;
    background: var(--tv-notice-bg);
    color: var(--tv-text);
    font-size: 0.875rem;
    line-height: 1.5;
}
.tv-notice-calm {
    --tv-notice-bg: var(--tv-calm);
    --tv-notice-line: var(--tv-calm-line);
    --tv-notice-ink: var(--tv-link);
}
.tv-notice-warn {
    --tv-notice-bg: var(--tv-warn);
    --tv-notice-line: var(--tv-warn-line);
    --tv-notice-ink: var(--tv-warn-ink);
}
.tv-notice-fault {
    --tv-notice-bg: var(--tv-danger-soft);
    --tv-notice-line: var(--tv-danger-soft-line);
    --tv-notice-ink: var(--tv-danger-soft-text);
}
.tv-notice-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--tv-notice-ink);
}
.tv-notice-icon .tv-icon { width: 1.25rem; height: 1.25rem; }
.tv-notice-body { flex: 1 1 16rem; min-width: 0; }
.tv-notice-title { margin: 0; color: var(--tv-text); font-weight: 700; }
.tv-notice-text { margin: 0; color: var(--tv-text-2); }
.tv-notice-title + .tv-notice-text { margin-top: 0.125rem; }
.tv-notice-action { flex: none; align-self: center; margin-left: auto; }
.tv-notice-action form { display: contents; }
.tv-notice-action .tv-btn-quiet { background: var(--tv-surface); color: var(--tv-text); }
.tv-notice-action .tv-btn-quiet:hover { background: var(--tv-raised); }
.tv-notice-card {
    align-items: center;
    padding: 1rem 1.25rem;
    border-color: var(--tv-line);
    background: var(--tv-surface);
}
.tv-notice-card .tv-notice-icon,
.tv-mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--tv-notice-bg);
}
.tv-mark {
    --tv-notice-bg: var(--tv-calm);
    --tv-notice-ink: var(--tv-link);
    display: inline-grid;
    flex: none;
    place-items: center;
    color: var(--tv-notice-ink);
}
.tv-mark .tv-icon { width: 1.25rem; height: 1.25rem; }
.tv-mark-calm { --tv-notice-bg: var(--tv-calm); --tv-notice-ink: var(--tv-link); }
.tv-mark-warn { --tv-notice-bg: var(--tv-warn); --tv-notice-ink: var(--tv-warn-ink); }
.tv-mark-fault { --tv-notice-bg: var(--tv-danger-soft); --tv-notice-ink: var(--tv-danger-soft-text); }
@media (max-width: 639px) {
    .tv-notice { flex-wrap: wrap; }
    .tv-notice-action { flex-basis: 100%; margin-left: 0; }
}

/* ── One look for a row of tabs (choice 7, answer 2) ──
   The pill look of Žmonės and Sauga Įrašai (.sign-tab of sign-product.css),
   written once with the tokens, so the platform frame has it too. The chosen
   tab carries .tv-tab-active, aria-current or aria-selected. The tabs wrap
   to a second line where the row is too long. */
.tv-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
}
.tv-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: var(--tv-surface);
    color: var(--tv-muted);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.tv-tab:hover {
    border-color: var(--tv-line-strong);
    background: var(--tv-raised);
    color: var(--tv-calm-ink);
}
.tv-tab:focus-visible {
    outline: none;
    border-color: var(--tv-focus);
    box-shadow: 0 0 0 3px var(--tv-focus-ring);
}
.tv-tab-active,
.tv-tab[aria-current="page"],
.tv-tab[aria-current="true"],
.tv-tab[aria-selected="true"] {
    border-color: var(--tv-calm-line);
    background: var(--tv-calm);
    color: var(--tv-calm-ink);
}
.tv-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--tv-raised);
    color: var(--tv-text-2);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
}

/* ── Row actions as quiet buttons (choice 11) ──
   .tv-row-actions holds the buttons of one table row at its right end, in a
   fixed order. .tv-row-btn is the small quiet button. .tv-row-btn-sign is the
   soft amber form, for signing. .tv-row-btn-danger is red text, for a
   destructive action that is red today. A form inside the row takes no room
   of its own. */
.tv-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}
@media (min-width: 768px) {
    .tv-row-actions { flex-wrap: nowrap; }
}
.tv-row-actions form { display: contents; }
.tv-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-surface);
    color: var(--tv-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.tv-row-btn .tv-icon { flex-shrink: 0; width: 0.9375rem; height: 0.9375rem; }
.tv-row-btn:hover { border-color: var(--tv-line-strong); background: var(--tv-raised); color: var(--tv-text); }
.tv-row-btn:focus-visible { outline: none; border-color: var(--tv-focus); box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.tv-row-btn-sign { border-color: var(--tv-warn-line); background: var(--tv-warn); color: var(--tv-warn-ink); }
.tv-row-btn-sign:hover { border-color: var(--tv-primary); background: var(--tv-warn-strong); color: var(--tv-warn-ink); }
.tv-row-btn-danger { color: var(--tv-danger-soft-text); }
.tv-row-btn-danger:hover { border-color: var(--tv-danger-soft-line); background: var(--tv-danger-soft); color: var(--tv-danger-soft-text); }
.tv-row-btn:disabled,
.tv-row-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ── A switch of two or three parts (choices 4 and 11) ──
   A group of real radio buttons (label > input + text) or of buttons that
   send a form (aria-pressed). The chosen part is soft teal with a check
   (the icon "check" in each part, shown on the chosen part only). The keyboard moves
   through the radio buttons as always. On a phone the parts share the
   width and a long word wraps inside its part. */
.tv-switch {
    display: inline-flex;
    max-width: 100%;
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-surface);
    overflow: hidden;
    vertical-align: middle;
}
.tv-switch-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.375rem 0.875rem;
    border: 0;
    border-left: 1px solid var(--tv-line);
    background: transparent;
    color: var(--tv-text);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.tv-switch-opt:first-child { border-left: 0; }
.tv-switch-opt > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.tv-switch-opt:hover { background: var(--tv-raised); }
.tv-switch-opt > .tv-icon { display: none; flex-shrink: 0; width: 0.875rem; height: 0.875rem; }
.tv-switch-opt:has(> input:checked),
.tv-switch-opt[aria-pressed="true"],
.tv-switch-opt[aria-checked="true"] {
    background: var(--tv-calm);
    color: var(--tv-calm-ink);
}
.tv-switch-opt:has(> input:checked) > .tv-icon,
.tv-switch-opt[aria-pressed="true"] > .tv-icon,
.tv-switch-opt[aria-checked="true"] > .tv-icon { display: inline-block; }
.tv-switch-opt:focus-visible,
.tv-switch-opt:has(> input:focus-visible) {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--tv-focus);
}
/* An older browser does not know :has(). There the round mark of each part is shown, so the
   chosen part is still seen. */
@supports not selector(:has(*)) {
    .tv-switch-opt > input { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; }
}
.tv-switch-opt:has(> input:disabled),
.tv-switch-opt:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 639px) {
    .tv-switch { display: flex; width: 100%; }
    .tv-switch-opt { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; }
}

/* ── A name in the text color (answer 10) ──
   A name that opens nothing takes the text color (.tv-name on a span). A
   name that opens a page keeps its link and takes the link color with an
   underline under the pointer and on keyboard focus (.tv-name on an <a>),
   as the names of Sign Dokumentai do (decision 5). */
.tv-name { color: var(--tv-text); font-weight: 600; text-decoration: none; }
a.tv-name:hover,
a.tv-name:focus-visible { color: var(--tv-link); text-decoration: underline; }

/* ══ Phase 2: one place per package ══
   Each package writes its rules directly under its own head below, and
   nowhere else in this file. The heads stay where they are, so that the
   packages merge without a conflict. A rule that would serve another
   package too is asked of the supervisor. */

/* ── phase 2, A4 Due diligence ──
   The rules of package A4 (Due diligence: the TPS notice, the service
   cards, the money format, the tabs of the earlier requests) go here.
   Write them directly under this comment. */
/* A price of Due diligence: "49,99 €" in bold, then "+ PVM, vienkartinis"
   in a small quiet line. The sum is never broken over two lines. */
.dd-price {
    color: var(--tv-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.dd-price-unit { color: var(--tv-muted); font-size: 0.8125rem; }
.dd-price-note { margin: 0.25rem 0 0; color: var(--tv-muted); font-size: 0.75rem; }
/* The service cards (choice 9, option C). The mark sits in one calm tile
   beside the name. The price stands left and the amber button right, under
   a thin line. The card does not lift under the pointer. On a narrow card
   the button wraps under the price. */
.dd-svc-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.dd-svc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tv-line);
}
.dd-svc-price { min-width: 0; }
.dd-svc-foot .tv-btn { flex: none; margin-left: auto; }

/* ── phase 2, A5 Buhalterija ──
   The rules of package A5 (Buhalterija: the list of months, one month,
   the new invoice and its sum line) go here.
   Write them directly under this comment. */
/* The head of a Buhalterija page: the title on the left, one link on the right. */
.buh-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
}
.buh-title { margin: 0; color: var(--tv-text); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.buh-link { color: var(--tv-link); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.buh-link:hover,
.buh-link:focus-visible { text-decoration: underline; }
/* A card of one line: the words on the left, the controls on the right. On a
   phone the controls go under the words. */
.buh-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
}
.buh-card-body { flex: 1 1 18rem; min-width: 0; }
.buh-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--tv-text);
    font-size: 0.9375rem;
    font-weight: 700;
}
.buh-card-text { margin: 0.25rem 0 0; color: var(--tv-muted); font-size: 0.875rem; line-height: 1.5; }
.buh-card-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.375rem 0 0; }
.buh-card-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.buh-card-side form { display: contents; }
.buh-select {
    min-height: 2.5rem;
    min-width: 11rem;
    border: 1px solid var(--tv-input-line);
    border-radius: 0.5rem;
    background-color: var(--tv-input);
    color: var(--tv-text);
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
}
.buh-select:focus { outline: none; border-color: var(--tv-focus); box-shadow: 0 0 0 3px var(--tv-focus-ring); }
/* The state of a month or a form as a soft label: done is calm teal, waiting
   is soft amber, a fault is red, an open month is grey. */
.buh-state {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--tv-raised);
    color: var(--tv-text-2);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    white-space: nowrap;
}
.buh-state-done { background: var(--tv-calm); color: var(--tv-calm-ink); }
.buh-state-wait { background: var(--tv-warn); color: var(--tv-warn-ink); }
.buh-state-fault { background: var(--tv-danger-soft); color: var(--tv-danger-soft-text); }
.buh-note { margin: 0.5rem 0 0; color: var(--tv-muted); font-size: 0.8125rem; line-height: 1.5; }
/* The list of months (choice 10): a month in words, its state, and "Pateikti"
   or an arrow at the right end. */
.buh-months { margin-bottom: 0; padding: 0; overflow: hidden; }
.buh-month {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 3.5rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid var(--tv-line);
}
.buh-month:first-child { border-top: 0; }
.buh-month-link {
    display: flex;
    flex: 1 1 12rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    color: var(--tv-text);
    text-decoration: none;
}
.buh-month-name { font-size: 1rem; font-weight: 700; }
.buh-month-link:hover .buh-month-name,
.buh-month-link:focus-visible .buh-month-name { color: var(--tv-link); text-decoration: underline; }
.buh-month form { display: contents; }
.buh-arrow { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--tv-muted); text-decoration: none; }
.buh-arrow:hover { color: var(--tv-link); }
.buh-month .tv-btn { min-height: 2.25rem; padding: 0.375rem 1rem; }
/* One month (choice 11): the forms with their row actions. On a phone each
   form is a small card: its name and state above, the buttons under them. */
.buh-section { margin-bottom: 1.25rem; padding: 1.25rem; }
.buh-section-title { margin: 0 0 0.75rem; color: var(--tv-text); font-size: 1.0625rem; font-weight: 700; }
.buh-forms { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.buh-forms th {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--tv-line);
    color: var(--tv-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}
.buh-forms td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--tv-line); color: var(--tv-text-2); vertical-align: middle; }
.buh-forms tr:last-child td { border-bottom: 0; }
.buh-forms .tv-name { white-space: nowrap; }
.buh-forms .tv-row-actions { flex-wrap: wrap; }
@media (min-width: 1280px) {
    .buh-forms .tv-row-actions { flex-wrap: nowrap; }
}
@media (max-width: 767px) {
    .buh-forms thead { display: none; }
    .buh-forms,
    .buh-forms tbody { display: block; }
    .buh-forms tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--tv-line);
    }
    .buh-forms tr:last-child { border-bottom: 0; }
    .buh-forms td { display: block; padding: 0; border: 0; }
    .buh-forms td[data-label]::before { content: attr(data-label) " "; color: var(--tv-muted); }
    .buh-forms td.buh-forms-name { flex: 1 1 100%; }
    .buh-forms td.buh-forms-actions { flex: 1 1 100%; }
    .buh-forms .tv-row-actions { justify-content: flex-start; }
}
.buh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.buh-actions form { display: contents; }
.buh-actions .tv-icon,
.buh-invoice-buttons .tv-icon { width: 1.125rem; height: 1.125rem; }
.buh-notice { margin-bottom: 1.25rem; }
/* The new invoice (choice 12, answer 6). The page keeps .tv-form-page. Each
   column head stands above its field, the buttons share one height, and the
   sum line under the rows is kept current by the page script. */
.buh-invoice .brand-card { padding: 1.25rem; }
.buh-invoice-head { align-items: flex-start; margin-bottom: 1rem; }
.buh-invoice-title { margin: 0; color: var(--tv-text); font-size: 1.125rem; font-weight: 700; }
.buh-invoice-lead { margin-bottom: 0.75rem; }
.buh-invoice-section-gap { margin-bottom: 0.75rem; }
.buh-invoice-foot { margin-top: 0.75rem; }
.buh-invoice-section { margin: 0 0 0.25rem; color: var(--tv-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.buh-invoice .tv-form-row + .tv-form-row { margin-top: 1rem; }
.buh-invoice .tv-label .tv-muted { font-weight: 500; }
.buh-invoice-seller { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; color: var(--tv-muted); font-size: 0.875rem; }
.buh-invoice-seller strong { color: var(--tv-text); }
.buh-lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.buh-lines th {
    padding: 0 0.75rem 0.375rem 0;
    color: var(--tv-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.buh-lines td { padding: 0 0.75rem 0.5rem 0; }
.buh-lines th:last-child,
.buh-lines td:last-child { padding-right: 0; }
.buh-lines .buh-col-qty { width: 5.5rem; }
.buh-lines .buh-col-price { width: 9rem; }
.buh-lines .buh-col-rate { width: 14rem; }
.buh-lines th.buh-num,
.buh-lines input.buh-num { text-align: right; }
.buh-add-line { margin-top: 0.25rem; padding: 0.25rem 0; border: 0; background: none; color: var(--tv-link); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.buh-add-line:hover,
.buh-add-line:focus-visible { text-decoration: underline; }
.buh-sum {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    gap: 0.25rem 1.5rem;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tv-line);
    font-size: 0.875rem;
}
.buh-sum dt { color: var(--tv-muted); text-align: right; }
.buh-sum dd { margin: 0; color: var(--tv-text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.buh-sum .buh-sum-total { color: var(--tv-text); font-size: 1rem; font-weight: 700; }
.buh-invoice-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.buh-invoice-buttons .tv-btn { min-height: 2.75rem; }
.buh-invoice-file { position: relative; }
.buh-invoice-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.buh-invoice-file:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--tv-focus-ring); }
@media (max-width: 767px) {
    .buh-lines,
    .buh-lines tbody { display: block; }
    .buh-lines thead { display: none; }
    .buh-lines tr {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--tv-line);
    }
    .buh-lines td { display: flex; flex-direction: column; gap: 0.25rem; padding: 0; }
    .buh-lines td[data-label]::before { content: attr(data-label); color: var(--tv-muted); font-size: 0.8125rem; font-weight: 600; }
    .buh-lines td:first-child,
    .buh-lines td:last-child { grid-column: 1 / -1; }
    .buh-sum { justify-content: stretch; grid-template-columns: 1fr auto; }
    .buh-sum dt { text-align: left; }
}

/* ── phase 2, A6 shared pages ──
   The rules of package A6 (Atsiskaitymai and Pranešimai) go here.
   Write them directly under this comment.
   This is the last place of the file. */

/* Atsiskaitymai (choice 14). The page is shown in the Sign frame and in the
   platform frame, so its rules live here, where both frames read them.
   .tv-bill-email is the line with the address of the invoices: a link
   "Keisti" opens the form, with no arrow before the line. .tv-bill-methods
   holds the counts of this month by method, each with its official mark.
   .tv-bill-bar is the bar of the unbilled sum, and .tv-bill-note the line
   under it. .tv-bill-sum keeps a sum on one line. */
.tv-bill-email > summary { list-style: none; cursor: pointer; }
.tv-bill-email > summary::-webkit-details-marker { display: none; }
.tv-bill-email { color: var(--tv-text); }
.tv-bill-change { color: var(--tv-link); font-weight: 600; text-decoration: none; }
.tv-bill-email > summary:hover .tv-bill-change,
.tv-bill-email > summary:focus-visible .tv-bill-change { text-decoration: underline; }
.tv-bill-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tv-bill-method {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.625rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.625rem;
    background: var(--tv-surface);
    color: var(--tv-text);
    font-size: 0.875rem;
    line-height: 1.2;
}
.tv-bill-method-mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
}
.tv-bill-method-mark img { max-width: 1.5rem; max-height: 1.5rem; object-fit: contain; }
.tv-bill-method-name { font-weight: 700; white-space: nowrap; }
.tv-bill-method-count {
    min-width: 1.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    background: var(--tv-raised);
    color: var(--tv-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.tv-bill-bar {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tv-raised);
}
.tv-bill-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--tv-link); }
.tv-bill-note { margin-top: 0.375rem; color: var(--tv-muted); font-size: 0.8125rem; line-height: 1.45; }
.tv-bill-sum { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* On a phone each row of a table stands as a small block: the day and the
   sum on top, the description under them, the state last. The heads of the
   columns are kept for a screen reader only. */
@media (max-width: 639px) {
    :is(.tv-bill-rows, .tv-bill-invoices) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    :is(.tv-bill-rows, .tv-bill-invoices),
    :is(.tv-bill-rows, .tv-bill-invoices) tbody { display: block; }
    :is(.tv-bill-rows, .tv-bill-invoices) tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
    }
    :is(.tv-bill-rows, .tv-bill-invoices) td { display: block; min-width: 0; padding: 0; text-align: left; }
    .tv-bill-rows tr { grid-template-areas: "day sum" "what what" "state state"; }
    .tv-bill-rows td:nth-child(1) { grid-area: day; }
    .tv-bill-rows td:nth-child(2) { grid-area: what; }
    .tv-bill-rows td:nth-child(3) { grid-area: sum; }
    .tv-bill-rows td:nth-child(4) { grid-area: state; }
    .tv-bill-invoices tr { grid-template-areas: "no sum" "day day" "what what" "state file"; }
    .tv-bill-invoices td:nth-child(1) { grid-area: no; font-weight: 600; }
    .tv-bill-invoices td:nth-child(2) { grid-area: day; }
    .tv-bill-invoices td:nth-child(3) { grid-area: what; }
    .tv-bill-invoices td:nth-child(4) { grid-area: sum; }
    .tv-bill-invoices td:nth-child(5) { grid-area: state; }
    .tv-bill-invoices td:nth-child(6) { grid-area: file; text-align: right; }
}

/* Pranešimai (choice 15, fault 12). One notice is one row: a mark in a
   brand tone (.tv-mark of the shared parts), the title with its day, the
   text, the action and the button that marks it read. A new notice has a
   soft calm ground. On a phone the day goes under the title. */
.tv-notice-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
}
.tv-notice-row-new { background: color-mix(in srgb, var(--tv-calm) 35%, var(--tv-surface)); }
.tv-notice-row-body { flex: 1 1 auto; min-width: 0; }
.tv-notice-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
}
.tv-notice-row-title { margin: 0; color: var(--tv-text); font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.tv-notice-row-new .tv-notice-row-title { font-weight: 700; }
.tv-notice-row-day { flex: none; color: var(--tv-muted); font-size: 0.8125rem; white-space: nowrap; }
.tv-notice-row-text { margin: 0.25rem 0 0; color: var(--tv-text-2); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.tv-notice-row-action {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--tv-link);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.tv-notice-row-action:hover,
.tv-notice-row-action:focus-visible { text-decoration: underline; }
.tv-notice-row-read {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tv-muted);
    cursor: pointer;
}
.tv-notice-row-read .tv-icon { width: 1.125rem; height: 1.125rem; }
.tv-notice-row-read:hover { background: var(--tv-raised); color: var(--tv-link); }
.tv-notice-row-read:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); }
@media (max-width: 639px) {
    .tv-notice-row { gap: 0.75rem; padding: 0.875rem 0.75rem; }
    .tv-notice-row-head { flex-direction: column; }
}

/* ══ track B, Darbastalis ══
   The home of one company (track B of the UI polish build, 2026-11-14).
   Package B1 writes the frame and the desk directly under this head. A later
   package of track B writes below the rules of the package before it.

   The frame (templates/darbastalis/base.html): .ds-frame holds the side menu
   .ds-side and the content .ds-main. The desk (darbastalis/desk.html): the
   tile row .ds-tiles, the cards .ds-card with the list .ds-row, the card
   "Santrauka" .ds-sum-row, the card "Kiti produktai" .ds-other and the block
   "Atraskite daugiau" .ds-discover. A product colour is set by .ds-p-<code>
   as --c. Every colour is a token, so both themes are served. */
.tv-product-script[data-product="darbastalis"] { color: var(--tv-link); }
.ds-p-sign { --c: var(--tv-product-sign); }
.ds-p-duediligence { --c: var(--tv-product-dd); }
.ds-p-buhalterija { --c: var(--tv-product-buhalterija); }
.ds-p-formos { --c: var(--tv-product-formos); }
.ds-p-sauga { --c: var(--tv-product-sauga); }
.ds-p-hr { --c: var(--tv-product-hr); }
.ds-p-ops,
.ds-p-request { --c: var(--tv-link); }
.ds-main-frame { display: flex; flex-direction: column; }
.ds-frame {
    flex: 1;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    background: var(--tv-page);
    color: var(--tv-text);
}
.ds-side {
    border-right: 1px solid var(--tv-line);
    background: var(--tv-raised);
    padding: 1.25rem 0.75rem;
}
.ds-nav { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ds-nav-title {
    margin: 0 0 0.375rem 0.75rem;
    color: var(--tv-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ds-nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--tv-text);
    font-size: 0.9375rem;
    text-decoration: none;
}
.ds-nav-link .tv-icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; color: var(--tv-muted); }
.ds-nav-link:hover { background: var(--tv-surface); color: var(--tv-text); }
.ds-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.ds-nav-on { background: var(--tv-calm); color: var(--tv-calm-ink); font-weight: 700; }
.ds-nav-on .tv-icon { color: var(--tv-calm-ink); }
.ds-nav-on:hover { background: var(--tv-calm); color: var(--tv-calm-ink); }
.ds-main { min-width: 0; padding: 1.25rem 1.5rem 2rem; }
.ds-company { display: none; }
.ds-hello { margin: 0 0 0.875rem; color: var(--tv-text-2); font-size: 1rem; }

/* The tile row: one tile per product, the own products first. Every tile has
   one size. A tile is at least 15rem wide: the mark, the longest word of a
   product name ("Administravimas") and the count stand side by side in it.
   Seven tiles then take two rows, and no name leaves its tile (clickthrough
   of 2026-11-14, D1). Every row of tiles has the height of the tallest row,
   so a lone tile in the last row is as high as the tiles above it. */
.ds-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.625rem;
}
.ds-tiles-one { grid-template-columns: minmax(0, 20rem); }
.ds-tile-form { display: contents; }
.ds-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--c) 28%, var(--tv-line));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--c) 7%, var(--tv-surface));
    color: var(--tv-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}
.ds-tile:hover { border-color: var(--c); color: var(--tv-text); transform: translateY(-1px); }
.ds-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.ds-ic {
    flex: 0 0 2.25rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--c);
    color: #ffffff;
}
.ds-ic svg { width: 1.25rem; height: 1.25rem; }
.ds-ic-sm { flex-basis: 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; }
.ds-ic-sm svg { width: 1rem; height: 1rem; }
.ds-tile-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
/* A product name is shown in full. It may wrap between words, never inside a word. */
.ds-tile-label {
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: normal;
    word-break: keep-all;
    text-overflow: ellipsis;
}
/* The second line of a tile wraps between words on a narrow tile, so a time
   is never cut. A word is never broken. One word wider than the tile ends
   in an ellipsis. */
.ds-tile-meta {
    overflow: hidden;
    color: var(--tv-muted);
    font-size: 0.8125rem;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: keep-all;
    text-overflow: ellipsis;
}
.ds-badge {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0.125rem 0.4375rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 20%, var(--tv-surface));
    color: var(--tv-text);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}
.ds-badge-alert { background: var(--tv-danger); color: var(--tv-danger-ink); }
/* A product the person lacks: a dashed tile that asks the Vadovas for it. */
.ds-tile-off { border-style: dashed; border-color: var(--tv-line-strong); background: transparent; }
.ds-tile-off .ds-ic { opacity: 0.6; }
.ds-tile-off .ds-tile-label { color: var(--tv-text-2); }
div.ds-tile-off { cursor: default; }
div.ds-tile-off:hover { border-color: var(--tv-line-strong); transform: none; }

/* The list and the cards beside it. */
.ds-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; margin-top: 1rem; }
.ds-cols-one { grid-template-columns: minmax(0, 1fr); }
.ds-card { min-width: 0; padding: 0.5rem 1.25rem; border: 1px solid var(--tv-line); border-radius: 0.875rem; background: var(--tv-surface); }
.ds-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tv-line);
}
.ds-card-title { flex: 1; margin: 0; color: var(--tv-text); font-size: 1.0625rem; font-weight: 700; }
.ds-count,
.ds-row-count {
    display: inline-block;
    min-width: 1.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--tv-warn);
    color: var(--tv-warn-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}
.ds-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 1px solid var(--tv-line); }
.ds-row:last-child { border-bottom: 0; }
.ds-dot { flex: 0 0 0.625rem; width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--c); }
.ds-dot-alert { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tv-danger) 25%, transparent); background: var(--tv-danger); }
/* A deadline within three days: an amber dot and its date in the amber chip of the deadline list (decision 13). */
.ds-dot-near { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tv-primary) 25%, transparent); background: var(--tv-primary); }
.ds-row-note .tv-deadline-chip { display: inline-block; }
.ds-row-body { flex: 1; min-width: 0; }
.ds-row-title { margin: 0; color: var(--tv-text); font-size: 0.9375rem; font-weight: 600; }
.ds-row-note { margin: 0.125rem 0 0; color: var(--tv-muted); font-size: 0.8125rem; }
.ds-row .tv-row-actions { flex-shrink: 0; }
.ds-wait .tv-empty { margin: 0.5rem 0; }
.ds-none { padding: 1rem 1.25rem; color: var(--tv-text-2); }
.ds-none a { color: var(--tv-link); text-decoration: underline; }

/* The card "Santrauka" of the Vadovas and an Atstovas with all rights. */
.ds-sum-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--tv-line);
    color: var(--tv-text);
    text-decoration: none;
}
.ds-sum-row:last-child { border-bottom: 0; }
.ds-sum-row:hover .ds-sum-label { color: var(--tv-link); }
.ds-sum-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); border-radius: 0.375rem; }
.ds-sum-icon .tv-icon,
.ds-sum-go .tv-icon { display: block; width: 1.125rem; height: 1.125rem; color: var(--tv-muted); }
.ds-sum-label { flex: 1; min-width: 0; font-size: 0.9375rem; }
.ds-sum-value { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The card "Kiti produktai" of a member. */
.ds-other { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--tv-line); }
.ds-other-name { flex: 1; min-width: 0; font-size: 0.9375rem; }
.ds-other-note { display: block; color: var(--tv-muted); font-size: 0.8125rem; }
.ds-other form { display: contents; }
.ds-card-foot { margin: 0; padding: 0.75rem 0; color: var(--tv-muted); font-size: 0.8125rem; }

/* The block "Atraskite daugiau" of a company that uses one product. */
.ds-discover { margin-top: 1rem; padding-bottom: 1.25rem; }
.ds-discover-head { flex-wrap: wrap; border-bottom: 0; }
.ds-price { margin: 0; color: var(--tv-text-2); font-size: 0.875rem; }
.ds-discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
.ds-dcard { display: flex; flex-direction: column; min-width: 0; padding: 0.875rem; border: 1px solid var(--tv-line); border-radius: 0.75rem; background: var(--tv-surface); }
.ds-dcard-head { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.9375rem; }
.ds-dcard-text { flex: 1; margin: 0.5rem 0 0.75rem; color: var(--tv-text-2); font-size: 0.875rem; line-height: 1.5; }
.ds-more { color: var(--tv-link); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.ds-more:hover,
.ds-more:focus-visible { text-decoration: underline; }

/* A narrow screen: the side menu stands above the content as a row that
   wraps, the tiles take two columns, and the cards stack. */
@media (max-width: 1023px) {
    .ds-frame { grid-template-columns: minmax(0, 1fr); }
    .ds-side { padding: 0.75rem 1rem; border-right: 0; border-bottom: 1px solid var(--tv-line); }
    .ds-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.375rem; }
    .ds-nav-title { display: none; }
    .ds-nav-link { min-height: 2.25rem; padding: 0.375rem 0.75rem; border: 1px solid var(--tv-line); background: var(--tv-surface); font-size: 0.875rem; }
    .ds-nav-on { border-color: var(--tv-calm-line); }
    .ds-company { display: block; margin: 0 0 0.25rem; color: var(--tv-text); font-size: 1.0625rem; font-weight: 700; }
    .ds-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    .ds-main { padding: 1rem 1rem 1.5rem; }
    .ds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .ds-tiles-one { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone a tile takes the whole width, so a full name stands in one line beside its count. */
@media (max-width: 479px) {
    .ds-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    .ds-tile { gap: 0.5rem; padding: 0.625rem; }
    .ds-ic { flex-basis: 2rem; width: 2rem; height: 2rem; }
    .ds-card { padding: 0.25rem 0.875rem; }
    .ds-row { flex-wrap: wrap; }
    .ds-row .tv-row-actions { width: 100%; justify-content: flex-start; padding-left: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-tile { transition: none; }
    .ds-tile:hover { transform: none; }
}

/* ── track B, B2: Žmonės ir prieigos ──
   The rules of the people table (darbastalis/people.html) go directly under
   this comment. Names start with .ds-people.
   Package B2 writes here and nowhere else in this file.
   ── end of the head of B2 ── */
/* The head: the title, the sentence under it and the one amber button. */
.ds-people-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ds-people-head-text { min-width: 0; }
.ds-people-title { margin: 0; color: var(--tv-text); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.ds-people-sub { margin: 0.25rem 0 0; color: var(--tv-text-2); font-size: 0.9375rem; }
.ds-people-add { flex-shrink: 0; gap: 0.5rem; }
.ds-people-add .tv-icon { width: 1rem; height: 1rem; }

/* The switch "Suteikta prieiga" / "Visi" and the search beside it. */
.ds-people-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.ds-people-count { margin-left: 0.375rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.ds-people-search { display: flex; align-items: center; gap: 0.375rem; flex: 0 1 22rem; min-width: 0; }
.ds-people-search-field {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--tv-input-line);
    border-radius: 0.625rem;
    background: var(--tv-input);
    color: var(--tv-muted);
}
.ds-people-search-field:hover { border-color: var(--tv-input-hover); }
.ds-people-search-field:focus-within { border-color: var(--tv-input-focus); box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.ds-people-search-field .tv-icon { flex-shrink: 0; width: 1rem; height: 1rem; }
.ds-people-search-field input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    color: var(--tv-text);
    font: inherit;
    font-size: 0.9375rem;
    outline: none;
    box-shadow: none;
}
.ds-people-search-field input::placeholder { color: var(--tv-muted); opacity: 1; }

/* The table. Every product is a narrow column with its mark on top. */
.ds-people-card { padding: 0; }
.ds-people-table thead th:first-child { border-top-left-radius: 0.875rem; }
.ds-people-table thead th:last-child { border-top-right-radius: 0.875rem; }
.ds-people-table { width: 100%; border-collapse: collapse; color: var(--tv-text); font-size: 0.9375rem; }
.ds-people-table thead th {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--tv-line);
    background: var(--tv-raised);
    color: var(--tv-text-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    vertical-align: bottom;
}
.ds-people-table thead th:first-child { padding-left: 1.25rem; }
.ds-people-table thead .ds-people-h-product {
    width: 5.25rem;
    color: var(--tv-text);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}
.ds-people-h-product > span { display: block; }
.ds-people-h-product > span + span { white-space: nowrap; }
.ds-people-ic { margin: 0 auto 0.25rem; flex-basis: 1.625rem; width: 1.625rem; height: 1.625rem; border-radius: 0.4375rem; }
.ds-people-ic svg { width: 0.9375rem; height: 0.9375rem; }
.ds-people-table thead .ds-people-h-end { width: 1%; }
.ds-people-row > th,
.ds-people-row > td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--tv-line); vertical-align: middle; }
.ds-people-row:last-child > th,
.ds-people-row:last-child > td { border-bottom: 0; }
.ds-people-row > th { min-width: 17rem; padding-left: 1.25rem; font-weight: 400; text-align: left; }
.ds-people-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.ds-people-mail { display: block; margin-top: 0.125rem; color: var(--tv-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ds-people-role,
.ds-people-you {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: var(--tv-raised);
    color: var(--tv-text);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.ds-people-you { border-color: var(--tv-calm-line); background: var(--tv-calm); color: var(--tv-calm-ink); }
.ds-people-state { white-space: nowrap; }
.ds-people-status {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
}
.ds-people-status-on { background: var(--tv-calm); color: var(--tv-calm-ink); }
.ds-people-status-wait { background: var(--tv-warn); color: var(--tv-warn-ink); }
.ds-people-status-paused { border: 1px solid var(--tv-line-strong); color: var(--tv-text-2); }
.ds-people-none { color: var(--tv-text-2); }
.ds-people-cell { text-align: center; }
.ds-people-cell form { display: contents; }
.ds-people-cell-name { display: none; }

/* A tick. A button where it can be changed, a plain mark where it cannot. */
.ds-people-tick {
    display: inline-grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 1px solid var(--tv-line-strong);
    border-radius: 0.5rem;
    background: var(--tv-surface);
    color: var(--tv-calm-ink);
    font: inherit;
    vertical-align: middle;
}
.ds-people-tick .tv-icon { width: 0.9375rem; height: 0.9375rem; }
button.ds-people-tick { cursor: pointer; }
button.ds-people-tick[aria-pressed="false"] .tv-icon { visibility: hidden; }
button.ds-people-tick:hover { border-color: var(--tv-calm-ink); }
button.ds-people-tick:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.ds-people-tick[aria-pressed="true"],
.ds-people-tick[data-on="true"] { border-color: var(--tv-calm-line); background: var(--tv-calm); }
.ds-people-tick-all[data-on="true"] { border-color: var(--tv-line-strong); background: var(--tv-surface); color: var(--tv-text-2); }
.ds-people-asked {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    background: var(--tv-warn);
    color: var(--tv-warn-ink);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* The end of a row: the answer to a request, "Visos teisės", the invitation
   and the menu of the other actions. */
.ds-people-end { padding-right: 1.25rem !important; }
.ds-people-end .tv-row-actions { flex-wrap: nowrap; }
.ds-people-all { color: var(--tv-text-2); font-size: 0.875rem; white-space: nowrap; }
.ds-people-menu { position: relative; }
.ds-people-menu > summary { list-style: none; min-width: 2rem; padding: 0.25rem 0.5rem; cursor: pointer; }
.ds-people-menu > summary::-webkit-details-marker { display: none; }
.ds-people-menu-panel {
    position: absolute;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 16rem;
    margin-top: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.625rem;
    background: var(--tv-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    text-align: left;
}
.ds-people-menu-panel form { display: block; }
.ds-people-menu-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--tv-text);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    list-style: none;
}
.ds-people-menu-item::-webkit-details-marker { display: none; }
.ds-people-menu-item:hover { background: var(--tv-raised); }
.ds-people-menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tv-focus-ring); }
.ds-people-danger { color: var(--tv-danger-soft-text); }
.ds-people-confirm[open] { padding-bottom: 0.5rem; border-radius: 0.375rem; background: var(--tv-danger-soft); }
.ds-people-confirm-text { margin: 0.25rem 0.625rem 0.5rem; color: var(--tv-text); font-size: 0.8125rem; line-height: 1.45; white-space: normal; }
.ds-people-confirm form { display: block; padding: 0 0.625rem; }

.ds-people-pages { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; }
.ds-people-page-no { color: var(--tv-text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ds-people-foot { margin: 0.75rem 0 0; color: var(--tv-text-2); font-size: 0.875rem; }

/* A narrow screen: each person is a card, with the products as a row of
   ticks under the name and no sideways scroll. The table needs about
   1100 px beside the side menu, so the cards begin below 1280 px. */
@media (max-width: 1279px) {
    .ds-people-head { flex-direction: column; align-items: stretch; }
    .ds-people-add { justify-content: center; }
    .ds-people-title { font-size: 1.25rem; }
    .ds-people-search { flex: 1 1 100%; }
    .ds-people-card { border: 0; background: transparent; }
    .ds-people-table,
    .ds-people-table tbody { display: block; }
    .ds-people-table thead { display: none; }
    .ds-people-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.375rem;
        margin-bottom: 0.625rem;
        padding: 0.875rem;
        border: 1px solid var(--tv-line);
        border-radius: 0.875rem;
        background: var(--tv-surface);
    }
    .ds-people-row > th,
    .ds-people-row > td { padding: 0; border-bottom: 0; }
    .ds-people-row > .ds-people-who { flex: 1 1 100%; min-width: 0; padding-left: 0; }
    .ds-people-row > .ds-people-state { flex: 1 1 100%; }
    .ds-people-row > .ds-people-cell { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; align-self: flex-start; gap: 0.1875rem; min-width: 0; max-width: 5.5rem; }
    .ds-people-cell-name { display: block; max-width: 100%; color: var(--tv-text-2); font-size: 0.6875rem; line-height: 1.2; text-align: center; overflow-wrap: normal; word-break: keep-all; }
    .ds-people-row > .ds-people-end { flex: 1 1 100%; padding-right: 0 !important; }
    .ds-people-end .tv-row-actions { flex-wrap: wrap; justify-content: flex-start; }
    .ds-people-menu-panel { right: auto; left: 0; width: min(16rem, calc(100vw - 4rem)); }
}

/* ── track B, B3: Atsiskaitymai, Įrenginiai, Įmonės duomenys ──
   The rules of the three pages of package B3 go directly under this comment.
   Names start with .ds-billing, .ds-devices or .ds-company.
   Package B3 writes here and nowhere else in this file.
   ── end of the head of B3 ── */
/* Atsiskaitymai inside the frame (billing/darbastalis_base.html): the billing
   page keeps its own cards and takes the width of the content. */
.ds-billing { min-width: 0; max-width: 72rem; }
/* The head of Įrenginiai and Įmonės duomenys: the title, one sentence, and
   at most one quiet button on the right. */
.ds-devices-head,
.ds-company-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0 0 1rem;
}
.ds-devices-title,
.ds-company-title { margin: 0; color: var(--tv-text); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.ds-devices-head .tv-btn .tv-icon { width: 1rem; height: 1rem; }
.ds-devices,
.ds-company-stamp,
.ds-company-api { max-width: 72rem; }
.ds-devices-count {
    min-width: 1.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--tv-raised);
    color: var(--tv-text-2);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}
.ds-devices-icon,
.ds-company-icon {
    flex: 0 0 2rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--tv-calm);
    color: var(--tv-calm-ink);
}
.ds-devices-icon .tv-icon,
.ds-company-icon .tv-icon { width: 1.125rem; height: 1.125rem; }
.ds-devices .tv-empty { margin: 0.5rem 0; }
/* Įmonės duomenys: the details and the address for invoices side by side,
   the signature look and the API keys under them. */
.ds-company-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 72rem;
    margin-bottom: 1rem;
}
.ds-company-card { padding-bottom: 0.5rem; }
.ds-company-facts { display: grid; gap: 0; margin: 0; }
.ds-company-facts > div {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tv-line);
}
.ds-company-facts dt { color: var(--tv-muted); font-size: 0.875rem; }
.ds-company-facts dd { margin: 0; color: var(--tv-text); font-size: 0.9375rem; overflow-wrap: anywhere; }
.ds-company-text { margin: 0.875rem 0 0.75rem; color: var(--tv-text-2); font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.ds-company-email { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; }
.ds-company-email input { flex: 1 1 14rem; min-width: 0; }
.ds-company-stamp { margin-bottom: 1rem; padding-bottom: 1.25rem; }
.ds-company-note { margin: 0 0 1rem; }
.ds-company-stamp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.ds-company-fields { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-company-fields:disabled { opacity: 0.6; }
.ds-company-errors:empty { display: none; }
.ds-company-errors { color: var(--tv-danger-soft-text); font-size: 0.875rem; }
.ds-company-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ds-company-sub { margin: 0 0 0.5rem; color: var(--tv-text); font-size: 0.9375rem; font-weight: 600; }
.ds-company-sample {
    display: block;
    width: 100%;
    height: 15rem;
    border: 1px solid var(--tv-line);
    border-radius: 0.5rem;
    background: var(--tv-raised);
}
.ds-company-sample-box .tv-hint { margin-top: 0.5rem; }
.ds-company-api .ds-card-foot a { font-size: 0.875rem; }
@media (max-width: 1023px) {
    .ds-company-grid,
    .ds-company-stamp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    .ds-devices-title,
    .ds-company-title { font-size: 1.25rem; }
    .ds-company-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
    .ds-devices-row { flex-wrap: wrap; }
    .ds-company-api .ds-row .tv-row-actions { padding-left: 0; }
}

/* ── track B, B4: the header button "Darbastalis" ──
   A rule the button of the platform frame needs goes directly under this
   comment. Names start with .ds-head.
   Package B4 writes here and nowhere else in this file.
   ── end of the head of B4 ── */
/* The count on the button. It is drawn as the count of the list "Laukia
   Jūsų" on the desk (.ds-count), so the two read as one. Both frames use it. */
.ds-head-count {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.375rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--tv-warn);
    color: var(--tv-warn-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ds-head-link { display: inline-flex; align-items: center; }

/* ── track B, B7: Balansas ──
   The rules of the page "Balansas", of the row of a low balance and of the
   band of an employee who came first go directly under this comment. Names
   start with .ds-balance or .ds-band.
   Package B7 writes here and nowhere else in this file.
   ── end of the head of B7 ── */
/* The page "Balansas" (darbastalis/balance.html): the card with what is left,
   the sums and the button on the left, the own top-ups on the right. */
.ds-balance-head { margin: 0 0 1rem; }
.ds-balance-title { margin: 0; color: var(--tv-text); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.ds-balance-cols {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    max-width: 72rem;
}
.ds-balance-card { padding: 1rem 1.25rem 1.125rem; }
.ds-balance-label { margin: 0; color: var(--tv-muted); font-size: 0.875rem; }
.ds-balance-fig {
    margin: 0.125rem 0 0.75rem;
    color: var(--tv-text);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.ds-balance-over {
    margin: 0 0 0.375rem;
    color: var(--tv-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ds-balance-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ds-balance-sums { display: flex; width: 100%; }
.ds-balance-sums .tv-switch-opt { flex: 1 1 0; min-width: 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ds-balance-go { justify-content: center; width: 100%; }
.ds-balance-go .tv-icon { width: 1rem; height: 1rem; }
.ds-balance-note { margin: 0.75rem 0 0; color: var(--tv-text-2); font-size: 0.875rem; line-height: 1.5; }
.ds-balance-mine { min-width: 0; }
.ds-balance-mine .tv-empty { margin: 0; }
.ds-balance-table { padding: 0; overflow: hidden; }
.ds-balance-table table { width: 100%; border-collapse: collapse; }
.ds-balance-table th {
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--tv-line);
    background: var(--tv-raised);
    color: var(--tv-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}
.ds-balance-table td {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--tv-line);
    color: var(--tv-text);
    font-size: 0.9375rem;
}
.ds-balance-table tr:last-child td { border-bottom: 0; }
.ds-balance-sum { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The state of a top-up: credited in the calm tone, waiting in soft amber,
   failed in the fault tone. */
.ds-balance-state {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}
.ds-balance-state-ok { background: var(--tv-calm); color: var(--tv-calm-ink); }
.ds-balance-state-wait { background: var(--tv-warn); color: var(--tv-warn-ink); }
.ds-balance-state-fault { background: var(--tv-danger-soft); color: var(--tv-danger-soft-text); }
/* The row of a low balance in "Laukia Jūsų": the dot in the brand teal. */
.ds-balance-row { --c: var(--tv-link); }
.ds-balance-row .tv-row-btn .tv-icon { width: 0.875rem; height: 0.875rem; }
/* The payer of each top-up on Atsiskaitymai (billing/dashboard.html, both frames). */
.ds-balance-paid { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.ds-balance-paid-day { flex: 0 0 13rem; }
.ds-balance-paid-who { display: inline-flex; flex: 1 1 12rem; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
.ds-balance-paid .tv-bill-sum { margin-left: auto; }
/* The band of an employee who came first: the calm notice of phase 2 above the greeting. */
.ds-band { margin: 0 0 1rem; }
.ds-band b { color: var(--tv-text); }
.ds-band .tv-notice-action .tv-icon { width: 1rem; height: 1rem; }
/* One line of text beside the button: the icon, the text and the button share their middle. */
@media (min-width: 640px) {
    .ds-band { align-items: center; }
}
@media (max-width: 1023px) {
    .ds-balance-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    .ds-balance-title { font-size: 1.25rem; }
    .ds-balance-table th,
    .ds-balance-table td { padding: 0.625rem 0.75rem; }
    .ds-balance-paid-day { flex-basis: 100%; }
}