/* BunchOS Maker.app (bunchos-maker.js). Same tokens and parts as Profile Pic / Wallpaper / Finder:
   off-white canvas, white-green bars, off-black pills, Finder's tile grid. */
.window.is-maker { width: min(80vw, 1180px); left: max(10vw, calc(50vw - 590px)); }
.window_content.is-maker {
  background-color: var(--off-white);
  color: var(--off-black);
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
}
.maker_root { flex: 1; min-height: 0; display: flex; container-type: size; }
.mk { flex: 1; min-width: 0; min-height: 0; display: flex; }
.mk[hidden] { display: none; }

/* ---------- left: stage + tools ---------- */
.mk_left {
  flex: none; display: flex; flex-direction: column; gap: .625rem; padding: 1.25rem;
  width: min(50cqw, calc(100cqh - 150px));
  min-width: 240px; box-sizing: content-box; overflow: auto;
}
.mk_stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1; flex: none; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--off-black); box-sizing: border-box; background: #ead0ff;
}
.mk_img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .2s; }
.mk_stage.is-empty .mk_img { opacity: 0; }
.mk_stage.is-empty {
  background: linear-gradient(100deg, rgba(55, 16, 17, .05) 30%, rgba(55, 16, 17, .1) 50%, rgba(55, 16, 17, .05) 70%) 0 0 / 300% 100%, var(--white-green);
  animation: mk-shimmer 1.4s linear infinite;
}
/* working: a small pulsing dot, never a blocking overlay */
.mk_stage::after {
  content: ""; position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--off-black); box-shadow: 0 0 0 2px var(--off-white); opacity: 0; transition: opacity .15s;
}
.mk_stage.is-busy::after { opacity: .85; animation: mk-pulse .8s ease-in-out infinite alternate; }
@keyframes mk-pulse { from { transform: scale(.7); } to { transform: scale(1.1); } }
@keyframes mk-shimmer { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }

.mk_meta { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; min-height: 1.35em; }
.mk_file { opacity: .55; white-space: pre; flex: none; }
.mk_note { font-size: 11px; color: rgba(55, 16, 17, .75); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk_tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.mk_btn {
  display: inline-flex; gap: .35rem; align-items: center; justify-content: center; flex: 1 1 auto;
  border: 1px solid rgba(55, 16, 17, .25); border-radius: 100px; padding: .5rem .8rem;
  background: var(--white); color: var(--off-black); font: inherit; cursor: pointer; white-space: nowrap;
}
.mk_btn svg { width: 13px; height: 13px; flex: none; }
.mk_btn:hover { border-color: var(--off-black); }
.mk_btn[mk-shuffle] { font-weight: 700; }
.mk_btn:disabled { opacity: .45; cursor: default; border-color: rgba(55, 16, 17, .25); }
.mk_use {
  border: 0; border-radius: 100px; padding: .65rem 1.1rem; cursor: pointer; background: var(--off-black); color: var(--off-white);
  font: inherit; font-weight: 700; white-space: nowrap;
}
.mk_use:hover { background: #5a2224; }
.mk_use:disabled { opacity: .55; cursor: default; background: var(--off-black); }

/* ---------- right: wardrobe ---------- */
.mk_right { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid rgba(55, 16, 17, .12); }
.mk_tabs {
  display: flex; flex-wrap: wrap; gap: .3rem; padding: .625rem .875rem; flex: none;
  background: var(--white-green); border-bottom: 1px solid rgba(55, 16, 17, .12);
}
.mk_tab {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(55, 16, 17, .18); border-radius: 100px;
  padding: .3rem .65rem; background: var(--white); color: var(--off-black); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.mk_tab[hidden] { display: none; }
.mk_tab:hover { border-color: rgba(55, 16, 17, .45); }
.mk_tab.is-on { background: var(--off-black); border-color: var(--off-black); color: var(--off-white); }
.mk_tab-count { opacity: .55; font-size: 10px; font-variant-numeric: tabular-nums; }
.mk_tab-count:empty { display: none; }
/* a locked slot: small green dot after the count */
.mk_tab.is-locked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fbf5f; margin-left: -.1rem; }

.mk_ctx { display: flex; flex-direction: column; gap: .5rem; padding: .625rem .875rem; flex: none; border-bottom: 1px solid rgba(55, 16, 17, .08); }
.mk_ctx-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mk_ctx-hint { opacity: .55; font-size: 11px; }
.mk_lock {
  display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--off-black); border-radius: 100px; padding: .3rem .7rem .3rem .55rem;
  background: transparent; color: var(--off-black); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.mk_lock svg { width: 12px; height: 12px; }
.mk_lock:hover { background: rgba(55, 16, 17, .06); }
.mk_lock.is-on { background: #a3f0a1; border-color: #a3f0a1; font-weight: 700; }
.mk_swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.mk_label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin-right: .1rem; }
.mk_label:not(:first-child) { margin-left: .5rem; }
.mk_swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; flex: none;
  box-shadow: inset 0 0 0 1px rgba(55, 16, 17, .2);
}
.mk_swatch.is-drawn { background: linear-gradient(135deg, transparent 45%, rgba(55, 16, 17, .55) 45% 55%, transparent 55%), var(--white); }
.mk_swatch.is-on { box-shadow: 0 0 0 2px var(--off-white), 0 0 0 4px var(--off-black); }

.mk_grid {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .75rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: max-content; gap: .5rem .25rem;
  align-content: start;
}
.mk_item {
  display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: .375rem .25rem; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; cursor: pointer; min-width: 0;
}
.mk_thumb {
  position: relative; overflow: hidden; display: block; flex: none;
  width: 72px; height: 72px; border-radius: 8px; background: #f3ecfb; box-shadow: inset 0 0 0 1px rgba(55, 16, 17, .1);
}
.mk_layer { position: absolute; inset: 0; overflow: hidden; }
.mk_layer img { position: absolute; max-width: none; height: auto; aspect-ratio: 1 / 1; display: block; pointer-events: none; }
.mk_name {
  font-size: 10.5px; line-height: 1.25; text-align: center; overflow-wrap: break-word; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 .2rem; border-radius: 4px;
}
.mk_item:hover .mk_thumb { box-shadow: inset 0 0 0 1px rgba(55, 16, 17, .3); }
.mk_item.is-selected .mk_thumb { box-shadow: 0 0 0 2px #7fbee9; }
.mk_item.is-selected .mk_name { background: var(--off-black); color: var(--off-white); }
.mk_item.is-off .mk_thumb > * { opacity: .35; filter: grayscale(1); }
.mk_item.is-off .mk_name::after { content: " · hidden"; opacity: .7; }
.mk_thumb.is-none::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 2px solid rgba(55, 16, 17, .3);
  background: linear-gradient(135deg, transparent calc(50% - 1px), rgba(55, 16, 17, .3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.mk_thumb.is-colour { box-shadow: inset 0 0 0 1px rgba(55, 16, 17, .15); }
.mk_item.is-skeleton { cursor: default; }
.mk_item.is-skeleton .mk_thumb, .mk_item.is-skeleton .mk_name {
  background: linear-gradient(100deg, rgba(55, 16, 17, .05) 30%, rgba(55, 16, 17, .1) 50%, rgba(55, 16, 17, .05) 70%) 0 0 / 300% 100%;
  animation: mk-shimmer 1.4s linear infinite; box-shadow: none;
}
.mk_item.is-skeleton .mk_name { width: 56px; }

.mk_btn:focus-visible, .mk_use:focus-visible, .mk_tab:focus-visible, .mk_lock:focus-visible, .mk_item:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.mk_swatch:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

/* ---------- error ---------- */
.mk_error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 2rem; text-align: center; }
.mk_error[hidden] { display: none; }
.mk_error-title { font-size: 14px; font-weight: 700; }
.mk_error-text { opacity: .65; max-width: 30ch; line-height: 1.5; margin-bottom: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .mk_stage.is-empty, .mk_item.is-skeleton .mk_thumb, .mk_item.is-skeleton .mk_name, .mk_stage.is-busy::after { animation: none; }
}

/* ---------- tablet ---------- */
@media screen and (max-width: 991px) and (min-width: 768px) {
  .window.is-maker { width: calc(100vw - 48px); left: 24px; }
  .mk_left { width: min(42cqw, calc(100cqh - 120px)); padding: 1rem; }
}

/* ---------- phone: full-screen sheet, stacked ---------- */
@media screen and (max-width: 767px) {
  .window.is-maker { width: 100%; left: 0; }
  .window.is-maker .ui-resizable-handle { display: none !important; }
  .maker_root { container-type: normal; }
  .mk { flex-direction: column; }
  /* like Profile Pic's head on a phone: the character with its controls beside it */
  .mk_left {
    width: auto; min-width: 0; box-sizing: border-box; padding: .875rem 1rem .75rem; overflow: visible;
    display: grid; grid-template-columns: minmax(0, 48%) minmax(0, 1fr); grid-template-areas: "stage tools" "stage use" "meta meta"; gap: .5rem .625rem;
  }
  .mk_stage { grid-area: stage; width: 100%; }
  .mk_tools { grid-area: tools; align-content: start; }
  .mk_btn { flex: 1 1 40%; padding: .55rem .5rem; }
  .mk_use { grid-area: use; align-self: end; width: 100%; padding: .65rem .5rem; white-space: normal; line-height: 1.25; }
  .mk_meta { grid-area: meta; min-height: 0; }
  .mk_meta:has(.mk_note:empty) { display: none; }
  .mk_file { display: none; }
  .mk_note { text-align: left; flex: 1; white-space: normal; }
  .mk_right { border-left: 0; border-top: 1px solid rgba(55, 16, 17, .12); min-height: 0; }
  .mk_tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .5rem 1rem; }
  .mk_tabs::-webkit-scrollbar { display: none; }
  .mk_ctx { padding: .5rem 1rem; }
  .mk_grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); padding: .625rem .625rem calc(.625rem + env(safe-area-inset-bottom)); }
}