/* ==================================================================== */
/* TASK BOARD                                                           */
/* Shared by TaskBoardDesktop and TaskBoardMobile.                      */
/*                                                                      */
/* Deliberately a global sheet rather than two scoped ones: the card,    */
/* chip and column styles used to be duplicated in both components and   */
/* had already drifted apart. Everything visual lives here once; the     */
/* components only decide layout and behaviour.                          */
/*                                                                      */
/* Colours come exclusively from the design tokens in variables.css, so  */
/* dark mode needs no overrides in this file.                            */
/* ==================================================================== */

/* -- Page shell ------------------------------------------------------ */

/* Neither the app nor MudBlazor ships a universal box-sizing reset, so
   `width: 100%` plus the page padding pushed the board past the viewport and
   gave the whole page a horizontal scrollbar. Scoped to the board's subtree
   rather than set globally, to keep it out of the rest of the app's way. */
.tb-page,
.tb-page *,
.tb-page *::before,
.tb-page *::after { box-sizing: border-box; }

/* Width, centring and padding match .lk-page in global.css so the board sits on
   the same measure as every other page. The height is the one deliberate
   difference: the board fills the viewport and scrolls inside each column,
   rather than growing the page. */
.tb-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    height: calc(100dvh - 64px);
    overflow: hidden;
    position: relative;
}

/* The table has no columns to scroll inside, so it behaves like the patient and
   finance lists: the page grows and the window scrolls. */
.tb-page--table {
    height: auto;
    min-height: 0;
    overflow: visible;
}

/* -- Toolbar --------------------------------------------------------- */

.tb-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.tb-toolbar-spacer { flex: 1 1 auto; min-width: 0; }

/* Search */
.tb-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.625rem;
    height: 34px;
    min-width: 200px;
    max-width: 280px;
    flex: 0 1 240px;
    border: 1px solid var(--lk-border-color);
    border-radius: 0.5rem;
    background: var(--lk-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tb-search:focus-within {
    border-color: var(--lk-primary);
    box-shadow: 0 0 0 3px var(--lk-primary-light);
}

.tb-search .mud-icon-root { color: var(--lk-text-muted) !important; flex-shrink: 0; }

.tb-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-sm);
    color: var(--lk-text);
    width: 100%;
    min-width: 0;
}

.tb-search-input::placeholder { color: var(--lk-text-muted); }

.tb-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
}

.tb-search-clear:hover .mud-icon-root { color: var(--lk-text) !important; }

/* Filter segmented control */
.tb-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: 0.625rem;
    background: var(--lk-primary-background);
    border: 1px solid var(--lk-border-color);
}

.tb-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.4375rem;
    border: none;
    background: transparent;
    color: var(--lk-text-muted);
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.tb-filter:hover { color: var(--lk-text); }

/* The ring, not the fill, is what marks the selection: in dark mode the surface
   and the control's own tinted background are nearly the same value, so a fill
   alone left the active filter indistinguishable. Inset so it costs no layout. */
.tb-filter--on {
    background: var(--lk-surface);
    color: var(--lk-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--lk-primary-lighten), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Neutral by default now that every filter carries a count; only the overdue
   one earns the alarm colour. */
.tb-filter-badge {
    font-size: var(--lk-font-2xs);
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 9999px;
    background: var(--lk-primary-light);
    color: var(--lk-text-muted);
}

.tb-filter-badge--danger {
    background: var(--lk-danger-color-background);
    color: var(--lk-icon-destructive);
}

/* Icon and text buttons in the toolbar */
.tb-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 34px;
    padding: 0 0.625rem;
    border: 1px solid var(--lk-border-color);
    border-radius: 0.5rem;
    background: var(--lk-surface);
    color: var(--lk-text-muted);
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-xs);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.tb-tool-btn:hover { border-color: var(--lk-primary-lighten); color: var(--lk-text); }
.tb-tool-btn .mud-icon-root { color: inherit !important; }
.tb-tool-btn--icon { width: 34px; padding: 0; }
.tb-tool-btn--on { background: var(--lk-primary-light); border-color: var(--lk-primary-lighten); color: var(--lk-primary); }
.tb-tool-btn--danger:hover { border-color: var(--lk-error); color: var(--lk-error); }

/* -- Board ----------------------------------------------------------- */

.tb-board {
    display: flex !important;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--lk-nav-scrollbar) transparent;
}

.tb-board::-webkit-scrollbar { height: 8px; }
.tb-board::-webkit-scrollbar-thumb { background: var(--lk-nav-scrollbar); border-radius: 4px; }
.tb-board::-webkit-scrollbar-thumb:hover { background: var(--lk-nav-scrollbar-hover); }

/* -- Column ---------------------------------------------------------- */

.tb-col {
    flex: 1 1 0;
    min-width: 268px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--lk-primary-background);
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius-lg);
    overflow: hidden;
    position: relative;
    transition: flex-basis 0.25s ease, min-width 0.25s ease;
}

.tb-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.625rem;
    flex-shrink: 0;
}

.tb-col-title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--tb-accent, var(--lk-primary));
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tb-col-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-col-title .mud-icon-root { color: inherit !important; flex-shrink: 0; }
.tb-col-title:hover { opacity: 0.75; }

.tb-col-head-right {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    flex-shrink: 0;
}

.tb-col-count {
    font-size: var(--lk-font-2xs);
    font-weight: 600;
    line-height: 1;
    color: var(--lk-text-muted);
    background: var(--lk-primary-light);
    padding: 0.25rem 0.4375rem;
    border-radius: 9999px;
}

.tb-col-overdue {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: var(--lk-font-2xs);
    font-weight: 700;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 9999px;
    background: var(--lk-danger-color-background);
    color: var(--lk-icon-destructive);
}

.tb-col-overdue .mud-icon-root { color: inherit !important; }

.tb-icon-btn {
    width: 24px;
    height: 24px;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--lk-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.tb-icon-btn:hover { background: var(--lk-primary-light); color: var(--lk-primary); }
.tb-icon-btn .mud-icon-root { color: inherit !important; }

/* -- Collapsed column: a narrow rail ---------------------------------- */

.tb-col--collapsed {
    flex: 0 0 46px;
    min-width: 46px;
    cursor: pointer;
}

.tb-col--collapsed:hover { background: var(--lk-primary-light); }

.tb-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0 0.5rem;
    height: 100%;
    min-height: 0;
}

.tb-rail .mud-icon-root { color: var(--tb-accent, var(--lk-primary)) !important; }

.tb-rail-label {
    writing-mode: vertical-rl;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lk-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-height: 0;
}

/* -- Drop zone -------------------------------------------------------- */

.tb-zone {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.5rem 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--lk-nav-scrollbar) transparent;
    transition: background 0.2s ease;
}

.tb-zone::-webkit-scrollbar { width: 6px; }
.tb-zone::-webkit-scrollbar-thumb { background: var(--lk-nav-scrollbar); border-radius: 3px; }
.tb-zone::-webkit-scrollbar-thumb:hover { background: var(--lk-nav-scrollbar-hover); }

.tb-zone.tb-drop-ok {
    background: var(--lk-primary-light);
    outline: 2px dashed var(--lk-primary-lighten);
    outline-offset: -4px;
    border-radius: 0.625rem;
}

.tb-zone.tb-drop-no { background: var(--lk-danger-color-background); }

/* Empty column: a real drop target with a hint, not blank space. */
.tb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.25rem 0.75rem;
    margin: 0.125rem 0;
    border: 1px dashed var(--lk-border-color);
    border-radius: var(--lk-border-radius);
    color: var(--lk-text-muted);
    text-align: center;
    pointer-events: none;
}

.tb-empty .mud-icon-root { color: var(--lk-icon-muted) !important; }
.tb-empty-text { font-family: var(--lk-font-sans); font-size: var(--lk-font-xs); }

/* -- Card ------------------------------------------------------------- */

.tb-card {
    position: relative;
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius);
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.tb-card:hover {
    box-shadow: var(--lk-shadow-soft);
    border-color: var(--lk-primary-lighten);
}

.tb-card:focus-visible {
    outline: none;
    border-color: var(--lk-primary);
    box-shadow: 0 0 0 3px var(--lk-primary-light);
}

.tb-card--done { opacity: 0.6; }
.tb-card--done:hover { opacity: 0.85; }

/* A charge reads as a charge: the tint is layered over the surface rather than
   replacing it, so the card stays opaque on the column's own tinted background. */
.tb-card--billing {
    background:
        linear-gradient(var(--lk-danger-color-background), var(--lk-danger-color-background)),
        linear-gradient(var(--lk-danger-color-background), var(--lk-danger-color-background)),
        var(--lk-surface);
    border-color: var(--lk-danger-color-background);
}

.tb-card--billing:hover { border-color: var(--lk-icon-destructive); }

/* Dragging: MudBlazor puts .mud-drop-item-dragging on the wrapper. */
.mud-drop-item-dragging { opacity: 1 !important; }

.mud-drop-item-dragging .tb-card {
    cursor: grabbing;
    box-shadow: var(--lk-shadow-hover);
    border-color: var(--lk-primary);
    z-index: 50;
}

.tb-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
}

.tb-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: -1px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease;
}

.tb-check:hover { transform: scale(1.15); }
.tb-check:focus-visible { outline: 2px solid var(--lk-primary); outline-offset: 1px; border-radius: 50%; }
.tb-check--open .mud-icon-root { color: var(--lk-icon-muted) !important; transition: color 0.2s ease; }
.tb-check--open:hover .mud-icon-root { color: var(--lk-financial) !important; }
.tb-check--done .mud-icon-root { color: var(--lk-financial) !important; }
.tb-check--done:hover .mud-icon-root { color: var(--lk-icon-muted) !important; }

.tb-card-text {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-sm);
    font-weight: 500;
    line-height: 1.45;
    color: var(--lk-text);
    word-break: break-word;
}

.tb-card-text--done { text-decoration: line-through; color: var(--lk-text-muted); }

/* Highlighted search match inside a card title. */
.tb-mark {
    background: var(--lk-secondary-light);
    color: inherit;
    border-radius: 0.1875rem;
    padding: 0 0.1em;
}

/* Row actions: present but quiet until the card is hovered or focused. */
.tb-card-menu {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tb-card:hover .tb-card-menu,
.tb-card:focus-within .tb-card-menu { opacity: 1; }

.tb-card-menu .mud-icon-button {
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--lk-text-muted) !important;
}

.tb-card-menu .mud-icon-button:hover { background: var(--lk-primary-light); }

/* Meta chips */
.tb-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding-left: calc(24px + 0.4375rem);
}

.tb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    min-width: 0;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-2xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
}

.tb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-chip .mud-icon-root { color: inherit !important; flex-shrink: 0; }

.tb-due--overdue { background: var(--lk-danger-color-background); color: var(--lk-icon-destructive); }
.tb-due--today   { background: var(--lk-warning-light);           color: var(--lk-warning); }
.tb-due--soon    { background: var(--lk-primary-light);           color: var(--lk-primary); }
.tb-due--later   { background: var(--lk-primary-background);      color: var(--lk-text-muted); }

.tb-chip--patient { background: var(--lk-tertiary-light); color: var(--lk-tertiary); }
.tb-chip--source  { background: var(--lk-primary-background); color: var(--lk-text-muted); padding: 0.2rem 0.3rem; }
.tb-chip--note    { background: var(--lk-primary-background); color: var(--lk-text-muted); padding: 0.2rem 0.3rem; }

.tb-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: calc(24px + 0.4375rem);
}

.tb-card-date {
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-2xs);
    color: var(--lk-icon-muted);
}

/* -- Column footer: inline composer ----------------------------------- */

.tb-add-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: calc(100% - 1rem);
    margin: 0.375rem 0.5rem 0.5rem;
    padding: 0.4375rem 0.5rem;
    border: none;
    border-radius: var(--lk-border-radius);
    background: transparent;
    color: var(--lk-text-muted);
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.tb-add-trigger:hover { background: var(--lk-primary-light); color: var(--lk-primary); }
.tb-add-trigger .mud-icon-root { color: inherit !important; }

.tb-composer {
    margin: 0.375rem 0.5rem 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--lk-surface);
    border: 1px solid var(--lk-primary);
    border-radius: var(--lk-border-radius);
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    box-shadow: 0 0 0 3px var(--lk-primary-light);
    flex-shrink: 0;
}

.tb-composer-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-sm);
    color: var(--lk-text);
    width: 100%;
    min-width: 0;
}

.tb-composer-input::placeholder { color: var(--lk-icon-muted); }

.tb-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tb-composer-hint {
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-2xs);
    color: var(--lk-text-muted);
}

.tb-composer-save {
    padding: 0.25rem 0.75rem;
    border: none;
    border-radius: 0.375rem;
    background: var(--lk-primary);
    color: var(--lk-text-on-primary);
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-xs);
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.tb-composer-save:hover { box-shadow: var(--lk-shadow-soft); }
.tb-composer-save:disabled { opacity: 0.45; cursor: not-allowed; }

/* -- Board-level empty state (nothing matches search or filter) ------- */

.tb-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    padding: 2rem 1rem;
    text-align: center;
}

.tb-blank .mud-icon-root { color: var(--lk-icon-muted) !important; }
.tb-blank-title { font-family: var(--lk-font-sans); font-size: var(--lk-font-md); font-weight: 600; color: var(--lk-text); margin: 0; }
.tb-blank-text  { font-family: var(--lk-font-sans); font-size: var(--lk-font-sm); color: var(--lk-text-muted); margin: 0; }

/* -- Table view ------------------------------------------------------- */

/* Row title: the complete toggle sits beside the text, as it does on a card. */
.tb-row-title {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.tb-row-title-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.tb-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-xs);
    font-weight: 600;
    white-space: nowrap;
}

.tb-status-chip .mud-icon-root { color: inherit !important; flex-shrink: 0; }

/* -- Mobile ----------------------------------------------------------- */

.tb-page--mobile {
    max-width: none;
    padding: 0.5rem 0.75rem;
    gap: 0.625rem;
    height: calc(100dvh - 72px - 16px - env(safe-area-inset-top, 0px));
}

/* Column switcher: one column at a time beats snap-scrolling four of them,
   and the strip doubles as the "where am I" indicator. */
.tb-tabs {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.125rem;
}

.tb-tabs::-webkit-scrollbar { display: none; }

.tb-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.4375rem 0.6875rem;
    border: 1px solid var(--lk-border-color);
    border-radius: 9999px;
    background: var(--lk-surface);
    color: var(--lk-text-muted);
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.tb-tab .mud-icon-root { color: var(--tb-accent, var(--lk-primary)) !important; }

.tb-tab--on {
    background: var(--lk-primary-light);
    border-color: var(--lk-primary-lighten);
    color: var(--lk-primary);
}

.tb-tab-count {
    font-size: var(--lk-font-2xs);
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 9999px;
    background: var(--lk-primary-background);
    color: var(--lk-text-muted);
}

.tb-tab--on .tb-tab-count { background: var(--lk-surface); color: var(--lk-primary); }

.tb-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lk-icon-destructive);
    flex-shrink: 0;
}

/* The filter control can outgrow a narrow phone; let it scroll rather than
   wrap into a second row that eats board height. */
.tb-filters-scroll {
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -0.125rem 0;
    padding: 0.125rem 0;
}

.tb-filters-scroll::-webkit-scrollbar { display: none; }
.tb-filters-scroll .tb-filters { width: max-content; min-width: 100%; }
.tb-filters-scroll .tb-filter { flex: 1 1 auto; justify-content: center; }

/* Single visible column on mobile */
.tb-page--mobile .tb-col {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* No column header on mobile - the tab strip is the header - so the zone
   needs its own breathing room under the accent hairline. */
.tb-page--mobile .tb-zone { padding-top: 0.625rem; }

.tb-page--mobile .tb-board { overflow-x: hidden; }

.tb-page--mobile .tb-card { padding: 0.75rem 0.6875rem; }
.tb-page--mobile .tb-card-text { font-size: var(--lk-font-md); }
.tb-page--mobile .tb-check { width: 28px; height: 28px; }
.tb-page--mobile .tb-card-meta,
.tb-page--mobile .tb-card-foot { padding-left: calc(28px + 0.4375rem); }

/* Touch has no hover, so the row menu stays visible on mobile. */
.tb-page--mobile .tb-card-menu { opacity: 1; }
.tb-page--mobile .tb-card-menu .mud-icon-button { width: 30px; height: 30px; }

.tb-page--mobile .tb-search { flex: 1 1 auto; max-width: none; height: 36px; }
.tb-page--mobile .tb-search-input { font-size: var(--lk-font-lg); }
.tb-page--mobile .tb-tool-btn { height: 36px; }
.tb-page--mobile .tb-tool-btn--icon { width: 36px; }
.tb-page--mobile .tb-composer-input { font-size: var(--lk-font-lg); }
.tb-page--mobile .tb-composer-save { padding: 0.375rem 1rem; font-size: var(--lk-font-sm); }
.tb-page--mobile .tb-add-trigger { padding: 0.625rem 0.5rem; font-size: var(--lk-font-sm); }

/* -- Narrow desktop --------------------------------------------------- */

@media (max-width: 1100px) {
    .tb-page { padding: 0.75rem 0.875rem 0.875rem; }
    .tb-search { flex-basis: 100%; max-width: none; order: -1; }
}