/* Maker Studio modules 2-3 (Listing Writer, Clean Packager) on the app design system: the kit's app.css (injected on
   /app/*) draws panels, fields, buttons, the Pro card and the action bar. Only what is specific to these tools is here,
   on tokens only (var(--mk-…)). */
.mss [hidden] { display: none !important; }
.mss .mss-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mss .mss-drop { position: relative; }
.mss .mss-set { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mss .mss-set legend { padding: 0; margin-bottom: 6px; }
.mss .mss-warn { flex-direction: column; gap: 2px; margin: 0; padding-left: var(--mk-s-4); list-style: disc; }
.mss .mss-status:empty { display: none; }
.mss .mss-chip-file { position: relative; overflow: hidden; }
.mss .mss-chip-file:focus-within { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* the save row inside the action bar (only when the host offers saving) */
.mss .mss-savebar { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: var(--mk-s-1); margin: 0; font-size: var(--mk-fs-xs); color: var(--mk-text-3); }
.mss .mss-savebar .mss-link { min-height: 32px; padding: 0 var(--mk-s-2); border: 0; border-radius: var(--mk-r-md); background: none; font: 600 var(--mk-fs-sm)/1 var(--mk-font); color: var(--mk-accent-ink); cursor: pointer; }
@media (max-width: 1023px) { .mss .mk-actions--float .mss-savebar { display: none; } }
.mss .mk-actions > .mk-btn--primary { flex: 1 1 100%; }
.mss .mk-actions > .mk-btn--primary.is-locked { background: var(--mk-accent); border-color: var(--mk-accent); color: var(--mk-on-accent) !important; }
.mss .mk-actions > .mk-btn--primary.is-locked .mk-pro-tag { background: var(--mk-surface); }

/* the Pro card when Pro is on: still opens, to remove the key */
.mss .mss-pro.is-owned > summary { cursor: pointer; }
.mss .mss-pro.is-owned > summary::after { display: block; background: var(--mk-ok); }

/* More Maker Studio tools */
.mss .mss-studio__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mk-s-1); }
.mss .mss-studio__list a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: var(--mk-s-1) var(--mk-s-2); border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); text-decoration: none; color: var(--mk-text); }
.mss .mss-studio__list a:hover { border-color: var(--mk-accent); background: var(--mk-accent-soft); }
.mss .mss-studio__list strong { font-weight: 600; font-size: var(--mk-fs-md); }
.mss .mss-studio__list span { font-size: var(--mk-fs-xs); color: var(--mk-text-3); }

/* three grid children: inputs, result, extras (Pro, more tools). Desktop: extras sit under the inputs. */
@media (min-width: 1024px) {
  .mss.mk-ws { grid-template-rows: auto 1fr; }
  .mss.mk-ws > .mss-extra { grid-row: 2; align-self: start; }
  .mss.mk-ws > .mk-ws__side { grid-column: 1; }
  .mss.mk-ws > .mk-ws__main { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/* work-around for a kit specificity bug: `.mk-btn:hover:not(:disabled):not([aria-disabled])` beats the primary hover,
   so a hovered primary turned grey with white text. Remove once app.css fixes it. */
.mk-app-mode .mk-app .mk-btn--primary:hover:not(:disabled):not([aria-disabled='true']) { background: var(--mk-accent-hover); border-color: var(--mk-accent-hover); }
/* Clean Packager: the file plan and the result, on the kit's tokens */
.mss-pk .mss-planbody { padding: var(--mk-s-3); }
.mss-pk .mss-plan { display: flex; flex-direction: column; gap: var(--mk-s-2); }
.mss-pk .mss-plan__count { margin-left: auto; font-size: var(--mk-fs-xs); color: var(--mk-text-3); }
.mss-pk .mss-designs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--mk-s-1); }
.mss-pk .mss-designs > li { padding: var(--mk-s-2); border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); background: var(--mk-surface); }
.mss-pk .mss-drow { display: flex; gap: var(--mk-s-1); align-items: center; }
.mss-pk .mss-num { flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: var(--mk-r-sm); background: var(--mk-accent-soft); color: var(--mk-accent-ink); font: 700 var(--mk-fs-xs)/1 var(--mk-font-mono); }
.mss-pk .mss-drow .mk-input { flex: 1; min-width: 0; }
.mss-pk .mss-x { flex: none; color: var(--mk-text-2) !important; }
.mss-pk .mss-x:hover { color: var(--mk-err) !important; }
.mss-pk .mss-files { list-style: none; margin: var(--mk-s-1) 0 0; padding: 0 0 0 40px; display: flex; flex-direction: column; gap: 2px; font-size: var(--mk-fs-xs); color: var(--mk-text-3); }
.mss-pk .mss-files li { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; overflow-wrap: anywhere; min-width: 0; }
.mss-pk .mss-old { text-decoration: line-through; }
.mss-pk .mss-files code { font: 500 var(--mk-fs-xs)/1.4 var(--mk-font-mono); color: var(--mk-text); overflow-wrap: anywhere; }
.mss-pk .mss-planfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mk-s-1); }
@media (max-width: 479px) { .mss-pk .mss-files { padding-left: 0; } }