/* Mekadmim kit: the shared parts on top of the studio's look (states, progress, steps, files, swatches, the way back to
 * the studio). Loaded by every system after base.css, and by the hub after its own app.css. Edit it in mekadmim studio/kit/web/ only. */
.empty { text-align: center; color: var(--muted); padding: 26px 10px; }
.empty.big { padding: 46px 16px; display: grid; justify-items: center; gap: 10px; }
.empty.big .empty-ic { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.empty.big .empty-ic svg { width: 28px; height: 28px; }
.empty.big h3 { margin: 0; color: var(--ink); font-size: 18px; }
.empty.big p { margin: 0; max-width: 420px; }

/* a progress bar: .prog > span (width = done); .prog.run = no known end (an indeterminate sweep) */
.prog { position: relative; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.prog > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--grad-brand); transition: width .35s ease; }
.prog.run > span { width: 35% !important; animation: sweep 1.3s ease-in-out infinite; }
@keyframes sweep { from { inset-inline-start: -35%; } to { inset-inline-start: 100%; } }
.prog-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.prog-row .prog { flex: 1; }

/* the steps of a process (an upload, a request): done / now / next */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stepper li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.stepper .st-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.stepper .st-ic svg { width: 14px; height: 14px; }
.stepper li.done { color: var(--ink); } .stepper li.done .st-ic { background: var(--good-soft); color: var(--good); }
.stepper li.now { color: var(--ink); font-weight: 600; } .stepper li.now .st-ic { background: var(--accent-soft); color: var(--accent); }

/* dropping files */
.drop { border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 22px; padding: 22px; text-align: center; color: var(--muted);
  background: color-mix(in srgb, var(--accent) 4%, transparent); cursor: pointer; transition: background .15s, border-color .15s; display: grid; gap: 6px; justify-items: center; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.drop svg { width: 26px; height: 26px; color: var(--accent); }
.drop b { color: var(--ink); }

/* tiles of files / works */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.tile { position: relative; border-radius: 20px; background: var(--surface-2); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0;
  border: 0; padding: 0; text-align: right; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile .thumb { aspect-ratio: 1; background: var(--surface-3) center / cover no-repeat; display: grid; place-items: center; color: var(--muted); }
.tile .thumb img, .tile .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .thumb svg { width: 30px; height: 30px; }
.tile .meta { padding: 9px 12px 11px; display: grid; gap: 1px; min-width: 0; }
.tile .meta b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .meta small { font-size: 12px; color: var(--muted); }
.tile .tile-acts { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-acts, .tile:focus-within .tile-acts { opacity: 1; }
.tile .tile-acts .icon-btn { background: rgba(255, 255, 255, .9); color: #0b2b36; width: 32px; height: 32px; }

/* an upload in progress (a row per file) */
.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.up-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; }
.up-list li .prog { grid-column: 1 / -1; height: 6px; }
.up-list li.err { background: var(--bad-soft); color: var(--bad); }

/* color swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); flex: none; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stack { display: grid; gap: 18px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.ltr { direction: ltr; unicode-bidi: plaintext; }
.skel { border-radius: 14px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: skel 1.2s infinite; }
@keyframes skel { to { background-position: -200% 0; } }

/* the way back to the studio, in a system's header */
.to-hub { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1);
  color: inherit; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.to-hub:hover { background: rgba(255, 255, 255, .18); }
.to-hub .mk { width: 16px; height: 16px; }
.bell-link { position: relative; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: inherit; }
.bell-link:hover { background: rgba(255, 255, 255, .16); }
.bell-link svg { width: 19px; height: 19px; }
.bell-link .n { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 19px; height: 19px; border-radius: 99px; background: #ff6f7d; color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }

/* icons inside segmented buttons and the way back: sized (an unsized icon would take the whole width) */
.seg button svg, .tab svg { width: 15px; height: 15px; flex: none; }
.back-link { color: var(--muted); text-decoration: none; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 15px; height: 15px; }
.form { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  header.top { padding: 14px 16px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 7px 13px; font-size: 14px; flex: none; }
  .me-btn .who { display: none; }
  .me-btn { padding: 4px; }
  .card { padding: 18px 16px; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .dialog { padding: 20px 18px; border-radius: 26px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .to-hub span:not(.mk) { display: none; }
  .to-hub { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }