:root {
    --form-element-height-xs: clamp(1.625rem, 1.5rem + 0.375vw, 1.75rem);
    --form-element-height-sm: clamp(2rem, 1.8rem + 0.6vw, 2.25rem);
    --form-element-height-md: clamp(2.5rem, 2.1rem + 0.8vw, 3rem);
    --form-element-height-lg: clamp(3rem, 2.5rem + 1vw, 3.5rem);

    /* Default size context (lg) — lets tt-input-group work outside .tt-form */
    --form-input-height: var(--form-element-height-lg);
    --form-input-font-size: var(--step--1);
    --form-input-padding: var(--space-3xs);
    --form-button-padding: var(--button-padding-lg);
    --form-button-radius: var(--button-radius-lg);
}

.tt-form {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: var(--paragraph-color);

    /* label */
    --form-label-font-size: var(--step-0);
    --form-label-color: var(--paragraph-color);

    /* input */
    --form-input-font-size: var(--step-0);
    --form-input-height: var(--form-element-height-lg);
    --form-input-padding: var(--space-3xs);

    /* row */
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-lg);
    --form-button-radius: var(--button-radius-lg);
}

/* SIZES */
.tt-form--medium {
    --form-label-font-size: var(--step--1);
    --form-input-font-size: var(--step--1);
    --form-input-height: var(--form-element-height-md);
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-md);
    --form-button-radius: var(--button-radius-md);
}
.tt-form--small {
    --form-label-font-size: var(--step--1);
    --form-input-font-size: var(--step--2);
    --form-input-height: var(--form-element-height-sm);
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-sm);
    --form-button-radius: var(--button-radius-sm);
}

/* INPUT GROUP SIZE MODIFIERS — mirrors form size contexts for standalone groups */
.tt-input-group--md {
    --form-input-height: var(--form-element-height-md);
    --form-input-font-size: var(--step--1);
    --form-button-padding: var(--button-padding-md);
    --form-button-radius: var(--button-radius-md);
}
.tt-input-group--sm {
    --form-input-height: var(--form-element-height-sm);
    --form-input-font-size: var(--step--2);
    --form-button-padding: var(--button-padding-sm);
    --form-button-radius: var(--button-radius-sm);
}

/* BUTTON SIZES */
.tt-form .tt-btn {
    height: var(--form-input-height);
    font-size: var(--form-input-font-size);
    padding: var(--form-button-padding);
    border-radius: var(--form-button-radius);
}

/* SECTION TITLE — visual separator between groups of fields inside a form */
.tt-form-section-title {
    width: 100%;
    margin-top: var(--space-s);
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-2xs);
    border-bottom: var(--border-thin) solid var(--primary-color);
    font-size: var(--step-0);
    font-weight: var(--font-weight-semibold);
    color: var(--heading-color);
    letter-spacing: 0.01em;
}

/* No top margin when it's the very first child — already has card padding above it */
.tt-form-section-title:first-child {
    margin-top: 0;
}

/* LAYOUT */

.tt-form .tt-form-row {
    width: 100%;
    margin-bottom: var(--form-row-margin-bottom);
}

.tt-form .grid-base-md,
.tt-form .grid-base {
    width: 100%;
    row-gap: 0;
}

/* FORM GRID */
.tt-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--form-row-margin-bottom);
    margin-bottom: var(--form-row-margin-bottom);
    width: 100%;
    align-items: flex-start;
}
.tt-form-grid .tt-form-grid-item {
    display: flex; /* needed if items are input groups */
    flex: 0 0 auto;
}

.tt-form-grid .tt-form-grid-item--auto {
    flex: 1 1 0;   /* default: grow and shrink equally */
}

/* Grid items inside the form grid */
.tt-form-grid > .tt-form-row {
    flex: 1 1 auto;                 /* default: grow to fill space */
    min-width: 16rem;               /* don't shrink below this */
}

/* RESET BUTTON WIDTH AND MARGIN */
.tt-form .tt-btn,
.tt-form.tt-form--medium .tt-btn,
.tt-form.tt-form--small .tt-btn
{
    width: fit-content;
    margin: 0;
}

/* LABEL */
.tt-form label, .tt-form .tt-label {
    color: var(--form-label-color);
}

.tt-form label:not(.tt-checkbox-label, .tt-helper-label, .tt-radio-label),
.tt-form .tt-label {
    width: 100%;
    font-weight: var(--font-weight-normal);
    font-size: var(--form-label-font-size);
    line-height: 1.4;
    max-width: 60ch;
    margin-bottom: 0;
}

.tt-form .tt-checkbox-label,
.tt-form .tt-label .tt-checkbox-label {
    display: inline;
}

/* Note shown next to a "Required for salary recipients" checkbox that is already
   mandated by the company's selected accounting program */
.tt-checkbox-required-note {
    display: inline;
    margin-left: var(--space-3xs);
    font-size: var(--step--2);
    font-style: italic;
    color: var(--form-label-color);
}

.custom-checkbox-wrapper.tt-checkbox-wrapper--locked {
    opacity: 0.7;
}

.tt-form label.tt-helper-label {
    display: block;
    font-weight: var(--font-weight-normal);
    font-size: var(--step--2);
    color: var(--form-label-color);
    margin: 0;
}
.tt-form label.tt-radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--form-label-font-size);
    padding: var(--space-3xs);
}
.tt-placeholder-label::before {
    content: "\00A0";
}
.tt-sr-only {
    position: absolute !important;   /* remove from flex layout */
    width: 1px !important;           /* minimal width for screen readers */
    height: 1px !important;          /* minimal height */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none;            /* prevent accidental interaction */
}

/* PER DIEM MEALS — checkbox + amount rows with a running total underneath.
   Lives here rather than in a file of its own because it is a form layout:
   the inputs themselves are ordinary tt-form controls. */
.tt-per-diem-meals {
    width: 100%;
    margin-bottom: var(--form-row-margin-bottom);
    border: var(--border-thin) solid var(--border-muted);
    border-radius: var(--button-radius-md);
    overflow: hidden;
}

.tt-per-diem-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: var(--border-thin) solid var(--border-muted);
}

.tt-per-diem-row:last-of-type {
    border-bottom: 0;
}

/* An unclaimed meal keeps its amount visible but recedes, so the row the user
   has actually chosen is the one that reads first. */
.tt-per-diem-row-meal {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--form-label-font-size);
    color: var(--text-muted);
}

.tt-per-diem-row--claimed .tt-per-diem-row-meal {
    color: var(--heading-color);
    font-weight: var(--font-weight-semibold);
}

.tt-per-diem-row-amount {
    flex: 0 0 9rem;
}

.tt-per-diem-row-amount input {
    text-align: right;
}

.tt-per-diem-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background-color: var(--bg-muted);
    border-top: var(--border-md) solid var(--primary-color);
}

.tt-per-diem-total-label {
    font-size: var(--form-label-font-size);
    color: var(--paragraph-color);
}

.tt-per-diem-total-value {
    font-size: var(--step-1);
    font-weight: var(--font-weight-semibold);
    color: var(--heading-color);
    font-variant-numeric: tabular-nums;
}

/* PER DIEM WEEK GRID — amounts are entered once above; these rows carry only
   which meals were claimed, so every column but the first is a checkbox. */
.tt-per-diem-grid {
    width: 100%;
    margin-bottom: var(--form-row-margin-bottom);
    border: var(--border-thin) solid var(--border-muted);
    border-radius: var(--button-radius-md);
    overflow: hidden;

    /* A size context of its own, below the form's smallest. A range can run to
       two months, so a row here is a line in a table rather than a form row —
       the controls in it take the table's size, not the surrounding form's. */
    --form-input-height: var(--form-element-height-xs);
    --form-input-font-size: var(--step--2);
    --form-input-padding: 0 var(--space-3xs);
}

.tt-per-diem-day-row {
    display: grid;
    grid-template-columns: minmax(5rem, 1fr) minmax(3rem, 7rem) repeat(3, minmax(1.75rem, 3.25rem)) 6.5rem;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-bottom: var(--border-thin) solid var(--border-muted);
    font-size: var(--step--2);
    /* Table leading, not body leading: with up to 62 rows stacked, the space above
       and below each line is most of what the section costs. */
    line-height: 1.2;
}

.tt-per-diem-day-row:last-child {
    border-bottom: 0;
}

.tt-per-diem-day-row--head {
    background-color: var(--bg-muted);
    font-size: var(--step--3);
    color: var(--paragraph-color);
}

/* A day with nothing ticked still holds its place in the range, but should not
   compete with the days that will actually become entries. */
.tt-per-diem-day-row--empty .tt-per-diem-day-label,
.tt-per-diem-day-row--empty .tt-per-diem-day-total {
    color: var(--text-muted);
}

/* A day whose per diem is already approved. It is in the grid to be read, not
   filled in, so it recedes the way an empty day does — but keeps its total, which
   is the thing it is there to show. */
.tt-per-diem-day-row--locked {
    background-color: var(--bg-muted);
}

.tt-per-diem-day-row--locked .tt-per-diem-day-label,
.tt-per-diem-day-row--locked .tt-per-diem-day-meal {
    color: var(--text-muted);
}

/* A day that already had a per diem and has just had its last meal unticked.
   Removing it is the only thing that can mean, so the row says so before the
   form is submitted rather than after. */
.tt-per-diem-day-row--cleared .tt-per-diem-day-label,
.tt-per-diem-day-row--cleared .tt-per-diem-day-total {
    text-decoration: line-through;
}

.tt-per-diem-day-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    white-space: nowrap;
    overflow: hidden;
}

/* Both lines in the column, so a date squeezed by a narrow modal reads as cut
   off rather than as a shorter date. */
.tt-per-diem-day-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* What the grid knows about a day beyond what is ticked on it: that it is
   already saved, already approved, or about to go. */
.tt-per-diem-day-note {
    font-size: var(--step--3);
    line-height: 1.2;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-per-diem-day-note--warning {
    color: var(--danger-color);
}

/* The per-day rate set: empty means the stretch's, which is what nearly every
   row means, so it stays quiet until it is set to something. */
.tt-per-diem-day-rate-set {
    min-width: 0;
}

.tt-form .tt-per-diem-day-rate-set-input {
    width: 100%;
    min-width: 0;
    font-family: inherit;
    color: var(--paragraph-color);
    background-color: transparent;
    border: var(--border-thin) solid var(--border-muted);
    border-radius: var(--button-radius-sm);
}

.tt-form .tt-per-diem-day-rate-set-input:disabled {
    color: var(--text-muted);
}

.tt-per-diem-day-row--head .tt-per-diem-day-rate-set {
    white-space: nowrap;
}

.tt-per-diem-day-meal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.tt-per-diem-day-meal-name {
    font-size: var(--step--3);
    line-height: 1;
}

.tt-per-diem-day-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The week grid's own total strip matches the single-entry form's. */
.tt-per-diem-grid .tt-per-diem-total {
    border-top: var(--border-md) solid var(--primary-color);
}

/* RATE PRESETS — a card lists the named amounts a level offers for one preset
   kind, and one is edited in a modal. The list is a table, so the rules here are
   the two things a table cannot say for itself: how the list sits in its card,
   and how the modal lays out a kind's fields. */
.tt-preset-list {
    width: 100%;
}

/* The description runs as wide as it can and the offered count sits at the end
   of the line - so a long sentence wraps under itself rather than pushing the
   pill onto a line of its own. */
.tt-preset-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-xs);
    margin-bottom: var(--space-2xs);
}

.tt-preset-list-blurb {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

/* The add button sits under the table rather than beside the heading, so it
   reads as acting on the list just above it rather than on the card as a
   whole. */
.tt-preset-list-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-xs);
}

/* One step down: a rate set is now a country column plus three meals, and this
   is what keeps all of it on one line instead of wrapping the header. */
.tt-preset-table {
    font-size: var(--step--2);
}

/* Amounts are read down the column, so they are figured on one width. */
.tt-preset-table td.tt-text-right {
    font-variant-numeric: tabular-nums;
}

/* A name this level has taken off the menu: still listed, because taking it off
   is a decision somebody has to be able to see and undo, but not offered — so it
   recedes from the rows that are. */
.tt-preset-row--hidden td {
    color: var(--text-muted);
}

/* THE MODAL — one preset. The name leads on a line of its own, and the values
   follow in the groups the kind declared. */
.tt-preset-form-name {
    width: 100%;
}

.tt-preset-form-name input {
    max-width: 22rem;
}

/* One group per line. A rate set is three meals, and a meal is the unit somebody
   copies off a published table - name it, then read across its four fields and
   move on. Side by side the three read as a grid to be scanned in two
   directions, and the eye has to find which column it was in on the way back. */
.tt-preset-form-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

/* A kind that groups its fields gets a labelled block per group. A kind that
   groups nothing falls into a single unlabelled block and lays out as a plain
   row of fields. */
.tt-preset-row-group {
    width: 100%;
    min-width: 0;
}

.tt-preset-row-group-label {
    font-size: var(--step--1);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    margin-bottom: var(--space-3xs);
}

.tt-preset-row-group-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2xs);
}

.tt-preset-row-value {
    flex: 1 1 8rem;
    min-width: 0;
}

.tt-preset-row-value input {
    width: 100%;
    text-align: right;
}

/* A salary type is picked by name, not typed, so it takes about twice the room a
   number does and keeps the reading edge a number's right alignment gives up.
   It stays on the meal's line rather than dropping below it: what a meal is
   worth and where it is booked is one answer, and reading it should not mean
   reading two lines. */
.tt-preset-row-value--choice {
    flex: 2 1 14rem;
}

.tt-preset-row-value--choice select {
    width: 100%;
}