/* Cutaway (viewer/cutaway.js): the key beside the view and the layers' names on the cut faces. */
.cutkey { position: absolute; left: 10px; bottom: 112px; z-index: 3; width: 250px; padding: 7px 10px 6px;
  background: rgba(11, 12, 14, 0.82); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font-size: 11px; }
.cutkey .ck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cutkey .ck-t { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cutkey .ck-how { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px;
  border: 1px solid currentColor; color: var(--dim); }
.cutkey .ck-how.model { color: #e0a05a; }
.cutkey .ck-list { display: flex; flex-direction: column; gap: 1px; }
.cutkey .ck-row { display: grid; grid-template-columns: 11px 1fr auto; gap: 7px; align-items: center; padding: 2px 4px; margin: 0 -4px;
  border-radius: 3px; cursor: default; }
.cutkey .ck-row:hover { background: rgba(255, 255, 255, 0.07); }
.cutkey .ck-sw { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.cutkey .ck-name { line-height: 1.25; }
.cutkey .ck-sub { color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.cutkey .ck-src { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--dim); font-size: 10px; line-height: 1.3; }
.cutlabel { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; font-size: 11px;
  letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px rgba(0, 0, 0, 0.8); }
html[data-lay=phone] .cutkey { left: 6px; right: auto; bottom: 150px; width: 170px; padding: 6px 8px; }
html[data-lay=phone] .cutkey .ck-sub { display: none; }
#stage.mapmode .cutkey, #stage.mapmode .cutlabel { display: none; }