/* 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); }
/* Listing Writer: inputs and the written listing, on the kit's tokens */
.mss-lw .mss-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mss-lw .mss-type { min-height: 64px; }
.mss-lw .mss-type b { font-weight: 600; color: var(--mk-text); }
.mss-lw .mss-type small { font-size: var(--mk-fs-xs); line-height: 1.35; color: var(--mk-text-3); font-weight: 400; }
.mss-lw .mss-type:has(input:checked) small { color: var(--mk-accent-ink); }
.mss-lw .mss-type:has(input:focus-visible), .mss-lw .mss-fmts > label:has(input:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
@media (max-width: 479px) { .mss-lw .mss-types { grid-template-columns: minmax(0, 1fr); } .mss-lw .mss-type { min-height: 0; } }
.mss-lw .mss-thumb { display: flex; align-items: center; gap: var(--mk-s-2); padding: var(--mk-s-1); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); background: var(--mk-surface); min-width: 0; }
.mss-lw .mss-thumb img { width: 56px; height: 56px; flex: none; object-fit: contain; border-radius: var(--mk-r-sm); background: #fff; border: 1px solid var(--mk-border); }
.mss-lw .mss-thumb > div { min-width: 0; flex: 1; }

/* the result pane */
.mss-lw .mss-resultbody { padding: var(--mk-s-3); }
.mss-lw .mss-out { display: flex; flex-direction: column; gap: var(--mk-s-2); }
.mss-lw .mss-block { display: flex; flex-direction: column; gap: var(--mk-s-1); padding: var(--mk-s-2) var(--mk-s-3) var(--mk-s-3); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); background: var(--mk-surface); }
.mss-lw .mss-block-h { display: flex; justify-content: space-between; align-items: center; gap: var(--mk-s-2); }
.mss-lw .mss-block-h h3 { margin: 0; font: 600 var(--mk-fs-md)/1.3 var(--mk-font); color: var(--mk-text); }
.mss-lw .mss-block-meta { margin-left: var(--mk-s-1); font: 500 var(--mk-fs-xs)/1 var(--mk-font-mono); color: var(--mk-text-3); }
.mss-lw .mss-titleout { margin: 0; font-size: var(--mk-fs-lg); font-weight: 600; line-height: 1.4; color: var(--mk-text); overflow-wrap: anywhere; }
.mss-lw .mss-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mss-lw .mss-tagchip { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: var(--mk-r-pill); background: var(--mk-surface-2); border: 1px solid var(--mk-border); font-size: var(--mk-fs-sm); color: var(--mk-text); }
.mss-lw .mss-tagchip small { color: var(--mk-text-3); font-size: var(--mk-fs-xs); font-variant-numeric: tabular-nums; }
.mss-lw .mss-tagchip.has-data { background: var(--mk-ok-bg); border-color: var(--mk-ok-line); }
.mss-lw .mss-desc { min-height: 0; font-size: var(--mk-fs-sm); background: var(--mk-surface-2); }
.mss-lw .mss-checks .mk-diag__item { padding: var(--mk-s-1) var(--mk-s-2); align-items: center; }
.mss-lw .mss-checks .mk-sev-ico { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px; }
.mss-lw .mss-checks strong { font-weight: 500; font-size: var(--mk-fs-sm); }
@media (min-width: 1024px) { .mss-lw .mss-right { position: sticky; top: calc(var(--mk-head-h, 56px) + var(--mk-s-4)); max-height: calc(100dvh - var(--mk-head-h, 56px) - 2 * var(--mk-s-4)); overflow: auto; } }