/* The mod dock and mod views. Built only on kit-ui tokens, so every brand
   and both themes apply, and a mod's theme restyles its own panels too. */

/* The places an app marks for mods. Empty until a mod fills them. */
[data-mod-slot] { display: inline-flex; align-items: center; gap: 2px; }
[data-mod-slot]:empty, [data-mod-actions]:empty { display: none; }
[data-mod-actions] { display: contents; }

.mods-panel { position: fixed; z-index: var(--ui-z-drawer); top: 0; right: 0; bottom: 0; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--ui-surface-raised); border-left: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-lg); animation: mods-slide var(--ui-duration) var(--ui-ease); }
@keyframes mods-slide { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.mods-view { width: min(880px, 100%); max-height: 84vh; display: flex; flex-direction: column; }
.mods-view-scrim { padding-top: 6vh; }
.mods-surface-head { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-topbar-height); padding: 0 var(--ui-space-3) 0 var(--ui-space-4); border-bottom: 1px solid var(--ui-border); flex: none; }
.mods-surface-title { flex: 1; margin: 0; font-size: var(--ui-text-base); font-weight: var(--ui-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mods-surface-body { flex: 1; overflow: auto; padding: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-3); }

.mods-menu { width: min(520px, 100%); padding: var(--ui-space-2); }
.mods-menu-input { width: 100%; margin-bottom: var(--ui-space-2); }
.mods-menu-list { display: flex; flex-direction: column; gap: 1px; max-height: 50vh; overflow: auto; }
.mods-menu-hint { color: var(--ui-text-muted); font-size: var(--ui-text-sm); }
.mods-menu-empty { margin: 0; padding: var(--ui-space-4) var(--ui-space-2); color: var(--ui-text-muted); font-size: var(--ui-text-md); text-align: center; }
.mods-actions-menu { position: fixed; min-width: 220px; }
.mods-toast--danger { background: var(--ui-danger); color: var(--ui-on-color); }

/* What a mod's view tree renders to. */
.mods-text { margin: 0; font-size: var(--ui-text-md); line-height: var(--ui-leading); color: var(--ui-text); overflow-wrap: anywhere; }
.mods-small { font-size: var(--ui-text-sm); }
.mods-large { font-size: var(--ui-text-lg); }
.mods-bold { font-weight: var(--ui-weight-semibold); margin: 0; }
.mods-mono { font-family: var(--ui-font-mono); }
.mods-tone-muted { color: var(--ui-text-muted); }
.mods-tone-accent { color: var(--ui-accent); }
.mods-tone-success { color: var(--ui-success); }
.mods-tone-warning { color: var(--ui-warning); }
.mods-tone-danger { color: var(--ui-danger); }
.mods-heading { margin: 0; font-family: var(--ui-font-display); font-weight: var(--ui-heading-weight); letter-spacing: var(--ui-heading-tracking); line-height: var(--ui-leading-tight); }
h1.mods-heading { font-size: var(--ui-text-2xl); }
h2.mods-heading { font-size: var(--ui-text-xl); }
h3.mods-heading { font-size: var(--ui-text-lg); }
h4.mods-heading { font-size: var(--ui-text-base); }
.mods-markdown { font-size: var(--ui-text-md); line-height: var(--ui-leading); }
.mods-markdown > :first-child { margin-top: 0; }
.mods-markdown > :last-child { margin-bottom: 0; }
.mods-markdown code { font-family: var(--ui-font-mono); font-size: .92em; padding: 1px 4px; border-radius: var(--ui-radius-xs); background: var(--ui-sunken); }
.mods-code { margin: 0; padding: var(--ui-space-3); background: var(--ui-sunken); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); font-family: var(--ui-font-mono); font-size: var(--ui-text-sm); overflow: auto; white-space: pre-wrap; }
.mods-stack { display: flex; flex-direction: column; }
.mods-row { display: flex; flex-direction: row; align-items: center; }
.mods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.mods-cols-1 { grid-template-columns: minmax(0, 1fr); }
.mods-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mods-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mods-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .mods-cols-3, .mods-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mods-wrap { flex-wrap: wrap; }
.mods-justify-end { justify-content: flex-end; }
.mods-justify-between { justify-content: space-between; }
.mods-justify-center { justify-content: center; }
.mods-gap-0 { gap: 0; }
.mods-gap-1 { gap: var(--ui-space-1); }
.mods-gap-2 { gap: var(--ui-space-2); }
.mods-gap-3 { gap: var(--ui-space-3); }
.mods-gap-4 { gap: var(--ui-space-4); }
.mods-gap-6 { gap: var(--ui-space-6); }
.mods-card { padding: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-3); }
.mods-card-title { margin: 0; font-size: var(--ui-text-base); font-weight: var(--ui-weight-semibold); }
.mods-spacer { flex: 1; }
.mods-link { color: var(--ui-accent); font-size: var(--ui-text-md); }
.mods-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.mods-stat-label { font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.mods-stat-value { font-size: var(--ui-text-xl); font-weight: var(--ui-weight-semibold); font-variant-numeric: tabular-nums; }
.mods-stat-hint { font-size: var(--ui-text-xs); color: var(--ui-text-subtle); }
.mods-progress { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.mods-progress-track { height: 6px; border-radius: var(--ui-radius-full); background: var(--ui-sunken); overflow: hidden; }
.mods-progress-bar { height: 100%; background: var(--ui-accent); border-radius: inherit; }
.mods-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); overflow: hidden; }
.mods-list > li + li { border-top: 1px solid var(--ui-border); }
.mods-list-item { display: flex; align-items: center; gap: var(--ui-space-3); width: 100%; padding: var(--ui-space-2) var(--ui-space-3); min-height: var(--ui-touch-target); background: var(--ui-surface); color: var(--ui-text); border: 0; text-align: left; font: inherit; text-decoration: none; }
.mods-list-item--link { cursor: pointer; }
.mods-list-item--link:hover { background: var(--ui-hover); text-decoration: none; }
.mods-list-item:focus-visible { outline: none; box-shadow: inset var(--ui-ring); }
.mods-list-icon { color: var(--ui-text-muted); flex: none; }
.mods-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mods-list-title { font-size: var(--ui-text-md); overflow: hidden; text-overflow: ellipsis; }
.mods-list-sub { font-size: var(--ui-text-sm); color: var(--ui-text-muted); overflow: hidden; text-overflow: ellipsis; }
.mods-list-meta { font-size: var(--ui-text-xs); color: var(--ui-text-subtle); white-space: nowrap; }
.mods-table-wrap { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.mods-table { width: 100%; border-collapse: collapse; font-size: var(--ui-text-md); }
.mods-table th { text-align: left; font-weight: var(--ui-weight-medium); color: var(--ui-text-muted); font-size: var(--ui-text-sm); background: var(--ui-sunken); }
.mods-table th, .mods-table td { padding: var(--ui-space-2) var(--ui-space-3); border-bottom: 1px solid var(--ui-border); }
.mods-table tr:last-child td { border-bottom: 0; }
.mods-form { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.mods-empty { padding: var(--ui-space-6) var(--ui-space-4); }
.mods-image { max-width: 100%; height: auto; border-radius: var(--ui-radius-md); }
.mods-divider { border: 0; border-top: 1px solid var(--ui-border); margin: 0; width: 100%; }