:root {
    --mb-black: #111;
    --mb-ink: #1a1a1a;
    --mb-muted: #5c5c5c;
    --mb-line: #e4e2dd;
    --mb-paper: #f6f4ef;
    --mb-white: #fff;
    --mb-accent: #8a6d3b;
    --mb-danger: #a33;
    --mb-ok: #1f7a46;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--mb-ink);
    background: var(--mb-paper);
}

a {
    color: var(--mb-ink);
}

.admin-top {
    background: var(--mb-black);
    color: var(--mb-white);
}

.admin-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
}

.admin-brand {
    color: var(--mb-white);
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
}

.admin-top__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.admin-top__logout {
    color: var(--mb-white);
}

.admin-nav {
    background: var(--mb-white);
    border-bottom: 1px solid var(--mb-line);
}

.admin-nav__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 auto;
    padding: 0 1.25rem;
    max-width: 1200px;
}

.admin-nav__item {
    position: relative;
}

.admin-nav__item > a,
.admin-nav__item > span {
    display: block;
    padding: 0.75rem 0.9rem;
    text-decoration: none;
    font-size: 0.92rem;
}

.admin-nav__item.is-soon > span {
    color: var(--mb-muted);
}

.admin-nav__item.is-active > a {
    box-shadow: inset 0 -2px 0 var(--mb-black);
}

.admin-nav__sub {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 16rem;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    z-index: 20;
}

.admin-nav__item:hover > .admin-nav__sub,
.admin-nav__item:focus-within > .admin-nav__sub {
    display: block;
}

.admin-nav__sub a,
.admin-nav__sub span {
    display: block;
    padding: 0.4rem 0.9rem;
    text-decoration: none;
    font-size: 0.88rem;
}

.admin-nav__sub em {
    font-style: normal;
    color: var(--mb-muted);
    font-size: 0.75rem;
}

.admin-main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.admin-crumbs {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--mb-muted);
}

.admin-crumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
}

.admin-footer {
    border-top: 1px solid var(--mb-line);
    padding: 1rem 1.25rem;
    color: var(--mb-muted);
    font-size: 0.85rem;
}

.admin-footer p {
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.8rem;
    margin: 0 0 1rem;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-head h1 {
    margin: 0;
}

.page-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.page-head .row-actions__menu {
    left: 0;
    right: auto;
}

.row-actions.is-busy {
    pointer-events: none;
    opacity: 0.7;
}

.button,
button,
input[type="submit"] {
    display: inline-block;
    background: var(--mb-black);
    color: var(--mb-white);
    border: 1px solid var(--mb-black);
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.25;
    cursor: pointer;
    appearance: none;
}

.button--small {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

.button--ghost {
    background: transparent;
    color: var(--mb-ink);
}

.button--danger {
    background: var(--mb-danger);
    border-color: var(--mb-danger);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mb-white);
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--mb-line);
    vertical-align: middle;
}

/* Must stay display:table-cell. Flex on a <td> makes the first row's
   action cell shorter than its siblings, which offsets every row below. */
.data-table th.data-table__actions,
.data-table td.data-table__actions {
    text-align: right;
    white-space: nowrap;
}

.data-table td.data-table__actions form {
    display: inline-block;
    max-width: none;
    margin: 0;
    vertical-align: middle;
}

.data-table td.data-table__actions form[hidden] {
    display: none;
}

.data-table td.data-table__actions .button {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    vertical-align: middle;
}

.data-table td.data-table__actions > a.button ~ a.button,
.data-table td.data-table__actions .row-actions + .row-actions {
    margin-left: 0.4rem;
}

.data-table tr:has(.row-actions[open]) {
    position: relative;
    z-index: 3;
}

.data-table[data-sortable-url] tr[data-id] {
    cursor: grab;
}

.data-table tr.is-just-added {
    animation: row-in 1.2s ease;
}

@keyframes row-in {
    from {
        background: #eef6e8;
    }
    to {
        background: transparent;
    }
}

.data-table tr.is-dragging {
    opacity: 0.45;
}

form {
    max-width: 28rem;
}

label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.9rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="color"],
input[type="search"],
input[type="url"],
select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--mb-line);
    background: var(--mb-white);
    font: inherit;
}

input[type="search"] {
    appearance: none;
    border-radius: 0;
}

input[type="color"] {
    height: 2.4rem;
    padding: 0.2rem;
    max-width: 6rem;
}

.error-message {
    color: var(--mb-danger);
    font-size: 0.85rem;
}

.message {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--mb-line);
    background: var(--mb-white);
}

.message.success {
    border-color: var(--mb-ok);
}

.message.error {
    border-color: var(--mb-danger);
}

.message.hidden {
    display: none;
}

.is-login .admin-main {
    display: flex;
    justify-content: center;
    padding-top: 4rem;
}

.login-card {
    width: 100%;
    max-width: 24rem;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 1.75rem;
}

.login-card h1 {
    margin-bottom: 0.35rem;
}

.login-card__lede {
    color: var(--mb-muted);
    margin: 0 0 1.25rem;
}

.login-card .button,
.login-card input[type="submit"] {
    width: 100%;
    margin-top: 1rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
    max-width: none;
    margin-bottom: 1.25rem;
}

.filter-bar .input,
.filter-bar .submit {
    margin: 0;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.asset-card {
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
}

.asset-card__img {
    display: block;
    background: #eee;
    min-height: 8rem;
}

.asset-card__img img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.asset-card__body {
    padding: 0.75rem;
}

.asset-card h2 {
    font-size: 1rem;
    margin: 0 0 0.35rem;
}

.asset-card__meta,
.asset-card__tags {
    font-size: 0.8rem;
    color: var(--mb-muted);
    margin: 0 0 0.5rem;
}

.asset-card__tags a {
    margin-right: 0.4rem;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.pager ul,
.pager ol {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pager li {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pager li::marker {
    content: none;
}

.pager a {
    text-decoration: none;
}

.pager a:hover {
    text-decoration: underline;
}

.pager .disabled a,
.pager .active a {
    color: var(--mb-muted);
    text-decoration: none;
    pointer-events: none;
}

.pager .active a {
    color: var(--mb-black);
    font-weight: 600;
}

.pager p {
    margin: 0;
    flex: 1 0 100%;
    color: var(--mb-muted);
    font-size: 0.85rem;
}

.meta-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0 0 1.5rem;
}

.meta-list dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mb-muted);
}

.meta-list dd {
    margin: 0.15rem 0 0;
}

.asset-edit {
    display: grid;
    grid-template-columns: minmax(12rem, 22rem) 1fr;
    gap: 2rem;
}

.asset-edit__preview img {
    display: block;
    width: 100%;
    height: 14rem;
    object-fit: contain;
    background: #eee;
}

textarea {
    width: 100%;
    min-height: 6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--mb-line);
    font: inherit;
}

.admin-main .filter-bar,
.admin-main .asset-edit form,
.admin-main .form-wide {
    max-width: none;
}

.form-wide {
    max-width: 48rem;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 1.25rem 1.5rem 1.5rem;
}

/* CakePHP wraps Form->submit() in a block .submit div, which stacks the
   following Cancel link flush against it. Keep confirm/cancel on one row. */
.submit {
    display: inline-block;
    margin-right: 0.75rem;
}

form:not(.filter-bar) > .submit {
    margin-top: 1.25rem;
}

.submit + a.button,
.submit + .button {
    display: inline-block;
    vertical-align: middle;
}

form:not(.filter-bar) > .submit + a.button {
    margin-top: 1.25rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.form-actions .submit,
.form-actions .submit + a.button {
    margin: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0 1rem;
}

.form-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.25rem 1rem;
}

.form-hint {
    color: var(--mb-muted);
    font-size: 0.85rem;
}

.muted {
    color: var(--mb-muted);
    font-size: 0.85rem;
}

.thumb-cell img {
    display: block;
    width: 80px;
    height: 60px;
    object-fit: contain;
    background: transparent;
}

.image-id-field__preview img {
    display: block;
    width: 12rem;
    height: 8rem;
    object-fit: contain;
    background: #eee;
}

.form-wide .checkbox {
    display: block;
    margin: 0.25rem 0;
}

fieldset {
    border: 1px solid var(--mb-line);
    margin: 1.25rem 0;
    padding: 0.75rem 1rem 1rem;
    background: var(--mb-white);
}

legend {
    font-weight: 600;
    padding: 0 0.35rem;
}

.form-wide .tox-tinymce {
    margin: 0.25rem 0 1rem;
    border-color: var(--mb-line) !important;
    border-radius: 0;
}

.asset-picker {
    margin: 0.75rem 0 1.25rem;
}

.asset-picker__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.asset-picker__single[data-empty="1"] .asset-picker__preview,
.asset-picker__single[data-empty="1"] .asset-picker__title,
.asset-picker__preview[hidden],
.asset-picker__title[hidden],
.asset-picker__btn[hidden] {
    display: none !important;
}

.asset-picker__preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.75rem;
    height: 11rem;
    max-width: 100%;
    border: 1px solid var(--mb-line);
    background: #eee;
    overflow: hidden;
}

.asset-picker__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.asset-picker__item .asset-picker__preview {
    width: 100%;
    height: 7.5rem;
}

.asset-picker__actions {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: flex;
    gap: 0.25rem;
    z-index: 1;
}

.asset-picker__btn {
    appearance: none;
    border: 0;
    background: var(--mb-black);
    color: var(--mb-white);
    font: inherit;
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    text-decoration: none;
    cursor: pointer;
}

.asset-picker__title {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.9rem;
}

.asset-picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.asset-picker__item {
    width: 10rem;
}

.asset-picker__item.is-dragging {
    opacity: 0.5;
}

.asset-picker-dialog {
    width: min(56rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    border: 1px solid var(--mb-line);
    padding: 0;
    background: var(--mb-white);
}

.asset-picker-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.asset-picker-dialog__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--mb-line);
    margin: 0;
}

.asset-picker-dialog__title {
    margin: 0;
    font-size: 1.1rem;
}

.asset-picker-dialog__close {
    flex: 0 0 auto;
}

.asset-picker-dialog__tabs,
.asset-picker-dialog__filters,
.asset-picker-dialog__pane,
.asset-picker-dialog__pager {
    padding: 0.75rem 1.25rem;
}

.asset-picker-dialog__tabs {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0;
}

.asset-picker-dialog__filters {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    overflow: visible;
}

.asset-picker-dialog .token-select.is-open {
    z-index: 5;
}

.asset-picker-dialog .token-select__list {
    z-index: 6;
}

.asset-picker-dialog__filters .input {
    margin: 0;
}

.asset-picker-dialog__filters label,
.asset-picker-dialog__upload label {
    margin-top: 0;
}

.asset-picker-dialog__filters input[type="search"] {
    -webkit-appearance: none;
}

.asset-picker-dialog__results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
    padding: 0 1.25rem 1.25rem;
    max-height: 28rem;
    overflow: auto;
}

.asset-picker-card {
    border: 1px solid var(--mb-line);
    background: var(--mb-paper);
}

.asset-picker-card__img img {
    display: block;
    width: 100%;
    height: 8rem;
    object-fit: contain;
    background: #eee;
}

.asset-picker-card__body {
    padding: 0.6rem 0.7rem 0.75rem;
}

.asset-picker-card__body h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}

.asset-picker-dialog__upload {
    display: grid;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
}

.asset-picker-dialog__error {
    color: var(--mb-danger);
    margin: 0;
}

.asset-grid--dupes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asset-grid--dupes img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    background: #eee;
}

select.token-select-source {
    display: none;
}

.token-select {
    position: relative;
    margin: 0.25rem 0 0;
}

.token-select__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--mb-line);
    background: var(--mb-white);
    cursor: text;
}

.token-select.is-open .token-select__box {
    border-color: var(--mb-ink);
}

.token-select__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.token-select__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.15rem 0.2rem 0.15rem 0.5rem;
    background: var(--mb-paper);
    border: 1px solid var(--mb-line);
    font-size: 0.85rem;
    line-height: 1.3;
}

.token-select__pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.token-select__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mb-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.token-select__remove:hover,
.token-select__remove:focus {
    color: var(--mb-ink);
}

.token-select__search {
    flex: 1 1 8rem;
    min-width: 8rem;
    width: auto !important;
    padding: 0.25rem 0.2rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
}

.token-select__search:focus {
    outline: none;
}

.token-select__list {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 15;
    max-height: 16rem;
    margin: 0;
    padding: 0.25rem 0;
    overflow: auto;
    list-style: none;
    background: var(--mb-white);
    border: 1px solid var(--mb-ink);
    border-top: 0;
}

.token-select__option,
.token-select__empty {
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
}

.token-select__empty {
    color: var(--mb-muted);
}

.token-select__option {
    cursor: pointer;
}

.token-select__option.is-active,
.token-select__option:hover {
    background: var(--mb-paper);
}

.token-select__option--create {
    color: var(--mb-muted);
}

.cell-link {
    text-decoration: none;
    font-weight: 500;
}

.cell-link:hover,
.cell-link:focus {
    text-decoration: underline;
}

.status-pill {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--mb-line);
    color: var(--mb-muted);
}

.status-pill--on {
    color: var(--mb-ok);
    border-color: var(--mb-ok);
}

.row-actions {
    position: relative;
    display: inline-block;
    text-align: left;
}

.row-actions > summary {
    list-style: none;
}

.row-actions > summary::-webkit-details-marker {
    display: none;
}

.row-actions > summary::after {
    content: "";
    display: inline-block;
    margin-left: 0.45rem;
    border: 0.28rem solid transparent;
    border-top-color: currentColor;
    transform: translateY(0.12rem);
}

.row-actions[open] > summary::after {
    transform: translateY(-0.08rem) rotate(180deg);
}

.row-actions__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 30;
    min-width: 15.5rem;
    max-height: min(24rem, calc(100vh - 6rem));
    overflow: auto;
    padding: 0.35rem 0;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.row-actions__label {
    padding: 0.35rem 0.9rem 0.15rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mb-muted);
}

.row-actions__sep {
    height: 1px;
    margin: 0.35rem 0;
    background: var(--mb-line);
}

.row-actions form {
    max-width: none;
    margin: 0;
}

.row-actions form[hidden] {
    display: none !important;
}

.row-actions__menu a,
.row-actions__menu .button,
.row-actions__menu button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.9rem;
    border: 0;
    background: transparent;
    color: var(--mb-ink);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.row-actions__menu a:hover,
.row-actions__menu a:focus,
.row-actions__menu .button:hover,
.row-actions__menu .button:focus,
.row-actions__menu button:hover,
.row-actions__menu button:focus {
    background: var(--mb-paper);
}

.row-actions__item--danger {
    color: var(--mb-danger) !important;
}

.dash-lede {
    margin: 0.25rem 0 0;
    color: var(--mb-muted);
    font-size: 0.95rem;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.dash-stat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.05rem;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    text-decoration: none;
    color: inherit;
}

.dash-stat:hover,
.dash-stat:focus {
    border-color: var(--mb-ink);
}

.dash-stat__value {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    line-height: 1;
}

.dash-stat__label {
    font-size: 0.85rem;
    color: var(--mb-muted);
}

.dash-stat--alert {
    border-color: var(--mb-accent);
}

.dash-stat--alert .dash-stat__value {
    color: var(--mb-accent);
}

.dash-body {
    display: grid;
    gap: 1.25rem;
}

.dash-queue {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dash-panel {
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 0.9rem 1.1rem 0.35rem;
}

.dash-panel h2,
.dash-dirs h2 {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mb-muted);
}

.dash-empty {
    margin: 0;
    padding: 0.85rem 0 1rem;
    color: var(--mb-muted);
    font-size: 0.9rem;
}

.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list li {
    border-top: 1px solid var(--mb-line);
}

.dash-list li:first-child {
    border-top: 0;
}

.dash-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title when" "meta when";
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0;
    text-decoration: none;
}

.dash-list a:hover .dash-list__title,
.dash-list a:focus .dash-list__title {
    text-decoration: underline;
}

.dash-list__title {
    grid-area: title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-list__meta {
    grid-area: meta;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mb-muted);
    font-size: 0.8rem;
}

.dash-list__when {
    grid-area: when;
    color: var(--mb-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.dash-dirs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
}

.dash-dirs__col {
    padding: 0.9rem 1.1rem 0.65rem;
}

.dash-dirs__col + .dash-dirs__col {
    border-left: 1px solid var(--mb-line);
}

.dash-dirs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-dirs a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-top: 1px solid var(--mb-line);
    text-decoration: none;
    font-size: 0.95rem;
}

.dash-dirs li:first-child a {
    border-top: 0;
}

.dash-dirs a::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid var(--mb-muted);
    border-bottom: 1.5px solid var(--mb-muted);
    transform: rotate(-45deg);
}

.dash-dirs a:hover,
.dash-dirs a:focus {
    color: var(--mb-black);
}

@media (max-width: 860px) {
    .dash-stats,
    .dash-queue,
    .dash-dirs {
        grid-template-columns: 1fr;
    }

    .dash-dirs__col + .dash-dirs__col {
        border-left: 0;
        border-top: 1px solid var(--mb-line);
    }
}