/* Printable Studio (Name Tracing, Name Labels): only what the kit's app.css (site/app/_kit/src/styles/app.css)
   does not already cover. Every colour is a kit token; the pages themselves stay paper-white. */
.nt [hidden]{display:none!important}

/* two panes on a wide screen; on a phone: mode + names, then the preview, then settings and the class pack */
@media (min-width:1024px){
  .nt-ws{grid-template-columns:var(--mk-side-w) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"a m" "b m"}
  .nt-side-a{grid-area:a}
  .nt-side-b{grid-area:b}
  .nt-main{grid-area:m;position:sticky;top:calc(var(--mk-head-h, 56px) + var(--mk-s-4));align-self:start}
}

/* mode cards with an icon */
.nt-tabs>button{display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--mk-s-1);align-items:center}
.nt-tabs>button>svg{grid-row:1/span 2;width:20px;height:20px}
.nt-tab__t{font-weight:600}
.nt-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mk-s-1)}
.nt-labelrow>label{font:500 var(--mk-fs-sm)/1.3 var(--mk-font);color:var(--mk-text)}
.nt-count{font-size:var(--mk-fs-xs);color:var(--mk-text-2);font-variant-numeric:tabular-nums}
.nt-name{font-size:var(--mk-fs-lg)!important}
.nt-list{min-height:180px!important}
.nt-switches{display:flex;flex-direction:column}
.nt-switch-hint{display:block}

/* preview */
.nt-pager{flex-wrap:wrap;min-width:0}
.nt-pager__name{font-weight:600;color:var(--mk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14em}
.nt-pager__text{color:var(--mk-text-2);font-weight:500}
.nt-paper-tag{font-size:var(--mk-fs-xs);color:var(--mk-text-2)}
.nt-stage{min-height:0!important}
.nt-page{display:block;max-width:100%!important;height:auto!important}
.nt-thumbs>button{min-width:96px}
.nt-thumb{display:block;width:84px!important;height:auto!important;background:#fff;border:1px solid var(--mk-border);border-radius:2px}
.nt-thumb__t{font-weight:600;color:inherit}
.nt-thumb__p{color:var(--mk-text-3)}
.nt-summary[hidden]{display:none!important}

/* action bar and class pack */
.nt-actions .mk-pro-tag{margin-left:4px}
.nt-actions .nt-status{margin:0}
.nt-keymsg:empty{display:none}
.nt-owned{display:flex}

/* Name Labels: colour swatches inside a chip */
.nl-sw{display:inline-flex;align-items:center;gap:3px}
.nl-sw i{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}
.nl-sw i:nth-of-type(3){margin-right:4px}
.nl-formats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:420px){.nl-formats{grid-template-columns:minmax(0,1fr)!important}.nl-formats>label{min-height:44px}}
.nl-row{display:flex;flex-wrap:wrap;gap:var(--mk-s-2) var(--mk-s-4)}
.nl-row>[hidden]{display:none!important}
.nt .mk-field>.mk-seg:not(.mk-seg--cards){align-self:flex-start}
.nt-switches{gap:var(--mk-s-1)}
/* Name Labels: everything lives in the shared Printable Studio stylesheet (name-tracing/src/studio/app.css). */