/* An arranged dashboard keeps the rows of cards the dashboard always had (UI/index.css) and the
   cards of ./UI/menu.php. These rules give the same cards to the places outside #welcome-message:
   the editor, folders and the small preview. */
.tnx-dashboard-layout { --dashboard-card-size: 100px; --dashboard-card-gap: 0.75rem; }
/* The editor and the live dashboard need the same desktop canvas. A page's ordinary
   1200px limit changes the column count and pushes saved neighbours into later rows. */
main:has(.chat-container[data-tnx-index-view="dashboard"] > .tnx-dashboard-layout) { max-width: none; }
@media (min-width: 900px) {
    .tnx-dashboard-workspace > .tnx-dashboard-layout,
    .chat-container[data-tnx-index-view="dashboard"] > #welcome-message.tnx-dashboard-layout {
        /* Leave room for the editor's panel/workspace padding and thin scrollbar. */
        width: min(100%, calc(90vw - var(--tnx-sidebar-width, 0px) - 5rem));
        margin-inline: auto;
    }
}
/* Arranged cards and code use the same opacity as the editor. */
.chat-container[data-tnx-index-view="dashboard"] #welcome-message.tnx-dashboard-layout { opacity: 1; font-size: 1rem; padding-top: 0; }
#welcome-message.tnx-dashboard-layout > :is(.welcome-menu-section, .welcome-placeholder) { font-size: 2rem; }
.tnx-dashboard-layout .welcome-menu-section { width: 100%; }
.tnx-dashboard-layout .menu-item { font-family: inherit; }
.tnx-dashboard-layout:not(#welcome-message) .welcome-menu-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--dashboard-card-gap);
    margin-top: 0;
    width: 100%;
}
.tnx-dashboard-layout:not(#welcome-message) .welcome-menu-nav > .menu-item {
    border: 0;
    box-sizing: border-box;
    width: var(--dashboard-card-size);
    max-width: var(--dashboard-card-size);
    height: var(--dashboard-card-size);
    min-height: 0;
    padding: 0.5rem 0.45rem;
    border-radius: 12px;
    margin: 0;
    font-size: 2rem;
    text-align: center;
    align-items: center;
}
.tnx-dashboard-layout .menu-item .menu-title {
    display: block;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    margin-top: 0.5rem;
    line-height: 1.04;
    text-align: center;
    text-align-last: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
}
/* A wider card spans the width of that many cards and grows with its content. */
.tnx-dashboard-layout .welcome-menu-nav > .menu-item.tnx-dashboard-wide,
#welcome-message .welcome-menu-nav > .welcome-menu-card.menu-item.tnx-dashboard-wide {
    width: calc(var(--dashboard-span, 1) * var(--dashboard-card-size, 100px) + (var(--dashboard-span, 1) - 1) * var(--dashboard-card-gap, 0.75rem)) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--dashboard-card-size, 100px) !important;
}
.tnx-dashboard-layout .workflow-link.workflow-link-attached { visibility: hidden; pointer-events: none; }
.tnx-dashboard-card { position: relative; gap: 0.2rem; overflow-wrap: anywhere; text-decoration: none; cursor: pointer; }
.tnx-dashboard-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.tnx-dashboard-layout .workflow-quick-menu-icon { font-size: 2rem; }
.tnx-dashboard-layout .menu-icon-box { display: inline-flex; align-items: center; justify-content: center; width: var(--menu-icon-container-size, 64px); height: var(--menu-icon-container-size, 64px); aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--border-color); background-color: var(--menu-icon-bg, var(--input-bg)); }
.tnx-dashboard-layout .menu-icon-emoji { font-size: 2.2rem; line-height: 1; }
.tnx-dashboard-layout .welcome-useful-link-icon, .tnx-dashboard-layout .useful-link-avatar { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.tnx-dashboard-layout .useful-link-avatar { border-radius: 999px; background: var(--border-color); color: var(--text-color); font-size: 1rem; font-weight: 700; text-transform: uppercase; overflow: hidden; }
.tnx-dashboard-folder-cover {
    display: grid;
    grid-template-columns: repeat(var(--folder-columns, 3), minmax(0, 1fr));
    gap: 1px;
    width: calc(var(--folder-columns, 3) * 15px);
    max-width: 100%;
    margin-inline: auto;
    align-self: center;
    min-height: 44px;
    padding: 3px;
    box-sizing: border-box;
    background: var(--border-color, #8882);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.2;
}
.tnx-dashboard-clock, .tnx-dashboard-mail-status { font-size: 0.6rem; line-height: 1.2; }
.tnx-dashboard-recent-list { width: 100%; max-height: 280px; overflow: auto; overscroll-behavior: contain; text-align: start; font-size: .85rem; }
.tnx-dashboard-recent-list a { display: block; padding: .45rem; text-decoration: none; color: inherit; overflow-wrap: anywhere; }
.tnx-dashboard-recent-list a:hover { opacity: .8; }
.tnx-dashboard-recent-list small { display: block; opacity: .7; font-size: .75rem; }
.tnx-dashboard-layout [data-dashboard-recent] { cursor: default; }
.tnx-dashboard-layout [data-dashboard-recent]:hover { transform: none; background-color: var(--input-bg); color: var(--text-color); filter: none; }
/* Dashboard code is a full-width block between the rows; while arranging it is a placeholder. */
.tnx-dashboard-layout .tnx-dashboard-code-block > .menu-item {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 70px;
    padding: 0.6rem;
    border-radius: 12px;
    margin: 0;
    font-size: 1.4rem;
}
.tnx-dashboard-code-preview { font-size: .75rem; }
/* While arranging, a spacing is a bar that starts the next row of cards. */
.tnx-dashboard-layout .tnx-dashboard-break {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 30px;
    margin: 0.75rem 0;
    padding: 0.3rem 0.6rem;
    border: 1px dashed var(--border-color, #8886);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: .7rem;
    opacity: 1;
    filter: none;
    cursor: pointer;
}
.tnx-dashboard-layout .tnx-dashboard-break:hover { opacity: .8; background: transparent; color: var(--text-color); filter: none; }

.tnx-dashboard-overlay { z-index: 10050; padding: 0; }
.tnx-dashboard-dialog { width: min(520px, 90vw); max-width: 90vw; max-height: 90dvh; box-sizing: border-box; overflow: auto; }
.tnx-dashboard-dialog.is-editor { width: 90vw; height: 90dvh; overflow: hidden; }
.tnx-dashboard-heading h2 { margin: 0; font-size: 1.1rem; text-align: center; }
.tnx-dashboard-folder-content, .tnx-dashboard-workspace { overflow: auto; min-height: 0; overscroll-behavior: contain; padding: .4rem; }
.tnx-dashboard-workspace { flex: 1; position: relative; }
.tnx-dashboard-dialog.is-editor > .tnx-dashboard-workspace { scrollbar-gutter: stable; }
[data-dashboard-preview] .tnx-dashboard-folder-content { position: relative; }
.tnx-dashboard-workspace > .tnx-dashboard-layout { min-height: 100%; }
.tnx-dashboard-actions { flex: 0 0 auto; flex-direction: row; justify-content: space-between; }
.tnx-dashboard-actions > :only-child { margin-inline-start: auto; }
.tnx-dashboard-actions > button { margin-block: 0; margin-inline: 0; }
.tnx-dashboard-item-form, .tnx-dashboard-item-fields { display: flex; flex-direction: column; gap: .8rem; }
.tnx-dashboard-item-form label { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.tnx-dashboard-item-form :is(input, select) { width: 100%; box-sizing: border-box; margin: 0; }
.tnx-dashboard-item-form optgroup { font-style: normal; }
.tnx-dashboard-item-form .tnx-dashboard-checkbox { flex-direction: row; align-items: center; justify-content: space-between; }
.tnx-dashboard-item-form input[type="checkbox"] { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; padding: 0; }
.tnx-dashboard-item-form .tnx-dashboard-mail-choices { flex-direction: column; }
.tnx-dashboard-item-form .tnx-dashboard-mail-choices > label { flex-direction: row; align-items: center; overflow-wrap: anywhere; }
.tnx-dashboard-open-folder { max-width: none; margin: 0; flex: 0 0 auto; }
.tnx-dashboard-removal-name { font-weight: bold; margin-top: .8rem !important; }
.tnx-dashboard-item-position { display: flex; gap: .8rem; }
.tnx-dashboard-item-position > label { flex: 1; min-width: 0; }
.tnx-dashboard-preview-button { display: block; width: 100%; border: 1px solid var(--border-color, #8885); border-radius: 12px; padding: .85rem; color: var(--text-color); background: var(--input-bg); cursor: pointer; text-align: left; transition: opacity .15s; box-sizing: border-box; overflow: hidden; }
.tnx-dashboard-preview-button:hover { opacity: .8; }
.tnx-dashboard-preview-viewport { position: relative; }
.tnx-dashboard-mini.tnx-dashboard-dialog.is-editor { position: absolute; inset: 0 auto auto 0; height: auto; max-height: none; pointer-events: none; transform-origin: top left; box-shadow: none; }
.tnx-dashboard-layout .tnx-dashboard-code-placeholder {
    width: 100%; max-width: none; min-height: 70px; margin: 0;
    border: 1px solid var(--border-color, #8885); border-radius: 12px;
    /* A fixed tile keeps every stripe identical, including across wide code rows. */
    background: linear-gradient(135deg, var(--border-color, #8883) 12.5%, transparent 12.5%, transparent 50%, var(--border-color, #8883) 50%, var(--border-color, #8883) 62.5%, transparent 62.5%) 0 0 / 8px 8px repeat;
    color: var(--text-color); font: inherit;
}
.tnx-dashboard-layout .tnx-dashboard-space,
.tnx-dashboard-layout:not(#welcome-message) .welcome-menu-nav > .menu-item.tnx-dashboard-space { border: 1px dashed var(--border-color, #8885); box-shadow: none; background: transparent; justify-content: center; }
.tnx-dashboard-layout :is(.tnx-dashboard-space, .tnx-dashboard-break) > .tnx-dashboard-placeholder-label { opacity: .5; font-size: .7rem; line-height: 1.2; }
.tnx-dashboard-layout:not([data-dashboard-preview]):not(.tnx-dashboard-mini) :is(.tnx-dashboard-space, .tnx-dashboard-break) { visibility: hidden; }
[data-dashboard-preview] :is(.tnx-dashboard-space, .tnx-dashboard-break) { visibility: visible !important; }
.tnx-dashboard-tile.is-hidden-item { opacity: .35; }
.tnx-dashboard-tile.is-drop-target { outline: 3px dashed var(--link-color); }
.tnx-dashboard-drag-handle { position: absolute; top: 2px; left: 4px; color: var(--link-color); font-size: .8rem; line-height: 1; touch-action: none; cursor: grab; user-select: none; opacity: 0; }
[data-dashboard-preview] .tnx-dashboard-tile.is-selected { outline: 2px solid var(--link-color); outline-offset: 2px; }
.tnx-dashboard-selection-box { position: absolute; z-index: 2; pointer-events: none; border: 1px solid var(--link-color); background: color-mix(in srgb, var(--link-color) 15%, transparent); border-radius: 0; box-sizing: border-box; }
[data-dashboard-preview] .tnx-dashboard-tile { user-select: none; }
[data-dashboard-id] { position: relative; }
[data-dashboard-preview] .tnx-dashboard-tile:hover .tnx-dashboard-drag-handle { opacity: 1; }
.tnx-dashboard-status { font-size: .85rem; }
.tnx-dashboard-status:empty { display: none; }
/* Editing uses the original card appearance, with opacity as its only hover effect. */
[data-dashboard-preview] .tnx-dashboard-tile { transition: opacity .15s; }
[data-dashboard-preview] .tnx-dashboard-tile:hover { opacity: .8 !important; color: var(--text-color); background-color: var(--input-bg); transform: none; filter: none; }
[data-dashboard-preview] :is(.tnx-dashboard-space, .tnx-dashboard-break, .tnx-dashboard-code-placeholder):hover { background-color: transparent; }
.tnx-dashboard-layout { --dashboard-grid-gap: 12; }
.tnx-dashboard-positioned > .menu-item { border: 0; }
/* Positioned dashboards keep fixed logical cells. Only the common scale changes while
   resizing; compact mode is selected from the occupied width, not a column breakpoint. */
.chat-container[data-tnx-index-view="dashboard"] #welcome-message.tnx-dashboard-positioned,
.tnx-dashboard-positioned {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(var(--dashboard-columns, 1), calc(112px * var(--dashboard-scale, 1))) minmax(0, 1fr);
    grid-auto-rows: calc(100px * var(--dashboard-scale, 1));
    gap: calc(12px * var(--dashboard-scale, 1)) 0;
    align-content: start;
    align-items: start;
    justify-content: center !important;
    justify-items: center;
}
.tnx-dashboard-positioned > .tnx-dashboard-tile,
.tnx-dashboard-cluster > .tnx-dashboard-tile {
    box-sizing: border-box; width: 100px; max-width: 100%; height: 100px; min-height: 0;
    padding: .5rem .45rem; margin: 0; border-radius: 12px; font-size: 2rem;
}
.tnx-dashboard-positioned:not(.tnx-dashboard-clustered) > .tnx-dashboard-tile { zoom: var(--dashboard-scale, 1); max-width: none; }
.tnx-dashboard-positioned > .tnx-dashboard-wide,
.tnx-dashboard-cluster > .tnx-dashboard-wide { width: calc(var(--dashboard-span) * 100px + (var(--dashboard-span) - 1) * 12px); height: auto; min-height: 100px; }
.tnx-dashboard-positioned > :is(.tnx-dashboard-code-placeholder, .dashboard-code-slot, .tnx-dashboard-break) { width: 100%; height: auto; font-size: 1rem; }
.chat-container[data-tnx-index-view="dashboard"] #welcome-message.tnx-dashboard-clustered,
.tnx-dashboard-clustered { display: flex !important; flex-direction: column; align-items: stretch; gap: 2rem; }
.tnx-dashboard-cluster { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px; width: 100%; }
.tnx-dashboard-cluster > .menu-item { border: 0; }
.tnx-dashboard-compact-spaces,
.tnx-dashboard-clustered > .tnx-dashboard-break { display: none; }
[data-dashboard-preview] .tnx-dashboard-clustered > .tnx-dashboard-break { display: flex; }
.tnx-dashboard-clustered > .dashboard-code-slot { min-height: 0; }
@media (max-width: 480px) {
    .tnx-dashboard-actions { flex-direction: column; }
    .tnx-dashboard-actions > :only-child { margin-inline-start: 0; }
}
@media (hover: none) { .tnx-dashboard-drag-handle { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tnx-dashboard-preview-button, [data-dashboard-preview] .tnx-dashboard-tile { transition: none; } }

.tnx-dashboard-layout .tnx-dashboard-sized,
.tnx-dashboard-layout .welcome-menu-nav > .menu-item.tnx-dashboard-sized,
#welcome-message .welcome-menu-nav > .welcome-menu-card.menu-item.tnx-dashboard-sized {
    height: calc(var(--dashboard-height, 1) * 100px + (var(--dashboard-height, 1) - 1) * 12px) !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tnx-dashboard-sized > :is(.tnx-dashboard-recent-list, .tnx-dashboard-summary) { min-height: 0; flex: 1 1 auto; overflow: auto; }
.tnx-dashboard-folder-dialog { width: min(400px, 90vw); overflow: hidden; }
.tnx-dashboard-folder-dialog .tnx-dashboard-workspace { flex: 0 1 auto; }
.tnx-dashboard-folder-content { max-height: min(336px, 60dvh); }
.tnx-dashboard-folder-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.tnx-dashboard-folder-grid > .tnx-dashboard-tile { width: 100% !important; max-width: 100%; height: 100px !important; min-height: 0; padding: .5rem .4rem; margin: 0; box-sizing: border-box; font-size: 2rem; }
.tnx-dashboard-folder-grid > :is(.dashboard-code-slot, .tnx-dashboard-code-placeholder, .tnx-dashboard-break) { grid-column: 1 / -1; height: auto !important; }
.tnx-dashboard-layout .tnx-dashboard-code-placeholder { box-sizing: border-box; height: 70px !important; min-height: 70px; }
.tnx-dashboard-folder-grid .menu-title { width: 100%; line-height: 1.04; text-align: center; overflow-wrap: anywhere; }
.tnx-dashboard-summary { width: 100%; font-size: .8rem; text-align: center; }
.tnx-dashboard-summary-open { display: block; font-size: .7rem; margin-top: .5rem; }
.tnx-dashboard-board-states { display: flex; gap: .5rem; overflow-x: auto; max-width: 100%; padding: .3rem 0; }
.tnx-dashboard-board-state { flex: 0 0 70px; display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--border-color); border-radius: 8px; padding: .5rem .25rem; overflow-wrap: anywhere; }
.tnx-dashboard-board-state strong, .tnx-dashboard-total { font-size: 1.3rem; }

textarea[data-dashboard-enhanced="1"] { display: none !important; }

.tnx-dashboard-new-item-actions { justify-content: center; }
.tnx-dashboard-new-item-actions > :only-child { margin-inline: auto; }

/* Informational widgets keep the dashboard surface and a quiet card-colored outline. */
#welcome-message .tnx-dashboard-widget-frame,
.tnx-dashboard-layout:not(#welcome-message) .menu-item.tnx-dashboard-widget-frame {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    border: 1px solid var(--input-bg); background: var(--bg-color); box-shadow: none;
    border-radius: 12px; color: var(--text-color); cursor: default; font-size: .85rem;
}
/* Apply live widget hover feedback once, without the menu card's fade on entry and exit. */
#welcome-message .tnx-dashboard-widget-frame { transition: none; }
#welcome-message .tnx-dashboard-widget-frame:hover,
.tnx-dashboard-layout:not(#welcome-message) .menu-item.tnx-dashboard-widget-frame:hover {
    background: var(--bg-color); color: var(--text-color); opacity: 1; filter: none; transform: none; box-shadow: none;
}
.tnx-dashboard-layout .welcome-menu-nav > .menu-item.tnx-dashboard-widget-frame > .menu-title,
#welcome-message .welcome-menu-card.tnx-dashboard-widget-frame > .menu-title,
.tnx-dashboard-widget-frame > .menu-title { font-size: .7rem; margin: 0 !important; height: auto; max-height: 2.2em; line-height: 1.1 !important; flex: 0 0 auto; }
#welcome-message .welcome-menu-card.tnx-dashboard-widget-frame > [hidden],
.tnx-dashboard-widget-frame > [hidden] { display: none !important; }
.tnx-dashboard-clock { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 100%; min-height: 0; }
.tnx-dashboard-widget-frame select.tnx-dashboard-timezone { opacity: .5; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: .6rem; height: 1.1rem; line-height: 1.1rem; flex: 0 0 auto; }
.tnx-dashboard-timezone option { color: var(--text-color); background: var(--bg-color); }
.tnx-dashboard-clock-weekday { font-size: .7rem; }
.tnx-dashboard-clock-date { font-size: .65rem; }
.tnx-dashboard-clock-time { font: .9rem monospace; white-space: nowrap; }
.tnx-dashboard-clock-seconds { visibility: hidden; }
.tnx-dashboard-tile:hover .tnx-dashboard-clock-seconds { visibility: visible; }
.tnx-dashboard-extra-content { width: 100%; min-height: 0; flex: 1; overflow: auto; }
.tnx-dashboard-extra-content svg { width: 100%; max-height: 130px; }
.tnx-dashboard-commerce { font-size: 1rem; }
.tnx-dashboard-commerce .entry-special-analytics__table { min-width: 48rem; }
.tnx-dashboard-stock-more { width: auto; margin: .5rem auto 0; padding: .3rem; font-size: .7rem; }
.tnx-dashboard-timer-value { font: 1.8rem monospace; font-variant-numeric: tabular-nums; }
.tnx-dashboard-widget-frame input.tnx-dashboard-timer-value { width: 100%; min-width: 0; padding: 0; margin: 0; font: 1.8rem monospace; font-variant-numeric: tabular-nums; text-align: center; border: 0; outline: 0; background: transparent; color: inherit; box-shadow: none; border-radius: 0; }
.tnx-dashboard-widget-frame input.tnx-dashboard-timer-value:focus { box-shadow: 0 1px var(--link-color); }
.tnx-dashboard-timer-controls { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.tnx-dashboard-timer-controls a { padding: .3rem; margin: 0; font-size: .7rem; width: auto; }
.tnx-dashboard-layout a.tnx-dashboard-widget-action { opacity: .5; background: transparent; color: var(--link-color); cursor: pointer; }
.tnx-dashboard-layout a.tnx-dashboard-widget-action:hover { opacity: .4; }
[data-dashboard-preview] .tnx-dashboard-widget-frame { cursor: pointer; }

#welcome-message :is(a, [role="link"]).tnx-dashboard-widget-frame, .tnx-dashboard-layout:not(#welcome-message) :is(a, [role="link"]).tnx-dashboard-widget-frame { cursor: pointer; }
#welcome-message :is(a, [role="link"]).tnx-dashboard-widget-frame:hover, .tnx-dashboard-layout:not(#welcome-message) :is(a, [role="link"]).tnx-dashboard-widget-frame:hover { opacity: .8; }
.tnx-dashboard-board-state { text-decoration: none; color: inherit; }
.tnx-dashboard-board-state:hover { opacity: .8; }
.tnx-dashboard-item-form label[hidden] { display: none; }
.tnx-dashboard-tracking-status { display: block; font-size: .75rem; text-transform: none; overflow: auto; }
.tnx-dashboard-widget-action[aria-disabled="true"] { opacity: .5; cursor: default; }

/* Headings retain their symbols while source tables keep their familiar colored box. */
.tnx-dashboard-layout .menu-title .tnx-dashboard-heading-icon:not(.table-icon-box) { display: inline-flex; vertical-align: middle; width: auto; height: auto; font-size: 1em; margin: 0; }
.tnx-dashboard-extra-content, .tnx-dashboard-recent-list { overflow-x: hidden; overflow-y: auto; text-align: start; overscroll-behavior: contain; }
.tnx-dashboard-layout a.tnx-dashboard-entry-link { display: block; width: 100%; box-sizing: border-box; padding: .35rem .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--link-color); font-size: .8rem; text-align: start; font-weight: normal; }
.tnx-dashboard-layout a.tnx-dashboard-entry-link:hover { opacity: .8; }
.tnx-dashboard-entry-link small { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); font-size: .7rem; }
.tnx-dashboard-message, .tnx-dashboard-message *, .tnx-dashboard-entry-link small, .tnx-dashboard-mail-pill { text-transform: none; }
.tnx-dashboard-layout .tnx-dashboard-mail-status { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: .3rem; width: 100%; min-height: 0; flex: 1; overflow: auto; padding-block: 1px; box-sizing: border-box; }
.tnx-dashboard-layout a.tnx-dashboard-mail-pill { opacity: 1; flex: 0 0 auto; white-space: nowrap; text-decoration: none; font-size: .65rem; }
/* The inbox name above the pills must still leave a compact one-row card room for two pill rows. */
.tnx-dashboard-layout .tnx-mailbox-heading { margin-bottom: 2px; line-height: 1.1; }
.tnx-dashboard-layout .tnx-mailbox-states { justify-content: center; row-gap: 3px; }
.tnx-dashboard-mail-pill .emailbot-state-filter-separator, .tnx-dashboard-separator { color: var(--text-color); opacity: .5; }
.tnx-dashboard-layout [data-dashboard-extra="metric"] .tnx-dashboard-extra-content { display: flex; align-items: center; justify-content: center; text-align: center; }
.tnx-dashboard-layout .tnx-dashboard-date { opacity: .5; color: var(--text-color); }
.tnx-dashboard-layout .tnx-dashboard-date.is-today { opacity: 1; }
.tnx-dashboard-birthday-name, .tnx-dashboard-birthday-event { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnx-dashboard-layout .tnx-dashboard-birthday .is-special-year { color: var(--accent-color); }
.tnx-dashboard-trend-dates { display: flex; justify-content: space-between; gap: .5rem; opacity: .5; font-size: .65rem; }
.tnx-dashboard-trend-dates small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tnx-dashboard-item-form [hidden] { display: none !important; }
.tnx-dashboard-single-choice { padding: .25rem 0; overflow-wrap: anywhere; }
.tnx-dashboard-account-note { opacity: .6; }
.tnx-dashboard-option-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.tnx-dashboard-item-form label.tnx-dashboard-option-pill { flex-direction: row; align-items: center; gap: .35rem; height: auto; min-height: 24px; padding: .25rem .5rem; background: var(--input-bg); }
.tnx-dashboard-item-form .tnx-dashboard-option-pill input { width: 1rem; height: 1rem; flex-basis: 1rem; }
.tnx-dashboard-layout .tnx-dashboard-distribution { display: flex; flex-wrap: wrap; gap: .3rem; align-content: flex-start; justify-content: center; padding-block: 1px; box-sizing: border-box; }
.tnx-dashboard-layout .tnx-dashboard-status-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .15rem; padding: 0 .4rem; height: 22px; border: 1px solid var(--dashboard-status-color, var(--border-color)); background: color-mix(in srgb, var(--dashboard-status-color, var(--input-bg)) 25%, var(--bg-color)); color: var(--text-color); opacity: 1; white-space: nowrap; font-size: .65rem; text-decoration: none; }
.tnx-dashboard-layout .tnx-dashboard-distribution.is-chart { flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 1.1rem 0 .2rem; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.tnx-dashboard-layout .tnx-dashboard-bar-column { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: .4rem; min-width: 70px; max-width: 220px; height: 100%; padding: 0; color: inherit; text-decoration: none; }
.tnx-dashboard-bar-area { display: flex; flex: 1; align-items: flex-end; justify-content: center; min-height: 0; }
.tnx-dashboard-bar { position: relative; display: block; width: 60%; background: var(--dashboard-status-color); border-radius: 4px 4px 0 0; min-height: 1px; }
.tnx-dashboard-bar-count { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: .75rem; line-height: 1.1rem; }
.tnx-dashboard-bar-column .tnx-dashboard-status-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; line-height: 20px; }

.tnx-dashboard-item-form input::placeholder { text-transform: none; }